search

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.

hashtag
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.

hashtag
Child Template

A child template might look like this:

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

hashtag
References

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

Last updated