Template inheritance

The most powerful part of Jinja is template inheritance. Template inheritance allows you to build a base “skeleton” template that contains all the common elements of your site and defines blocks that child templates can override.

Base Template

This template, which we’ll call base.html, defines a simple HTML skeleton document that you might use for a simple two-column page. It’s the job of “child” templates to fill the empty blocks with content:

templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <link rel="stylesheet" href="styles.css" />
    <title>{% block title %}{% endblock %} - My Blog</title>
    {% endblock %}
</head>
<body>
    <div id="content">{% block content %}{% endblock %}</div>
    <div id="footer">
        {% block footer %}
        <a href="https://linkedin.com/">Linkedin</a>.
        {% endblock %}
    </div>
</body>
</html>

In this example, the {% block %} tags define four blocks that child templates can fill in. All the block tag does is tell the template engine that a child template may override those placeholders in the template.

block tags can be inside other blocks such as if, but they will always be executed regardless of if the if block is actually rendered.

Child Template

A child template might look like this:

templates/child.html
{% extends "parent.html" %}
{% block title %}Home{% endblock %}
{% block head %}
    {{ super() }}
{% endblock %}
{% block content %}
    <h1>Index</h1>
    <p class="important">
      Welcome to my blog.
    </p>
{% endblock %}pyy

The {% extends %} tag is the key here. It tells the template engine that this template “extends” another template.

References

PreviousDay 2: Template inheritance and APIsNextAPIs, what are they?

Last updated