Home Explore Help
Sign In
riff
/
riff_site
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 1 Releases 0 Wiki

A new Riff-radio.org site with a static approach.

Branch: master
Branches Tags
riff_site/output/pages/theming.html

theming.html 47KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="utf-8">

  5. <meta name="viewport" content="width=device-width, initial-scale=1">

  6. <title>Theming Nikola | Riff</title>

  7. <link href="../assets/css/all-nocdn.css" rel="stylesheet" type="text/css">

  8. <link rel="alternate" type="application/rss+xml" title="RSS" href="../rss.xml">

  9. <link rel="canonical" href="http://media.pagelibre.org/riff/site/pages/theming.html">

  10. <link rel="icon" href="../favicon.ico" sizes="16x16">

  11. <!--[if lt IE 9]><script src="../assets/js/html5.js"></script><![endif]--><meta name="author" content="The Nikola Team">

  12. <meta property="og:site_name" content="Riff">

  13. <meta property="og:title" content="Theming Nikola">

  14. <meta property="og:url" content="http://media.pagelibre.org/riff/site/pages/theming.html">

  15. <meta property="og:description" content="Version:

  16. 8.2.3

  17. Author:

  18. Roberto Alsina &lt;ralsina@netmanagers.com.ar&gt;

  19. 

  20. 

  21. Contents

  22. 

  23. The Structure

  24. Theme meta files

  25. Templates

  26. Built-in templates

  27. Variables available in templates

  28. Customizing themes to user c">

  29. <meta property="og:type" content="article">

  30. <meta property="article:published_time" content="2012-03-13T12:00:00-03:00">

  31. </head>

  32. <body>

  33. <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>

  34. 

  35. <!-- Menubar -->

  36. 

  37. <div class="blog-masthead">

  38.     <div class="container">

  39. <!-- This keeps the margins nice -->

  40.         <nav class="blog-nav" role="navigation"><a href="../index.html" class="blog-nav-item">Accueil</a>

  41.             <a href="about.html" class="blog-nav-item">About Riff</a>

  42.             <a href="../rss.xml" class="blog-nav-item">RSS feed</a>

  43. 

  44.             

  45. 

  46.                 

  47.                 

  48.                 

  49.             

  50.         </nav>

  51. </div>

  52. <!-- /.container -->

  53. </div>

  54. <!-- End of Menubar -->

  55. 

  56. <div class="container" id="content" role="main">

  57.     <div class="body-content">

  58.         <div class="blog-header">

  59.             <h1 class="blog-title">

  60.                 <a href="http://media.pagelibre.org/riff/site/">

  61. 

  62.                     <span id="blog-title">Riff</span>

  63.                 </a>

  64.             </h1>

  65.             <p class="lead blog-description">Riff la radio rock</p>

  66.             

  67.         </div>

  68.         <!--Body content-->

  69.         <div class="row">

  70.             <div class="col-sm-8 blog-main">

  71.                 

  72. <article class="post-text storypage" itemscope="itemscope" itemtype="http://schema.org/Article"><header><h2 class="p-name entry-title blog-post-title" itemprop="headline name"><a href="#" class="u-url">Theming Nikola</a></h2>

  73. 

  74.         

  75. 

  76.     </header><div class="e-content entry-content" itemprop="articleBody text">

  77.     <dl class="docinfo simple">

  78. <dt class="version">Version<span class="colon">:</span>

  79. </dt>

  80. <dd class="version">8.2.3</dd>

  81. <dt class="author">Author<span class="colon">:</span>

  82. </dt>

  83. <dd class="author"><p>Roberto Alsina &lt;<a class="reference external" href="mailto:ralsina@netmanagers.com.ar">ralsina@netmanagers.com.ar</a>&gt;</p></dd>

  84. </dl>

  85. <nav class="contents alert alert-primary float-md-right" id="contents" role="doc-toc"><p class="topic-title">Contents</p>

  86. <ul class="simple">

  87. <li><p><a class="reference internal" href="theming.html#the-structure" id="toc-entry-1">The Structure</a></p></li>

  88. <li><p><a class="reference internal" href="theming.html#theme-meta-files" id="toc-entry-2">Theme meta files</a></p></li>

  89. <li><p><a class="reference internal" href="theming.html#templates" id="toc-entry-3">Templates</a></p></li>

  90. <li><p><a class="reference internal" href="theming.html#built-in-templates" id="toc-entry-4">Built-in templates</a></p></li>

  91. <li><p><a class="reference internal" href="theming.html#variables-available-in-templates" id="toc-entry-5">Variables available in templates</a></p></li>

  92. <li><p><a class="reference internal" href="theming.html#customizing-themes-to-user-color-preference-colorizing-category-names" id="toc-entry-6">Customizing themes to user color preference, colorizing category names</a></p></li>

  93. <li><p><a class="reference internal" href="theming.html#identifying-and-customizing-different-kinds-of-pages-with-a-shared-template" id="toc-entry-7">Identifying and customizing different kinds of pages with a shared template</a></p></li>

  94. <li><p><a class="reference internal" href="theming.html#messages-and-translations" id="toc-entry-8">Messages and Translations</a></p></li>

  95. <li><p><a class="reference internal" href="theming.html#less-and-sass" id="toc-entry-9">LESS and Sass</a></p></li>

  96. </ul></nav><p class="lead">This document is a reference about themes. If you want a tutorial, please read

  97. <a class="reference external" href="creating-a-theme.html">Creating a Theme</a>. If you’re looking for a ready-made

  98. theme for your site, check out the <a class="reference external" href="https://themes.getnikola.com/">Themes Index</a>.</p>

  99. <section id="the-structure"><h2><a class="toc-backref" href="theming.html#toc-entry-1" role="doc-backlink">The Structure</a></h2>

  100. <p>Themes are located in the <code class="docutils literal">themes</code> folder where Nikola is installed, and in the <code class="docutils literal">themes</code> folder

  101. of your site, one folder per theme. The folder name is the theme name.</p>

  102. <p>A Nikola theme consists of the following folders (they are <em>all</em> optional):</p>

  103. <dl>

  104. <dt>assets</dt>

  105. <dd>

  106. <p>This is where you would put your CSS, JavaScript and image files. It will be copied

  107. into <code class="docutils literal">output/assets</code> when you build the site, and the templates will contain

  108. references to them. The default subdirectories are <code class="docutils literal">css</code>, <code class="docutils literal">js</code>, <code class="docutils literal">xml</code>

  109. and <code class="docutils literal">fonts</code> (Bootstrap).</p>

  110. <p>The included themes use <a class="reference external" href="https://getbootstrap.com/">Bootstrap</a>,

  111. <a class="reference external" href="https://feimosi.github.io/baguetteBox.js/">baguetteBox</a>, <a class="reference external" href="https://flickr.github.io/justified-layout/">Justified Layout by Flickr</a> and <a class="reference external" href="https://moment.github.io/luxon/">Luxon</a>, so they are in assets, along with CSS files for

  112. syntax highlighting, reStructuredText and Jupyter, as well as a minified

  113. copy of jQuery.</p>

  114. <p>If you want to base your theme on other frameworks (or on no framework at all)

  115. just remember to put there everything you need for deployment. (Not all of

  116. the listed assets are used by <code class="docutils literal">base</code>)</p>

  117. </dd>

  118. <dt>templates</dt>

  119. <dd>

  120. <p>This contains the templates used to generate the pages. While Nikola will use a

  121. certain set of template names by default, you can add others for specific parts

  122. of your site.</p>

  123. </dd>

  124. <dt>messages</dt>

  125. <dd>

  126. <p>Nikola tries to be multilingual. This is where you put the strings for your theme

  127. so that it can be translated into other languages.</p>

  128. </dd>

  129. <dt>less, sass</dt>

  130. <dd>

  131. <p>Files to be compiled into CSS using LESS and Sass (both require plugins)</p>

  132. </dd>

  133. </dl>

  134. <p>This mandatory file:</p>

  135. <dl class="simple">

  136. <dt>&lt;theme&gt;.theme</dt>

  137. <dd>

  138. <p>An INI file containing theme meta data. The file format is described in

  139. detail below, in the <a class="reference internal" href="theming.html#theme-meta-files">Theme meta files</a> section.</p>

  140. </dd>

  141. </dl>

  142. <p>And these optional files:</p>

  143. <dl>

  144. <dt>parent, engine</dt>

  145. <dd>

  146. <p>One-line text files that contain the names of parent and engine themes,

  147. respectively.  Those are needed for older versions (Nikola v7.8.5 and

  148. older).</p>

  149. </dd>

  150. <dt>bundles</dt>

  151. <dd>

  152. <p>A <a class="reference external" href="https://docs.python.org/3/library/configparser.html">config</a> file

  153. containing a list of files to be turned into bundles. For example:</p>

  154. <pre class="code ini"><a name="rest_code_1e62c0f8635c468a9e9e465b2eb0939e-1"></a><span class="na">assets/css/all.css</span><span class="o">=</span><span class="s"></span>

  155. <a name="rest_code_1e62c0f8635c468a9e9e465b2eb0939e-2"></a><span class="s">    bootstrap.min.css,</span>

  156. <a name="rest_code_1e62c0f8635c468a9e9e465b2eb0939e-3"></a><span class="s">    rst_base.css,</span>

  157. <a name="rest_code_1e62c0f8635c468a9e9e465b2eb0939e-4"></a><span class="s">    nikola_rst.css,</span>

  158. <a name="rest_code_1e62c0f8635c468a9e9e465b2eb0939e-5"></a><span class="s">    code.css,</span>

  159. <a name="rest_code_1e62c0f8635c468a9e9e465b2eb0939e-6"></a><span class="s">    baguetteBox.min.css,</span>

  160. <a name="rest_code_1e62c0f8635c468a9e9e465b2eb0939e-7"></a><span class="s">    theme.css,</span>

  161. <a name="rest_code_1e62c0f8635c468a9e9e465b2eb0939e-8"></a><span class="s">    custom.css,</span>

  162. </pre>

  163. <p>This creates a file called "assets/css/all.css" in your output that is the

  164. combination of all the other file paths, relative to the output file.

  165. This makes the page much more efficient because it avoids multiple connections to the server,

  166. at the cost of some extra difficult debugging.</p>

  167. <p>Bundling applies to CSS and JS files.</p>

  168. <p>Templates should use either the bundle or the individual files based on the <code class="docutils literal">use_bundles</code>

  169. variable, which in turn is set by the <code class="docutils literal">USE_BUNDLES</code> option.</p>

  170. </dd>

  171. </dl></section><section id="theme-meta-files"><h2><a class="toc-backref" href="theming.html#toc-entry-2" role="doc-backlink">Theme meta files</a></h2>

  172. <p>As of Nikola v7.8.6, Nikola uses meta files for themes. Those are INI files,

  173. with the same name as your theme, and a <code class="docutils literal">.theme</code> extension, eg.

  174. <code class="docutils literal">bootstrap3.theme</code>. Here is an example, from the bootstrap3 theme:</p>

  175. <pre class="code ini"><a name="rest_code_929f518a59e14434bd6c9df89e29e59d-1"></a><span class="k">[Theme]</span>

  176. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-2"></a><span class="na">engine</span> <span class="o">=</span> <span class="s">mako</span>

  177. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-3"></a><span class="na">parent</span> <span class="o">=</span> <span class="s">base</span>

  178. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-4"></a><span class="na">author</span> <span class="o">=</span> <span class="s">The Nikola Contributors</span>

  179. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-5"></a><span class="na">author_url</span> <span class="o">=</span> <span class="s">https://getnikola.com/</span>

  180. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-6"></a><span class="na">based_on</span> <span class="o">=</span> <span class="s">Bootstrap 3 &lt;https://getbootstrap.com/&gt;</span>

  181. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-7"></a><span class="na">license</span> <span class="o">=</span> <span class="s">MIT</span>

  182. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-8"></a><span class="na">tags</span> <span class="o">=</span> <span class="s">bootstrap</span>

  183. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-9"></a>

  184. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-10"></a><span class="k">[Family]</span>

  185. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-11"></a><span class="na">family</span> <span class="o">=</span> <span class="s">bootstrap3</span>

  186. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-12"></a><span class="na">jinja_version</span> <span class="o">=</span> <span class="s">bootstrap3-jinja</span>

  187. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-13"></a><span class="na">variants</span> <span class="o">=</span> <span class="s">bootstrap3-gradients, bootstrap3-gradients-jinja</span>

  188. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-14"></a>

  189. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-15"></a><span class="k">[Nikola]</span>

  190. <a name="rest_code_929f518a59e14434bd6c9df89e29e59d-16"></a><span class="na">bootswatch</span> <span class="o">=</span> <span class="s">True</span>

  191. </pre>

  192. <p>The following keys are currently supported:</p>

  193. <ul>

  194. <li>

  195. <p><code class="docutils literal">Theme</code> — contains information about the theme.</p>

  196. <ul>

  197. <li><p><code class="docutils literal">engine</code> — engine used by the theme. Should be <code class="docutils literal">mako</code> or <code class="docutils literal">jinja</code>.</p></li>

  198. <li>

  199. <p><code class="docutils literal">parent</code> — the parent theme. Any resources missing in this theme, will be

  200. looked up in the parent theme (and then in the grandparent, etc).</p>

  201. <p>The parent is so you don’t have to create a full theme each time: just

  202. create an empty theme, set the parent, and add the bits you want modified.

  203. You <strong>must</strong> define a parent, otherwise many features won’t work due to

  204. missing templates, messages, and assets.</p>

  205. <p>The following settings are recommended:</p>

  206. <ul class="simple">

  207. <li><p>If your theme uses Bootstrap 3, inherit the <code class="docutils literal">bootstrap3</code> theme.</p></li>

  208. <li><p>If your theme uses Jinja as a template engine, inherit <code class="docutils literal"><span class="pre">base-jinja</span></code>

  209. or <code class="docutils literal"><span class="pre">bootstrap3-jinja</span></code></p></li>

  210. <li><p>In any other case, inherit <code class="docutils literal">base</code>.</p></li>

  211. </ul>

  212. </li>

  213. <li><p><code class="docutils literal">author</code>, <code class="docutils literal">author_url</code> — used to identify theme author.</p></li>

  214. <li><p><code class="docutils literal">based_on</code> — optional list of inspirations, frameworks, etc. used in the

  215. theme. Should be comma-separated, the format <code class="docutils literal">Name &lt;URL&gt;</code> is recommended.</p></li>

  216. <li><p><code class="docutils literal">license</code> — theme license. Pick MIT if you have no preference.</p></li>

  217. <li><p><code class="docutils literal">tags</code> — optional list of tags (comma-separated) to describe the theme.</p></li>

  218. </ul>

  219. </li>

  220. <li>

  221. <p><code class="docutils literal">Family</code> — contains information about other related themes. All values

  222. optional. (Do not use unless you have related themes.)</p>

  223. <ul class="simple">

  224. <li><p><code class="docutils literal">family</code> — the name of the main theme in a family, which is also used as

  225. the family name.</p></li>

  226. <li><p><code class="docutils literal">mako_version</code>, <code class="docutils literal">jinja_version</code> — name of the mako/jinja version of the

  227. theme.</p></li>

  228. <li><p><code class="docutils literal">variants</code> — comma-separated list of stylistic variants (other than the

  229. mako/jinja version listed above)</p></li>

  230. </ul>

  231. </li>

  232. <li>

  233. <p><code class="docutils literal">Nikola</code> — Nikola-specific information, currently optional.</p>

  234. <ul class="simple">

  235. <li><p><code class="docutils literal">bootswatch</code> — whether or not theme supports Bootswatch styling (optional,

  236. defaults to False)</p></li>

  237. <li><p><code class="docutils literal">ignored_assets</code> — comma-separated list of assets to ignore (relative to

  238. the <code class="docutils literal">assets/</code> directory, eg. <code class="docutils literal">css/theme.css</code>)</p></li>

  239. </ul>

  240. </li>

  241. </ul></section><section id="templates"><h2><a class="toc-backref" href="theming.html#toc-entry-3" role="doc-backlink">Templates</a></h2>

  242. <p>In templates there is a number of files whose name ends in <code class="docutils literal">.tmpl</code>. Those are the

  243. theme’s page templates. They are done using the <a class="reference external" href="https://www.makotemplates.org">Mako</a>

  244. or <a class="reference external" href="http://jinja.pocoo.org">Jinja2</a> template languages. If you want to do a theme, you

  245. should learn one first. What engine is used by the theme is declared in the <code class="docutils literal">engine</code> file.</p>

  246. <aside class="admonition tip"><p class="admonition-title">Tip</p>

  247. <p>If you are using Mako templates, and want some extra speed when building the site

  248. you can install Beaker and <a class="reference external" href="https://docs.makotemplates.org/en/latest/caching.html">make templates be cached</a></p>

  249. </aside><p>Both template engines have a nifty concept of template inheritance. That means that a

  250. template can inherit from another and only change small bits of the output. For example,

  251. <code class="docutils literal">base.tmpl</code> defines the whole layout for a page but has only a placeholder for content

  252. so <code class="docutils literal">post.tmpl</code> only define the content, and the layout is inherited from <code class="docutils literal">base.tmpl</code>.</p>

  253. <p>Another concept is theme inheritance. You do not need to duplicate all the

  254. default templates in your theme — you can just override the ones you want

  255. changed, and the rest will come from the parent theme. (Every theme needs a

  256. parent.)</p>

  257. <p>Apart from the <a class="reference internal" href="theming.html#built-in-templates">built-in templates</a> listed below, you can add other templates for specific

  258. pages, which the user can then use in his <code class="docutils literal">POSTS</code> or <code class="docutils literal">PAGES</code> option in

  259. <code class="docutils literal">conf.py</code>.  Also, you can specify a custom template to be used by a post or

  260. page via the <code class="docutils literal">template</code> metadata, and custom templates can be added in the

  261. <code class="docutils literal">templates/</code> folder of your site.</p>

  262. <p>If you want to modify (override) a built-in template, use <code class="docutils literal">nikola theme <span class="pre">-c</span>

  263. <span class="pre">&lt;name&gt;.tmpl</span></code>.  This command will copy the specified template file to the

  264. <code class="docutils literal">templates/</code> directory of your currently used theme.</p>

  265. <p>Keep in mind that your theme is <em>yours</em>, so you can require whatever data you

  266. want (eg. you may depend on specific custom <code class="docutils literal">GLOBAL_CONTEXT</code> variables, or

  267. post meta attributes). You don’t need to keep the same theme structure as the

  268. default themes do (although many of those names are hardcoded). Inheriting from

  269. at least <code class="docutils literal">base</code> (or <code class="docutils literal"><span class="pre">base-jinja</span></code>) is heavily recommended, but not strictly

  270. required (unless you want to share it on the Themes Index).</p>

  271. </section><section id="built-in-templates"><h2><a class="toc-backref" href="theming.html#toc-entry-4" role="doc-backlink">Built-in templates</a></h2>

  272. <p>These are the templates that come with the included themes:</p>

  273. <dl>

  274. <dt><code class="docutils literal">base.tmpl</code></dt>

  275. <dd>

  276. <p>This template defines the basic page layout for the site. It’s mostly plain HTML

  277. but defines a few blocks that can be re-defined by inheriting templates.</p>

  278. <p>It has some separate pieces defined in <code class="docutils literal">base_helper.tmpl</code>,

  279. <code class="docutils literal">base_header.tmpl</code> and <code class="docutils literal">base_footer.tmpl</code> so they can be

  280. easily overridden.</p>

  281. </dd>

  282. <dt><code class="docutils literal">index.tmpl</code></dt>

  283. <dd>

  284. <p>Template used to render the multipost indexes. The posts are in a <code class="docutils literal">posts</code> variable.

  285. Some functionality is in the <code class="docutils literal">index_helper.tmpl</code> helper template.</p>

  286. </dd>

  287. <dt>

  288. <code class="docutils literal">archive_navigation_helper.tmpl</code> (internal)</dt>

  289. <dd>

  290. <p>Code that implements archive navigation (previous/up/next). Included by

  291. archive templates.</p>

  292. </dd>

  293. <dt><code class="docutils literal">archiveindex.tmpl</code></dt>

  294. <dd>

  295. <p>Used to display archives, if <code class="docutils literal">ARCHIVES_ARE_INDEXES</code> is True.

  296. By default, it just inherits <code class="docutils literal">index.tmpl</code>, with added archive navigation

  297. and feeds.</p>

  298. </dd>

  299. <dt><code class="docutils literal">author.tmpl</code></dt>

  300. <dd>

  301. <p>Used to display author pages.</p>

  302. </dd>

  303. <dt><code class="docutils literal">authorindex.tmpl</code></dt>

  304. <dd>

  305. <p>Used to display author indexes, if <code class="docutils literal">AUTHOR_PAGES_ARE_INDEXES</code> is True.

  306. By default, it just inherits <code class="docutils literal">index.tmpl</code>, with added feeds.</p>

  307. </dd>

  308. <dt>

  309. <code class="docutils literal">comments_helper.tmpl</code> (internal)</dt>

  310. <dd>

  311. <p>This template handles comments. You should probably never touch it :-)

  312. It uses a bunch of helper templates, one for each supported comment system

  313. (all of which start with <code class="docutils literal">comments_helper</code>)</p>

  314. </dd>

  315. <dt>

  316. <code class="docutils literal">ui_helper.tmpl</code>, <code class="docutils literal">pagination_helper.tmpl</code>

  317. </dt>

  318. <dd>

  319. <p>These templates help render specific UI items, and can be tweaked as needed.</p>

  320. </dd>

  321. <dt><code class="docutils literal">gallery.tmpl</code></dt>

  322. <dd>

  323. <p>Template used for image galleries. Interesting data includes:</p>

  324. <ul class="simple">

  325. <li><p><code class="docutils literal">post</code>: A post object, containing descriptive <code class="docutils literal">post.text()</code> for the gallery.</p></li>

  326. <li><p><code class="docutils literal">crumbs</code>: A list of <code class="docutils literal">link, crumb</code> to implement breadcrumbs.</p></li>

  327. <li><p><code class="docutils literal">folders</code>: A list of folders to implement hierarchical gallery navigation.</p></li>

  328. <li><p><code class="docutils literal">enable_comments</code>: To enable/disable comments in galleries.</p></li>

  329. <li><p><code class="docutils literal">thumbnail_size</code>: The <code class="docutils literal">THUMBNAIL_SIZE</code> option.</p></li>

  330. <li>

  331. <p><code class="docutils literal">photo_array</code>: a list of dictionaries, each containing:</p>

  332. <ul>

  333. <li><p><code class="docutils literal">url</code>: URL for the full-sized image.</p></li>

  334. <li><p><code class="docutils literal">url_thumb</code>: URL for the thumbnail.</p></li>

  335. <li><p><code class="docutils literal">title</code>: The title of the image.</p></li>

  336. <li><p><code class="docutils literal">size</code>: A dict containing <code class="docutils literal">w</code> and <code class="docutils literal">h</code>, the real size of the thumbnail.</p></li>

  337. </ul>

  338. </li>

  339. <li><p><code class="docutils literal">photo_array_json</code>: a JSON dump of photo_array, used by the

  340. <code class="docutils literal"><span class="pre">justified-layout</span></code> script</p></li>

  341. </ul>

  342. </dd>

  343. <dt><code class="docutils literal">list.tmpl</code></dt>

  344. <dd>

  345. <p>Template used to display generic lists of links, which it gets in <code class="docutils literal">items</code>,

  346. a list of <em>(text, link, count)</em> elements.</p>

  347. </dd>

  348. <dt><code class="docutils literal">list_post.tmpl</code></dt>

  349. <dd>

  350. <p>Template used to display generic lists of posts, which it gets in <code class="docutils literal">posts</code>.</p>

  351. </dd>

  352. <dt><code class="docutils literal">listing.tmpl</code></dt>

  353. <dd>

  354. <p>Used to display code listings.</p>

  355. </dd>

  356. <dt>

  357. <code class="docutils literal">math_helper.tmpl</code> (internal)</dt>

  358. <dd>

  359. <p>Used to add MathJax/KaTeX code to pages.</p>

  360. </dd>

  361. <dt><code class="docutils literal">post.tmpl</code></dt>

  362. <dd>

  363. <p>Template used by default for blog posts, gets the data in a <code class="docutils literal">post</code> object

  364. which is an instance of the Post class. Some functionality is in the

  365. <code class="docutils literal">post_helper.tmpl</code> and <code class="docutils literal">post_header.tmpl</code> templates.</p>

  366. </dd>

  367. <dt><code class="docutils literal">post_list_directive.tmpl</code></dt>

  368. <dd>

  369. <p>Template used by the <code class="docutils literal">post_list</code> reStructuredText directive.</p>

  370. </dd>

  371. <dt><code class="docutils literal">page.tmpl</code></dt>

  372. <dd>

  373. <p>Used for pages that are not part of a blog, usually a cleaner, less

  374. intrusive layout than <code class="docutils literal">post.tmpl</code>, but same parameters.</p>

  375. </dd>

  376. <dt><code class="docutils literal">tag.tmpl</code></dt>

  377. <dd>

  378. <p>Used to show the contents of a single tag or category.</p>

  379. </dd>

  380. <dt><code class="docutils literal">tagindex.tmpl</code></dt>

  381. <dd>

  382. <p>Used to show the contents of a single tag or category, if <code class="docutils literal">TAG_PAGES_ARE_INDEXES</code> is True.

  383. By default, it just inherits <code class="docutils literal">index.tmpl</code>, with added feeds and some

  384. extra features.</p>

  385. </dd>

  386. <dt><code class="docutils literal">tags.tmpl</code></dt>

  387. <dd>

  388. <p>Used to display the list of tags and categories.</p>

  389. </dd>

  390. </dl></section><section id="variables-available-in-templates"><h2><a class="toc-backref" href="theming.html#toc-entry-5" role="doc-backlink">Variables available in templates</a></h2>

  391. <p>The full, complete list of variables available in templates is maintained in a separate

  392. document: <a class="reference external" href="https://getnikola.com/template-variables.html">Template variables</a></p>

  393. </section><section id="customizing-themes-to-user-color-preference-colorizing-category-names"><h2><a class="toc-backref" href="theming.html#toc-entry-6" role="doc-backlink">Customizing themes to user color preference, colorizing category names</a></h2>

  394. <p>The user’s preference for theme color is exposed in templates as

  395. <code class="docutils literal">theme_color</code> set in the <code class="docutils literal">THEME_COLOR</code> option.</p>

  396. <p>This theme color is exposed to the browser in default themes — some browsers

  397. might use this color in the user interface (eg. Chrome on Android in light mode

  398. displays the toolbar in this color).</p>

  399. <p>Nikola also comes with support for auto-generating colors similar to a base

  400. color. This can be used with <code class="docutils literal">theme_color</code> and eg. category names. This

  401. feature is exposed to templates as two functions: <code class="docutils literal">colorize_str(string,

  402. hex_color, presets)</code> and  <code class="docutils literal">colorize_str_from_base_color(string, hex_color)</code>.

  403. If you want to display the category name in the color, first define a list of

  404. overrides in your <code class="docutils literal">conf.py</code> file:</p>

  405. <pre class="code python"><a name="rest_code_e1e6e214a9724e84bd4409ca879f1410-1"></a><span class="c1"># end of conf.py</span>

  406. <a name="rest_code_e1e6e214a9724e84bd4409ca879f1410-2"></a><span class="n">GLOBAL_CONTEXT</span> <span class="o">=</span> <span class="p">{</span>

  407. <a name="rest_code_e1e6e214a9724e84bd4409ca879f1410-3"></a>    <span class="s2">"category_colors"</span><span class="p">:</span> <span class="p">{</span>

  408. <a name="rest_code_e1e6e214a9724e84bd4409ca879f1410-4"></a>        <span class="s2">"Blue"</span><span class="p">:</span> <span class="s2">"#0000FF"</span>

  409. <a name="rest_code_e1e6e214a9724e84bd4409ca879f1410-5"></a>    <span class="p">}</span>

  410. <a name="rest_code_e1e6e214a9724e84bd4409ca879f1410-6"></a><span class="p">}</span>

  411. </pre>

  412. <p>With that definition, you can now use <code class="docutils literal">colorize_str</code> in your templates like this:</p>

  413. <pre class="code html+mako"><a name="rest_code_fba7b12c95374a1cbb5c15eb884d099c-1"></a><span class="c">&lt;!-- Mako --&gt;</span>

  414. <a name="rest_code_fba7b12c95374a1cbb5c15eb884d099c-2"></a><span class="p">&lt;</span><span class="nt">span</span> <span class="na">style</span><span class="o">=</span><span class="s">"background-color: </span><span class="cp">${</span><span class="n">colorize_str</span><span class="p">(</span><span class="n">post</span><span class="o">.</span><span class="n">meta</span><span class="p">(</span><span class="s1">'category'</span><span class="p">),</span> <span class="n">theme_color</span><span class="p">,</span> <span class="n">category_colors</span><span class="p">)</span><span class="cp">}</span><span class="s">"</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">meta</span><span class="p">(</span><span class="s1">'category'</span><span class="p">)</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>

  415. </pre>

  416. <pre class="code html+jinja"><a name="rest_code_61d83b94de6c4f51b3b59b3a4baf9b50-1"></a><span class="c">&lt;!-- Jinja2 --&gt;</span>

  417. <a name="rest_code_61d83b94de6c4f51b3b59b3a4baf9b50-2"></a><span class="p">&lt;</span><span class="nt">span</span> <span class="na">style</span><span class="o">=</span><span class="s">"background-color: </span><span class="cp">{{</span> <span class="nv">colorize_str</span><span class="o">(</span><span class="nv">post.meta</span><span class="o">(</span><span class="s1">'category'</span><span class="o">),</span> <span class="nv">theme_color</span><span class="o">,</span> <span class="nv">category_colors</span><span class="o">)</span> <span class="cp">}}</span><span class="s">"</span><span class="p">&gt;</span><span class="cp">{{</span> <span class="nv">post.meta</span><span class="o">(</span><span class="s1">'category'</span><span class="o">)</span> <span class="cp">}}</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>

  418. </pre>

  419. <p>Note that the category named “Blue” will be displyed in #0000FF due to the

  420. override specified in your config; other categories will have an auto-generated

  421. color visually similar to your theme color.</p>

  422. <p>Hex color values, like that returned by the theme or string colorization can be

  423. altered in the HSL colorspace through the function

  424. <code class="docutils literal">color_hsl_adjust_hex(hex_string, adjust_h, adjust_s, adjust_l)</code>.

  425. Adjustments are given in values between 1.0 and -1.0. For example, the theme

  426. color can be made lighter using this code:</p>

  427. <pre class="code html+mako"><a name="rest_code_09d4261e8af8487ab07c92c3b2b9d794-1"></a><span class="c">&lt;!-- Mako --&gt;</span>

  428. <a name="rest_code_09d4261e8af8487ab07c92c3b2b9d794-2"></a><span class="p">&lt;</span><span class="nt">span</span> <span class="na">style</span><span class="o">=</span><span class="s">"color: </span><span class="cp">${</span><span class="n">color_hsl_adjust_hex</span><span class="p">(</span><span class="n">theme_color</span><span class="p">,</span> <span class="n">adjust_l</span><span class="o">=</span><span class="mf">0.05</span><span class="p">)</span><span class="cp">}</span><span class="s">"</span><span class="p">&gt;</span>

  429. </pre>

  430. <pre class="code html+jinja"><a name="rest_code_11fca1d7d4a942dd8dce2c8624ac1e9c-1"></a><span class="c">&lt;!-- Jinja2 --&gt;</span>

  431. <a name="rest_code_11fca1d7d4a942dd8dce2c8624ac1e9c-2"></a><span class="p">&lt;</span><span class="nt">span</span> <span class="na">style</span><span class="o">=</span><span class="s">"color: </span><span class="cp">{{</span> <span class="nv">color_hsl_adjust_hex</span><span class="o">(</span><span class="nv">theme_color</span><span class="o">,</span> <span class="nv">adjust_l</span><span class="o">=</span><span class="m">0.05</span><span class="o">)</span> <span class="cp">}}</span><span class="s">"</span><span class="p">&gt;</span>

  432. </pre></section><section id="identifying-and-customizing-different-kinds-of-pages-with-a-shared-template"><h2><a class="toc-backref" href="theming.html#toc-entry-7" role="doc-backlink">Identifying and customizing different kinds of pages with a shared template</a></h2>

  433. <p>Nikola provides a <code class="docutils literal">pagekind</code> in each template contexts that can be used to

  434. modify shared templates based on the context it’s being used. For example,

  435. the <code class="docutils literal">base_helper.tmpl</code> is used in all pages, <code class="docutils literal">index.tmpl</code> is used in

  436. many contexts and you may want to add or remove something from only one of

  437. these contexts.</p>

  438. <p>Example of conditionally loading different resources on all index pages

  439. (archives, author pages, and tag pages), and others again to the front page

  440. and in every post pages:</p>

  441. <pre class="code html+mako"><a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-1"></a><span class="c">&lt;!-- Mako --&gt;</span>

  442. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-2"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>

  443. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-3"></a>    …

  444. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-4"></a>    <span class="cp">%</span> <span class="k">if</span> <span class="s1">'index'</span> <span class="ow">in</span> <span class="n">pagekind</span><span class="p">:</span>

  445. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-5"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"/assets/css/multicolumn.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span><span class="p">&gt;</span>

  446. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-6"></a>    <span class="cp">%</span><span class="k"> endif</span>

  447. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-7"></a>    <span class="cp">%</span> <span class="k">if</span> <span class="s1">'front_page'</span> <span class="ow">in</span> <span class="n">pagekind</span><span class="p">:</span>

  448. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-8"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"/assets/css/fancy_homepage.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span><span class="p">&gt;</span>

  449. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-9"></a>        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"/assets/js/post_carousel.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

  450. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-10"></a>    <span class="cp">%</span><span class="k"> endif</span>

  451. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-11"></a>    <span class="cp">%</span> <span class="k">if</span> <span class="s1">'post_page'</span> <span class="ow">in</span> <span class="n">pagekind</span><span class="p">:</span>

  452. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-12"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"/assets/css/article.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span><span class="p">&gt;</span>

  453. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-13"></a>        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"/assets/js/comment_system.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

  454. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-14"></a>    <span class="cp">%</span><span class="k"> endif</span>

  455. <a name="rest_code_8477a412a8d044dfa96ede312ef0d4d8-15"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

  456. </pre>

  457. <pre class="code html+jinja"><a name="rest_code_c83f454f264a4909ac8903c54f97d97d-1"></a><span class="c">&lt;!-- Jinja2 --&gt;</span>

  458. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-2"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>

  459. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-3"></a>    …

  460. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-4"></a>    <span class="cp">{%</span> <span class="k">if</span> <span class="s1">'index'</span> <span class="k">in</span> <span class="nv">pagekind</span> <span class="cp">%}</span>

  461. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-5"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"/assets/css/multicolumn.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span><span class="p">&gt;</span>

  462. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-6"></a>    <span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span>

  463. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-7"></a>    <span class="cp">{%</span> <span class="k">if</span> <span class="s1">'front_page'</span> <span class="k">in</span> <span class="nv">pagekind</span> <span class="cp">%}</span>

  464. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-8"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"/assets/css/fancy_homepage.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span><span class="p">&gt;</span>

  465. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-9"></a>        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"/assets/js/post_carousel.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

  466. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-10"></a>    <span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span>

  467. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-11"></a>    <span class="cp">{%</span> <span class="k">if</span> <span class="s1">'post_page'</span> <span class="k">in</span> <span class="nv">pagekind</span> <span class="cp">%}</span>

  468. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-12"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"/assets/css/article.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span><span class="p">&gt;</span>

  469. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-13"></a>        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"/assets/js/comment_system.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

  470. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-14"></a>    <span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span>

  471. <a name="rest_code_c83f454f264a4909ac8903c54f97d97d-15"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

  472. </pre>

  473. <p>Promoting visits to the front page when visiting other filtered

  474. <code class="docutils literal">index.tmpl</code> page variants such as author pages and tag pages. This

  475. could have been included in <code class="docutils literal">index.tmpl</code> or maybe in <code class="docutils literal">base.tmpl</code>

  476. depending on what you want to achieve.</p>

  477. <pre class="code html+mako"><a name="rest_code_c1bfafa3138941eab0bf9d2de02c820d-1"></a><span class="c">&lt;!-- Mako --&gt;</span>

  478. <a name="rest_code_c1bfafa3138941eab0bf9d2de02c820d-2"></a><span class="cp">%</span> <span class="k">if</span> <span class="s1">'index'</span> <span class="ow">in</span> <span class="n">pagekind</span><span class="p">:</span>

  479. <a name="rest_code_c1bfafa3138941eab0bf9d2de02c820d-3"></a>    <span class="cp">%</span> <span class="k">if</span> <span class="s1">'author_page'</span> <span class="ow">in</span> <span class="n">pagekind</span><span class="p">:</span>

  480. <a name="rest_code_c1bfafa3138941eab0bf9d2de02c820d-4"></a>        <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>These posts were written by <span class="cp">${</span><span class="n">author</span><span class="cp">}</span>. See posts by all

  481. <a name="rest_code_c1bfafa3138941eab0bf9d2de02c820d-5"></a>           authors on the <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/"</span><span class="p">&gt;</span>front page<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

  482. <a name="rest_code_c1bfafa3138941eab0bf9d2de02c820d-6"></a>    <span class="cp">%</span> <span class="k">elif</span> <span class="s1">'tag_page'</span> <span class="ow">in</span> <span class="n">pagekind</span><span class="p">:</span>

  483. <a name="rest_code_c1bfafa3138941eab0bf9d2de02c820d-7"></a>        <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This is a filtered selection of posts tagged “<span class="cp">${</span><span class="n">tag</span><span class="cp">}</span>”, visit

  484. <a name="rest_code_c1bfafa3138941eab0bf9d2de02c820d-8"></a>           the <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/"</span><span class="p">&gt;</span>front page<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> to see all posts.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

  485. <a name="rest_code_c1bfafa3138941eab0bf9d2de02c820d-9"></a>    <span class="cp">%</span><span class="k"> endif</span>

  486. <a name="rest_code_c1bfafa3138941eab0bf9d2de02c820d-10"></a><span class="cp">%</span><span class="k"> endif</span>

  487. </pre>

  488. <pre class="code html+jinja"><a name="rest_code_611dcf30e7d4429a95ab119bf2981fdd-1"></a><span class="c">&lt;!-- Jinja2 --&gt;</span>

  489. <a name="rest_code_611dcf30e7d4429a95ab119bf2981fdd-2"></a><span class="cp">{%</span> <span class="k">if</span> <span class="s1">'index'</span> <span class="k">in</span> <span class="nv">pagekind</span> <span class="cp">%}</span>

  490. <a name="rest_code_611dcf30e7d4429a95ab119bf2981fdd-3"></a>    <span class="cp">{%</span> <span class="k">if</span> <span class="s1">'author_page'</span> <span class="k">in</span> <span class="nv">pagekind</span> <span class="cp">%}</span>

  491. <a name="rest_code_611dcf30e7d4429a95ab119bf2981fdd-4"></a>        <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>These posts were written by <span class="cp">{{</span> <span class="nv">author</span> <span class="cp">}}</span>. See posts by all

  492. <a name="rest_code_611dcf30e7d4429a95ab119bf2981fdd-5"></a>           authors on the <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/"</span><span class="p">&gt;</span>front page<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

  493. <a name="rest_code_611dcf30e7d4429a95ab119bf2981fdd-6"></a>    <span class="cp">{%</span> <span class="k">elif</span> <span class="s1">'tag_page'</span> <span class="k">in</span> <span class="nv">pagekind</span> <span class="cp">%}</span>

  494. <a name="rest_code_611dcf30e7d4429a95ab119bf2981fdd-7"></a>        <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This is a filtered selection of posts tagged “<span class="cp">{{</span> <span class="nv">tag</span> <span class="cp">}}</span>”, visit

  495. <a name="rest_code_611dcf30e7d4429a95ab119bf2981fdd-8"></a>           the <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/"</span><span class="p">&gt;</span>front page<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> to see all posts.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

  496. <a name="rest_code_611dcf30e7d4429a95ab119bf2981fdd-9"></a>    <span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span>

  497. <a name="rest_code_611dcf30e7d4429a95ab119bf2981fdd-10"></a><span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span>

  498. </pre>

  499. <p>List of page kinds provided by default plugins:</p>

  500. <ul class="simple">

  501. <li><p>front_page</p></li>

  502. <li><p>index</p></li>

  503. <li><p>index, archive_page</p></li>

  504. <li><p>index, author_page</p></li>

  505. <li><p>index, main_index</p></li>

  506. <li><p>index, tag_page</p></li>

  507. <li><p>list</p></li>

  508. <li><p>list, archive_page</p></li>

  509. <li><p>list, author_page</p></li>

  510. <li><p>list, tag_page</p></li>

  511. <li><p>list, tags_page</p></li>

  512. <li><p>post_page</p></li>

  513. <li><p>page_page</p></li>

  514. <li><p>story_page</p></li>

  515. <li><p>listing</p></li>

  516. <li><p>generic_page</p></li>

  517. <li><p>gallery_front</p></li>

  518. <li><p>gallery_page</p></li>

  519. </ul></section><section id="messages-and-translations"><h2><a class="toc-backref" href="theming.html#toc-entry-8" role="doc-backlink">Messages and Translations</a></h2>

  520. <p>The included themes are translated into a variety of languages. You can add your own translation

  521. at <a class="reference external" href="https://www.transifex.com/projects/p/nikola/">https://www.transifex.com/projects/p/nikola/</a></p>

  522. <p>If you want to create a theme that has new strings, and you want those strings to be translatable,

  523. then your theme will need a custom <code class="docutils literal">messages</code> folder.</p>

  524. </section><section id="less-and-sass"><h2>

  525. <a class="reference external" href="http://lesscss.org/">LESS</a> and <a class="reference external" href="https://sass-lang.com/">Sass</a>

  526. </h2>

  527. <aside class="admonition note"><p class="admonition-title">Note</p>

  528. <p>The LESS and Sass compilers were moved to the Plugins Index in

  529. Nikola v7.0.0.</p>

  530. </aside><p>If you want to use those CSS extensions, you can — just store your files

  531. in the <code class="docutils literal">less</code> or <code class="docutils literal">sass</code> directory of your theme.</p>

  532. <p>In order to have them work, you need to create a list of <code class="docutils literal">.less</code> or

  533. <code class="docutils literal"><span class="pre">.scss/.sass</span></code> files to compile — the list should be in a file named

  534. <code class="docutils literal">targets</code> in the respective directory (<code class="docutils literal">less</code>/<code class="docutils literal">sass</code>).</p>

  535. <p>The files listed in the <code class="docutils literal">targets</code> file will be passed to the respective

  536. compiler, which you have to install manually (<code class="docutils literal">lessc</code> which comes from

  537. the Node.js package named <code class="docutils literal">less</code> or <code class="docutils literal">sass</code> from a Ruby package aptly

  538. named <code class="docutils literal">sass</code>).  Whatever the compiler outputs will be saved as a CSS

  539. file in your rendered site, with the <code class="docutils literal">.css</code> extension.</p>

  540. <aside class="admonition note"><p class="admonition-title">Note</p>

  541. <p>Conflicts may occur if you have two files with the same base name

  542. but a different extension.  Pay attention to how you name your files

  543. or your site won’t build!  (Nikola will tell you what’s wrong when

  544. this happens)</p>

  545. </aside></section>

  546. </div>

  547.     

  548. 

  549. </article>

  550. </div>

  551.             <div class="col-sm-3 col-sm-offset-1 blog-sidebar">

  552.                 <div class="sidebar-module sidebar-module-inset">

  553.   <h4>About</h4>

  554.   <div id="shoutcastdiv">

  555.     <script type="text/javascript">

  556.       refreshdiv();

  557.     </script>

  558. </div>

  559. </div>

  560. <div class="sidebar-module">

  561.   <h4>Links</h4>

  562.   <ol class="list-unstyled">

  563. <li><a href="http://getbootstrap.com/examples/blog/">Bootstrap Blog Theme</a></li>

  564.     <li><a href="https://getnikola.com/">Nikola</a></li>

  565.     <li><a href="https://twitter.com/mdo">@mdo</a></li>

  566.     <li><a href="https://twitter.com/Kwpolska">@Kwpolska</a></li>

  567.     <li><a href="https://twitter.com/GetNikola">@GetNikola</a></li>

  568.   </ol>

  569. </div>

  570. 

  571. 

  572.             </div>

  573.         <!--End of body content-->

  574.         </div>

  575.     </div>

  576. </div>

  577. 

  578. <footer class="blog-footer" id="footer">

  579.     Contents © 2023         <a href="mailto:contact@riff-radio.org">Riff</a> - Powered by         <a href="https://getnikola.com" rel="nofollow">Nikola</a>         

  580.     

  581. </footer><script src="../assets/js/all-nocdn.js"></script><!-- fancy dates --><script>

  582.     moment.locale("en");

  583.     fancydates(0, "YYYY-MM-DD HH:mm");

  584.     </script><!-- end fancy dates --><script>

  585.     baguetteBox.run('div#content', {

  586.         ignoreClass: 'islink',

  587.         captions: function(element) {

  588.             return element.getElementsByTagName('img')[0].alt;

  589.     }});

  590.     </script><script type="text/javascript" src="../refresh.js"></script>

  591. </body>

  592. </html>