<li><ahref="#everything-about-templates">Everything about Templates</a></li>
</ul>
</div>
</div>
<divclass="col-sm-9 doc-styling">
<h1>Templates</h1>
<ulclass=page-meta>
</ul>
<p>Lektor uses the <ahref="http://jinja.pocoo.org/"class="ext">Jinja2</a> templating language for
generating HTML out of your pages. You do not need to understand Jinja2 to
be able to generate beautiful websites but if you want to dive deep into the
powers of the templating language then you can learn more about it by
reading the <ahref="http://jinja.pocoo.org/docs"class="ext">Jinja2 Documentation</a>.</p>
<divclass="admonition admonition-info"><p>Templates are a very powerful component in Lektor. A lot of documentation
about the features of it can be found in the <ahref="http://jinja.pocoo.org/docs"class="ext">Jinja2 Documentation</a> as well as the <ahref="../api/templates/"class="ext">Lektor Template API
Documentation</a>.</p></div><h2id="template-folder-and-naming">Template Folder and Naming</h2><p>All templates are stored within the <code>templates/</code> folder. Templates typically
carry a <code>.html</code> extension. The default naming convention which is used in
Lektor is that the template name matches the model name.</p>
<p>So if you have a model called <code>page</code> there would be a template named
<code>page.html</code>. Pages can however manually force a different template to be
rendered.</p>
<h2id="template-context">Template Context</h2><p>When a template is rendered it's rendered in the context of a few variables.
Which ones are available often depends on the situation the template is
evaluated in but the following are always available:</p>
<table>
<thead><tr>
<th>Variable</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>this</code></td>
<td>The current <ahref="../api/db/record/"class="ref">Record</a> that is being rendered.</td>
</tr>
<tr>
<td><code>site</code></td>
<td>The database <ahref="../api/db/pad/"class="ref">Pad</a> that can be used to query the site.</td>
</tr>
<tr>
<td><code>alt</code></td>
<td>A string that identifies the <ahref="../content/alts/"class="ref">Alternative</a> of the page.</td>
</tr>
<tr>
<td><code>config</code></td>
<td>Gives access to the Lektor project configuration.</td>
</tr>
</tbody>
</table>
<h2id="the-first-template">The First Template</h2><p>So let's dive in making our first template. In case you went through the
<ahref="../quickstart/"class="ref">Quickstart</a> you should already have an example model
to work with called <code>page</code>, otherwise just add one with the format shown
in the <ahref="../models/"class="ref">Data Modelling Documentation</a>.</p>
<p>With that we can create a page template named <code>templates/page.html</code>:</p>
<spanclass="p"><</span><spanclass="nt">title</span><spanclass="p">></span><spanclass="cp">{%</span><spanclass="k">block</span><spanclass="nv">title</span><spanclass="cp">%}</span>Welcome<spanclass="cp">{%</span><spanclass="k">endblock</span><spanclass="cp">%}</span> — My Website<spanclass="p"></</span><spanclass="nt">title</span><spanclass="p">></span>
Please enable JavaScript to view the <ahref="https://disqus.com/?ref_noscript"
rel="nofollow">comments powered by Disqus.</a>
</noscript>
</div>
</div>
</div>
</div>
</div>
<divclass="bottomsummary">
<divclass="container">
</div>
</div>
<footer>
<divclass="container">
<divclass="row">
<divclass="col-sm-4 icon-bar">
<ahref="https://github.com/lektor/lektor/"title="Lektor on GitHub"
><iclass="fa fa-github"></i></a>
<ahref="https://github.com/lektor/lektor/issues/"title="Report Issues for Lektor"
><iclass="fa fa-bug"></i></a>
<ahref="https://twitter.com/getlektor"title="Find Lektor on Twitter"
><iclass="fa fa-twitter"></i></a>
<ahref="https://gitter.im/lektor/lektor"title="Chat on Gitter"
><iclass="fa fa-comment"></i></a>
<ahref="https://github.com/lektor/lektor-website/tree/master/content/docs/templates/contents.lr"title="View source for this page"><iclass="fa fa-code"></i></a>
</div>
<divclass="col-sm-8">
<ahref="../../license/">License & Copyright</a> •
<ahref="../../contact/">Contact</a> •
Made with <iclass="fa fa-fw fa-heart"title="Heart"><spanhidden>Heart</span></i> in Carinthia
