Skip to main content

Template Inheritance

In this tutorial, we will be discussing an important topic in Django - template inheritance. Django uses a template system which allows you to create HTML or XML pages dynamically. One of the most powerful parts of Django is the ability to easily create and manage templates, and one of the most powerful parts of Django's template engine is inheritance.

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

Consider a website that has multiple pages, where each page has sections like header, footer, navigation, and main content. While the main content changes from page to page, the other sections like header, footer, and navigation remain the same. Instead of writing these sections in every template, we can define a base template with common sections and then other templates can inherit this base template and define their unique content.

Creating a Base Template​

Let's create a skeleton template, base.html, with blocks for title and content:

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <div id="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

In this base template, we've defined two blocks: title and content. These are the areas that will be filled in by our child templates.

Creating Child Templates​

Now, let's create a child template, home.html, that extends base.html:

{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
<h1>Welcome to our website!</h1>
<p>This is the home page.</p>
{% endblock %}

In the child template, we use the {% extends %} tag to specify the template we're inheriting from. We then fill in the blocks defined in the base template using the {% block %} and {% endblock %} tags.

When Django renders this template, it first loads the base template, then it fills in the blocks with the content from the child template.

Multiple Levels of Inheritance​

Django's template inheritance allows for multiple levels. This means you can have a base template, a child template that extends the base, and a grandchild template that extends the child. Here's an example:

base.html:

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <div id="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

child.html:

{% extends "base.html" %}

{% block title %}Child Page{% endblock %}

{% block content %}
<p>This is the child page.</p>
{% endblock %}

grandchild.html:

{% extends "child.html" %}

{% block title %}Grandchild Page{% endblock %}

{% block content %}
<p>This is the grandchild page.</p>
{% endblock %}

In this setup, grandchild.html will display "Grandchild Page" as the title and "This is the grandchild page." as the content.

Template inheritance is a powerful tool that promotes code reuse and keeps your templates organized. It's one of the features that makes Django's template system robust and flexible.