Skip to main content

Templates

There are five required template files that make up your theme. Each of the theme templates are rendered with its corresponding context, as well as the global context. The context holds the data that you use to populate the template, for example the blog post’s title and content.

posts-list

The posts-list template is used for your blog as well as when viewing a list of posts for a particular tag.

See starter theme example.

post

The post template is used for a single blog post.

See starter theme example.

archive

The archive template is used to view a summary of all your blogs posts.

See starter theme example.

page

The page template is used for a single page.

See starter theme example.

error

The error template is used when an error occurs, for example a 404 Not Found.

See starter theme example.

Inheritance

Template inheritance is supported. This allows your templates to inherit markup from another template. This also works particularly well with inserting markup into blocks from the inherited template.

For example you could create a base template and save it inside the partials folder of your theme.

partials/base.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    {% block content %}
    {% endblock content %}
  </body>
</html>

Then your other templates, such as post.html or page.html, can all extend this base template and inherit its markup. This is achieved by using the {% extends 'path' %} tag with the path of the partial template you wish to inherit. The example below also shows the use of the {% block name %} tag which we use to insert our markup into the same named block from the inherited template.

post.html

{% extends 'partials/base.html' %}

{% block content %}
  {{ super() }}
  <h1>{{ post.title }}</h1>
{% endblock content %}

Include

You can also include partial templates into any of your other templates. The helps you keep sections of markup organised in their own files, easily include where you want them in other templates and prevents copy and pasting code throughout your theme.

Start by creating a partial template and saving it inside the partials folder of your theme. This example demonstrates using a partial template for the header of our site.

partials/header.html

<header>
  <h1><a href="/">{{ site.title }}</a></h1>
</header>

Then in our base template we can include the header partial template by using the {% include 'path' %} tag with the path of the template.

partials/base.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    {% include 'partials/header.html' %}

    {% block content %}
    {% endblock content %}
  </body>
</html>

A different example might be that you create a partial template of a newsletter sign up form. Then using the {% include 'partials/newsletter.html' %} tag you include it at the bottom of your post.html and page.html templates.