Layouts & Templates

jstatico uses Nunjucks for templating.

Creating a Base Layout

Create _layouts/_base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ meta.title }}</title>
    {% block head %}{% endblock %}
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

Extending Layouts

Create a child layout that extends the base:

{% extends "_layouts._base.html" %}

{% block content %}
<article>
    <h1>{{ meta.title }}</h1>
    {{ body }}
</article>
{% endblock %}

Using Layouts

Reference layouts in frontmatter with dots (not slashes):

layout: _layouts._post.html
title: My Post

Template Variables

VariableDescription
bodyRendered page content
metaPage frontmatter
meta.titlePage title
_siteData from _site/ directory

Includes

Include partial templates:

{% include "_partials/_header.html" %}

Loops and Conditionals

{% for item in items %}
  <li>{{ item.name }}</li>
{% endfor %}

{% if meta.draft %}
  <span class="draft">Draft</span>
{% endif %}