Django Template Inheritance using extends and include template tags

For displaying the HTML output Django has a language which is called Django Template Language and it’s very easy to learn and understand. The main feature of the Django Template Language is inheritance and reusability to templates.
Django has a special template tag that can be used to inherit the contents of one template and reuse it else were. Also, you can create sections of templates in separate HTML files and can use them whenever needed hence greatly reducing the development time.

In this post, you’ll learn how to use the extends and include template tags for inheritance and reusability.

Check out our other post on basics on Django Templates – Render, Passing Values, Conditional, and Loops.

Using extends template tag

The extends is a template tag that can inherit templates from the parent HTML template. Using templates in projects which greatly reduce the HTML size and the same elements once provided in the base file can be used as a skeleton to render contents on the browser.

Here is an HTML template in main_app\templates\main_app\base.html

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

    {% block menus %}
        
    {% endblock %}

    {% block content %}

    {% endblock %}

    {% block scripts %}
        <script>
            let users = ["ravi", "shivu"];

            console.log(users);
        </script>
    {% endblock %}
    </body>
</html>

And to import this template into other template files use {% extends ‘main_app/base.html’ %} template tag.
In app\templates\app\list.html

{% extends 'main_app/base.html' %}

{% block menus %}
    {% include 'main_app/menus.html' with name="The Code Learners" %}
{% endblock %}

{% block content %}
    <div class="text-center">
        <h1>My First Django Page</h1>
        <p>Resize this responsive page to see the effect!</p>
    </div>
{% endblock %}

{% block scripts %}
    {{block.super}}
    <script>
    var name = "django";
    console.log(name);
    </script>
{% endblock %}

The {% block content %} tags act as a container that holds HTML code. You can create any number of blocks can specify the name of the block. But for each block you create, it must always have {% endblock %}.

{% block any_name %}
    <h2>HTML Content goes within this block</h2>
{% endblock %}

{% block footer %}

{% endblock %}

You can also override the HTML template within the block and also have the option to include the previous HTML contents of the block using {{block.super}}. Which will keep the HTML contents from getting removed.

Since we have created a template in main_app which is a default Django app. So adding template inside the template folder will not be rendered by Django so to fix this we need to tell Django were to look at this template and that is by going to the settings.py file and updating DIRS inside the TEMPLATES list.

TEMPLATES = [
    {
        ...
        'DIRS': [
            'main_app/templates/' #only add this one
        ],
        ...
    },
]

No restart your Django Server and next the Django will also search within the main_app/templates/ when rendering.

Using include template tag

The include will output the data from the template which is outside the HTML file. This template tag exists mainly for the purpose of reusability.

Syntax

{% include "template_path" %}
{% include "template_path" with var_name="value" %}

Using with the keyword you can also pass the values to the template.

Example

In main_app\templates\main_app\menus.html

<a href="#">{{ var_name }}</a>
<ul >
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Services</a>
    </li>
</ul>

And to include this template use the below example.

{% include 'main_app/menus.html' with var_name="The Code Learners" %}

Watch Video

Click to Play Video

Search Here