COPY & PASTE THAT CODE ONE MORE TIME, I DARE YOU

A quick overview about template inheritance...

...and why it is a better way to build webpages.

Template inheritance is a powerful way of organizing your website file structure and cutting down on “boilerplate” in your html templates.

Creating an Html skeleton template

When it comes to selecting a website builder, most solutions out there provide a templating system that supports a variety of tags, filters, variables and expressions.

Most web pages use a general site template combined with individual page templates to ensure that all the pages have the same look and feel and shared components, like a header, sidebars, and a footer. That way you can create a common "html skeleton template" that would help you structure your pages.

Including content from other files

Templating systems provide a mechanism to include or reference html blocks in other html templates, e.g. you can use “render” if you are using Jekyll/Liquid templates, “partial” if you are using Hugo/Go templates and, in a similar way, Kit55/JinJa2 provides the “import” tag.

The way this “import” tag works is by replacing the tag or expression in your original html template with the content of an external file.

E.g., {% include “templates/post.tpl.html” %} in the file blog.html will be replaced with the content of the file templates/post.tpl.html :

<h1>{{post.title}}</h1>
<p>{{post.body}}</p>

This way, you can keep shared building blocks in separate files, making maintenance more convenient and development easier in general.

Another way to structure your website pages

But there is an alternative to “including” building blocks. Some templating systems also provide “Template Inheritance”, which is a different way to structure website pages. Template Inheritance has been used for years specially by programming frameworks in the Python ecosystem.

Django templates, Flask templates and other templating systems that use Jinja2

Many Python coding frameworks like Flask or Django leverage Jinja2 like templates which provides Template Inheritance. Pylons/Pyramid, another Python framework, comes with Mako templates which support Template Inheritance as well. Django templates are very similar to Jinja2 templates but some small differences.

In addition, recent versions of Angular provide “Content Projection” which can be seen as an evolution of template inheritance in a more complex single page application environment.

What is Template Inheritance?

Template Inheritance is a pattern that resembles object-oriented programming techniques, in which content blocks are inserted inside other html templates.

It enables building a base template that contains all the common elements of a site, and defines “slots” or “blocks” that child templates can override.

So, instead of the traditional use of “include” tags to manage parts of templates, you can inherit the contents of one template to another and change blocks of content.

Working with templates becomes simple and efficient, as each template only contains the differences from the template it extends.

For example, the template base.tpl.html defines a simple HTML skeleton that includes all the boilerplate html common to all pages, plus a header and a footer. It also defines three “slots” or “blocks” for “child” templates to fill:

  • The title of the page
  • A secondary navigation menu
  • A content block
<html>
  <head>
    <link rel="stylesheet" href="static/style.css">
    <title>{% block title %}{% endblock %}</title>
  </head>
  <body>
​​<nav class="primary-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
    {% block secondNav %}{% endblock %}
    {% block content %}{% endblock %}
  </body>
</html>

Now, a child template page “home.html” , can be as easy as:

{% extends "templates/base.tpl.html" %}
{% block title %}Home{% endblock %}
{% block secondNav %}
<nav class="secondary-nav">
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
  </ul>
</nav>
{% endblock %}
{% block content %}
Hello, this is my content block
{% endblock %}

Any number of child templates can be chained together in multiple inheritance levels.

You can keep a base template with all the html boilerplate, then a second template which could define a single column layout and a final template hosting the content.

Alternatively templates can have different layouts inheriting from the same base, like a two column template.

Template Inheritance and Object Oriented Programing

As seen above, Template Inheritance leans heavily on object-oriented programming techniques.

The content of one template can be inherited by a child template, which is a concept very similar to extending a class in Object Oriented Programing; similarly, changing blocks of content is akin to overriding methods of a class.

One last similarity with Object Oriented Programing - you can define the default content of a block in the “parent” template. Then the “child” template can use the {{ super() }} tag to render the content of the parent block (you can do this if you use Jinja2 as your templating system).

Should you use Template Inheritance?

Using Template Inheritance to organize your webpage simplifies and cleans up your templates. It makes working with templates efficient and boilerplate minimal.

Template Inheritance allows for a more flexible template file organization, as you can define as many levels of inheritance as you require, but it also requires a bit more thinking when planning how to organize your website assets.

Jinja templates are relatively unknown in the website building space as they are almost exclusively used in python programming frameworks, despite of being more powerful than most of the templating systems and languages currently used to build websites, including WordPress.

The best way to know if Template Inheritance is for you is by building a page with it.

Kit55 comes with Jinja2/Nunjucks and fully supports it. In addition, we have put together a few sample templates that make use of Template Inheritance. You can download them here.