add support for internal or external css/js/googlefonts

This commit is contained in:
Dean Attali 2015-03-02 17:10:41 -08:00
parent d2965a16bd
commit e2f16fd06d
7 changed files with 84 additions and 22 deletions

View File

@ -3,6 +3,4 @@ TODO write instructions
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.
mention that avatar img + css + js have to be served locally, not from a URL
can also give googlefonts

View File

@ -1,8 +1,19 @@
<script src="{{ site.baseurl }}/js/jquery-1.11.2.min.js"></script>
<script src="{{ site.baseurl }}/js/bootstrap.min.js"></script>
{% if page.common-ext-js %}
{% for js in page.common-ext-js %}
<script src="{{ js }}"></script>
{% endfor %}
{% endif %}
{% if include.full %}
<script src="{{ site.baseurl }}/js/main.js"></script>
{% if page.common-js %}
{% for js in page.common-js %}
<script src="{{ js | prepend: site.baseurl | replace: '//', '/' }}"></script>
{% endfor %}
{% endif %}
{% if page.ext-js %}
{% for js in page.ext-js %}
<script src="{{ js }}"></script>
{% endfor %}
{% endif %}
{% if page.js %}

View File

@ -8,23 +8,41 @@
<meta name="author" content="{{ site.author.name }}" />
<meta name="description" content="{{ site.description }}">
<link rel="stylesheet" href="{{ site.baseurl }}/css/bootstrap.min.css" />
<!-- I choose not to use the bootstrap theme css, I think it looks less appealing
<link rel="stylesheet" href="{{ site.baseurl }}/css/bootstrap-theme.min.css" /> -->
<link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
{% if page.common-ext-css %}
{% for css in page.common-ext-css %}
<link rel="stylesheet" href="{{ css }}" />
{% endfor %}
{% endif %}
{% if include.full %}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css" />
<link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
{% else %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/main-minimal.css" />
{% if page.common-css %}
{% for css in page.common-css %}
<link rel="stylesheet" href="{{ css | prepend: site.baseurl | replace: '//', '/' }}" />
{% endfor %}
{% endif %}
{% if page.common-googlefonts %}
{% for font in page.common-googlefonts %}
<link rel="stylesheet" href="//fonts.googleapis.com/css?family={{ font }}" />
{% endfor %}
{% endif %}
{% if page.ext-css %}
{% for css in page.ext-css %}
<link rel="stylesheet" href="{{ css }}" />
{% endfor %}
{% endif %}
{% if page.css %}
{% for css in page.css %}
<link rel="stylesheet" href="{{ css | prepend: site.baseurl | replace: '//', '/' }}" />
{% endfor %}
{% endif %}
{% if page.googlefonts %}
{% for font in page.googlefonts %}
<link rel="stylesheet" href="//fonts.googleapis.com/css?family={{ font }}" />
{% endfor %}
{% endif %}
</head>

View File

@ -1,7 +1,22 @@
---
common-css:
- "/css/bootstrap.min.css"
- "/css/main.css"
common-ext-css:
- "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
common-googlefonts:
- "Lora:400,700,400italic,700italic"
- "Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
common-js:
- "/js/jquery-1.11.2.min.js"
- "/js/bootstrap.min.js"
- "/js/main.js"
---
<!DOCTYPE html>
<html lang="en">
{% include head.html full = true %}
{% include head.html %}
<body>
@ -13,7 +28,7 @@
{% include footer.html %}
{% include footer-scripts.html full = true %}
{% include footer-scripts.html %}
</body>
</html>

View File

@ -1,7 +1,16 @@
---
common-css:
- "/css/bootstrap.min.css"
- "/css/main-minimal.css"
common-js:
- "/js/jquery-1.11.2.min.js"
- "/js/bootstrap.min.js"
---
<!DOCTYPE html>
<html lang="en">
{% include head.html full = false %}
{% include head.html %}
<body>
@ -11,7 +20,7 @@
{% include footer-minimal.html %}
{% include footer-scripts.html full = false %}
{% include footer-scripts.html %}
</body>
</html>

View File

@ -2,6 +2,7 @@
layout: minimal
js: "/js/contact.js"
css: "/css/contact.css"
googlefonts: Lobster
---
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
<button type="button" class="btn btn-default" id="contact-btn">
Click me
</button>
</button>
<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>

View File

@ -1,3 +1,11 @@
body {
padding-top: 30px;
}
#contact-div {
color: red;
}
#googlefont-test {
font-family: Lobster;
}