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:
<!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:
{% 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
Last updated
Was this helpful?