Django Template Inheritance

Django template inheritance allows you to create a base template that contains the common structure and elements for your site and then extend that base template in other templates to add or override specific content. This approach helps you avoid duplicating code and makes your templates more maintainable.

In this tutorial, we'll cover the basics of Django template inheritance.

Create a base template: First, create a base template that includes the common structure and elements for your site. In your app's templates folder, create a new file named base.html and add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
    <header>
        <nav>
            <!-- Your site navigation goes here -->
        </nav>
    </header>
    <main>
        {% block content %}
        <!-- Default content goes here -->
        {% endblock %}
    </main>
    <footer>
        <!-- Your site footer goes here -->
    </footer>
</body>
</html>

In the base template, you define blocks using the {% block block_name %} and {% endblock %} tags. These blocks serve as placeholders that can be overridden or extended in templates that inherit from the base template.

Create a child template: Now, create a new template that extends the base template. In the templates folder, create a new file named index.html and add the following code:

{% extends "base.html" %}

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

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

In the child template, use the {% extends "base_template_name" %} tag at the beginning of the file to indicate that this template should inherit from the base template. You can then override or extend the blocks defined in the base template.

Render the child template: In your Django view, render the child template instead of the base template. Here's an example view in myapp/views.py:

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

Test the template inheritance: Start the Django development server using the python manage.py runserver command and navigate to the URL associated with your view in your web browser. You should see the content from both the base and child templates, with the child template overriding the title and content blocks.

By using template inheritance in Django, you can create a consistent structure and layout for your site, minimize code duplication, and make it easier to update and maintain your templates.

How to Use Template Inheritance in Django:

Description: Template inheritance in Django allows creating a base template with common structure and extending it in other templates.

Code: Example of using template inheritance in Django:

<!-- base_template.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
    <div id="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

<!-- child_template.html -->
{% extends 'base_template.html' %}

{% block title %}Child Title{% endblock %}

{% block content %}
    <h1>Hello, {{ user.username }}!</h1>
{% endblock %}

Including Templates in Django Inheritance:

Description: Include templates within other templates to reuse content or components.

Code: Example of including a template in Django template inheritance:

<!-- included_template.html -->
<p>This is an included template</p>

<!-- base_template.html -->
{% include 'included_template.html' %}

<div id="content">
    {% block content %}{% endblock %}
</div>