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 method for organizing your website's file structure and reducing the amount of "boilerplate" code 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 utilize a general site template combined with individual page templates to ensure consistency in look and feel, as well as shared components such as a header, sidebars, and a footer. This approach enables you to create a common "HTML skeleton template" that aids in structuring your pages.

Including content from other files

Most templating systems offer a mechanism to include or reference HTML blocks in other HTML templates. For instance, if you are using Jekyll/Liquid templates, you can utilize the "render" command. If you are using Hugo/Go templates, you can employ "partial". Similarly, Kit55/Jinja2 provides the "import" tag.

The "import" tag works by replacing the tag or expression in your original HTML template with the content of an external file.

For instance, if you have the following code in the file "blog.html"
{% include “templates/post.tpl.html” %}
it 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

However, there is an alternative to "including" building blocks. Some templating systems also offer "Template Inheritance," which provides a different approach to structuring website pages. Template Inheritance has been utilized for years, particularly by programming frameworks in the Python ecosystem.

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

Many Python coding frameworks, such as Flask or Django, utilize Jinja2-like templates that provide Template Inheritance. Pylons/Pyramid, another Python framework, also comes with Mako templates which support Template Inheritance. Django templates are very similar to Jinja2 templates, with some minor differences.

Furthermore, 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, where content blocks are inserted inside other HTML templates.

It enables the creation of a base template that contains all the common elements of a site and defines "slots" or "blocks" that child templates can override.

Instead of using "include" tags to manage parts of templates traditionally, you can inherit the content of one template into another and modify specific 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, along with 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 have a base template that contains all the HTML boilerplate, then a second template that defines a single-column layout, and a final template that hosts the content.

Alternatively, templates can have different layouts while inheriting from the same base, such as a two-column template.

Template Inheritance and Object Oriented Programing

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

The concept of inheriting the content of one template by a child template is similar to extending a class in Object-Oriented Programming. Similarly, changing blocks of content can be compared to overriding methods of a class.

Another similarity to Object-Oriented Programming is the ability to 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. This functionality is available if you are using Jinja2 as your templating system.

Should you use Template Inheritance?

Using Template Inheritance to organize your webpage simplifies and streamlines your templates. It enhances efficiency and reduces boilerplate code.

Template Inheritance allows for a more flexible organization of template files, as you can define as many levels of inheritance as needed. However, it does require thoughtful planning when organizing your website's assets.

Jinja templates are relatively less known in the website building space as they are predominantly used in Python programming frameworks. Despite this, they offer more power and capabilities compared to many other templating systems and languages commonly used for website development, including WordPress.

The best way to determine if Template Inheritance suits your needs is by building a page with it.

Kit55 comes with Jinja2/Nunjucks and fully supports Template Inheritance. Additionally, we have compiled a few sample templates that utilize Template Inheritance, which you can download here.