Skip to content

Commit e2f16fd

Browse files
daattalidaattali
committed
add support for internal or external css/js/googlefonts
1 parent d2965a1 commit e2f16fd

File tree

7 files changed

+84
-22
lines changed

7 files changed

+84
-22
lines changed

‎README.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,4 @@ TODO write instructions
33

44
known bug (problem on GitHub Pages part) - if you have a project page and want a custom 404 page, you must use a custom domain. See https://help.github.com/articles/custom-404-pages/. This means that if you have a regular User Page you can use the 404 page from this theme, but if it's a website for a specific repository, the 404 page will not be used.
55

6-
mention that avatar img + css + js have to be served locally, not from a URL
7-
86
can also give googlefonts

‎_includes/footer-scripts.html‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
1-
<script src="{{ site.baseurl }}/js/jquery-1.11.2.min.js"></script>
2-
<script src="{{ site.baseurl }}/js/bootstrap.min.js"></script>
1+
{% if page.common-ext-js %}
2+
{% for js in page.common-ext-js %}
3+
<script src="{{ js }}"></script>
4+
{% endfor %}
5+
{% endif %}
36

4-
{% if include.full %}
5-
<script src="{{ site.baseurl }}/js/main.js"></script>
7+
{% if page.common-js %}
8+
{% for js in page.common-js %}
9+
<script src="{{ js | prepend: site.baseurl | replace: '//', '/' }}"></script>
10+
{% endfor %}
11+
{% endif %}
12+
13+
{% if page.ext-js %}
14+
{% for js in page.ext-js %}
15+
<script src="{{ js }}"></script>
16+
{% endfor %}
617
{% endif %}
718

819
{% if page.js %}

‎_includes/head.html‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,41 @@
88
<meta name="author" content="{{ site.author.name }}" />
99
<meta name="description" content="{{ site.description }}">
1010

11-
<link rel="stylesheet" href="{{ site.baseurl }}/css/bootstrap.min.css" />
12-
<!-- I choose not to use the bootstrap theme css, I think it looks less appealing
13-
<link rel="stylesheet" href="{{ site.baseurl }}/css/bootstrap-theme.min.css" /> -->
11+
<link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
12+
13+
{% if page.common-ext-css %}
14+
{% for css in page.common-ext-css %}
15+
<link rel="stylesheet" href="{{ css }}" />
16+
{% endfor %}
17+
{% endif %}
18+
19+
{% if page.common-css %}
20+
{% for css in page.common-css %}
21+
<link rel="stylesheet" href="{{ css | prepend: site.baseurl | replace: '//', '/' }}" />
22+
{% endfor %}
23+
{% endif %}
1424

15-
{% if include.full %}
16-
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
17-
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
18-
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
19-
<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css" />
20-
<link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
21-
{% else %}
22-
<link rel="stylesheet" href="{{ site.baseurl }}/css/main-minimal.css" />
25+
{% if page.common-googlefonts %}
26+
{% for font in page.common-googlefonts %}
27+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family={{ font }}" />
28+
{% endfor %}
2329
{% endif %}
2430

31+
{% if page.ext-css %}
32+
{% for css in page.ext-css %}
33+
<link rel="stylesheet" href="{{ css }}" />
34+
{% endfor %}
35+
{% endif %}
36+
2537
{% if page.css %}
2638
{% for css in page.css %}
2739
<link rel="stylesheet" href="{{ css | prepend: site.baseurl | replace: '//', '/' }}" />
2840
{% endfor %}
2941
{% endif %}
42+
43+
{% if page.googlefonts %}
44+
{% for font in page.googlefonts %}
45+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family={{ font }}" />
46+
{% endfor %}
47+
{% endif %}
3048
</head>

‎_layouts/default.html‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,22 @@
1+
---
2+
common-css:
3+
- "/css/bootstrap.min.css"
4+
- "/css/main.css"
5+
common-ext-css:
6+
- "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
7+
common-googlefonts:
8+
- "Lora:400,700,400italic,700italic"
9+
- "Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
10+
common-js:
11+
- "/js/jquery-1.11.2.min.js"
12+
- "/js/bootstrap.min.js"
13+
- "/js/main.js"
14+
---
15+
116
<!DOCTYPE html>
217
<html lang="en">
318

4-
{% include head.html full = true %}
19+
{% include head.html %}
520

621
<body>
722

@@ -13,7 +28,7 @@
1328

1429
{% include footer.html %}
1530

16-
{% include footer-scripts.html full = true %}
31+
{% include footer-scripts.html %}
1732

1833
</body>
1934
</html>

‎_layouts/minimal.html‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
1+
---
2+
common-css:
3+
- "/css/bootstrap.min.css"
4+
- "/css/main-minimal.css"
5+
common-js:
6+
- "/js/jquery-1.11.2.min.js"
7+
- "/js/bootstrap.min.js"
8+
---
9+
110
<!DOCTYPE html>
211
<html lang="en">
312

4-
{% include head.html full = false %}
13+
{% include head.html %}
514

615
<body>
716

@@ -11,7 +20,7 @@
1120

1221
{% include footer-minimal.html %}
1322

14-
{% include footer-scripts.html full = false %}
23+
{% include footer-scripts.html %}
1524

1625
</body>
1726
</html>

‎contact.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
layout: minimal
33
js: "/js/contact.js"
44
css: "/css/contact.css"
5+
googlefonts: Lobster
56
---
67

78
Just kidding, you can't contact me here.
@@ -14,4 +15,6 @@ It's also an example of how you can easily add CSS or JavaScript files to a temp
1415

1516
<button type="button" class="btn btn-default" id="contact-btn">
1617
Click me
17-
</button>
18+
</button>
19+
20+
<p id="googlefont-test">You can even use any <a href="http://www.google.com/fonts/">Google fonts</a> you'd like to be extra fancy, like this Lobster font</p>

‎css/contact.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
body {
2+
padding-top: 30px;
3+
}
4+
15
#contact-div {
26
color: red;
7+
}
8+
9+
#googlefont-test {
10+
font-family: Lobster;
311
}

0 commit comments

Comments
 (0)