Skip to content

Commit

Permalink
add extra_js support in tutorial code
Browse files Browse the repository at this point in the history
  • Loading branch information
@ralsina
ralsina committed May 29, 2015
1 parent ac90461 commit 27d17f2
Showing 1 changed file with 18 additions and 13 deletions.
31 changes: 18 additions & 13 deletions stories/creating-a-theme.txt
View file
Expand Up @@ -190,13 +190,11 @@ our conventions::
$ mkdir -p themes/lanyon/assets/css
$ cp ../lanyon/public/css/lanyon.css themes/lanyon/assets/css/
$ cp ../lanyon/public/css/poole.css themes/lanyon/assets/css/
$ cp ../lanyon/public/css/syntax.css themes/lanyon/assets/css/code.css

Notice we renamed ``syntax.css`` as ``code.css``? That's because Nikola handles that specific stylesheet
in a particular way, because we have a setting called ``CODE_COLOR_SCHEME`` where you can configure
what color scheme the syntax highlighter uses. Having your own ``assets/css/code.css`` just makes it work.

**FIXME:** The syntax highlighting is broken, needs fixing.
Notice I am *not* copying ``syntax.css``? That's because Nikola handles that styles for syntax highlighting
in a particular way, using a setting called ``CODE_COLOR_SCHEME`` where you can configure
what color scheme the syntax highlighter uses. You can use your own ``assets/css/code.css`` if you
don't like the provided ones.

But how do I tell **our** lanyon theme to use those CSS files instead of whatever it's using now?
By giving our theme its own base_helper.tmpl
Expand Down Expand Up @@ -233,21 +231,17 @@ And we will change it so it uses the lanyon styles instead of theme.css (again,

<%def name="html_stylesheets()">
%if use_bundles:
%if use_cdn:
<link href="/assets/css/all.css" rel="stylesheet" type="text/css">
%else:
<link href="/assets/css/all-nocdn.css" rel="stylesheet" type="text/css">
%endif
<link href="/assets/css/all.css" rel="stylesheet" type="text/css">
%else:
<link href="/assets/css/rst.css" rel="stylesheet" type="text/css">
<link href="/assets/css/lanyon.css" rel="stylesheet" type="text/css">
<link href="/assets/css/poole.css" rel="stylesheet" type="text/css">
<link href="/assets/css/code.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700|PT+Sans:400">
%if has_custom_css:
<link href="/assets/css/custom.css" rel="stylesheet" type="text/css">
%endif
%endif
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700|PT+Sans:400">
</%def>

.. figure:: /images/lanyon-1.thumbnail.png
Expand Down Expand Up @@ -752,7 +746,18 @@ Doing the same for layout-reverse, sidebar-overlay and the rest is left as an ex
Bundles
-------

I promised to get to bundles. Sadly I ran out of steam. To be done soon.
If you have ``WebAssets`` installed and the ``USE_BUNDLES`` option set to True, Nikola can put several CSS or JS files together in a larger file,
which makes sites load faster. To do that, your theme needs a ``bundles`` file where the syntax is::

outputfile1.js: thing1.js, thing2.js, ...
outputfile2.css: thing1.css, thing2.css, ...

For this theme, it should be like this::

assets/css/all.css=rst.css,code.css,lanyon.css,poole.css

**Note:** Some themes also support the ``USE_CDN`` option meaning that in some cases it will load one bundle with all CSS and in other will load some CSS files
from a CDN and others from a bundle. This is complicated and probably not worth the effort.

The End
-------
Expand Down

0 comments on commit 27d17f2

Please sign in to comment.