Django template inheritance

Prerequisites

Introduction

  • Django, a powerful web framework for Python, emphasizes the Don’t Repeat Yourself (DRY) principle, which helps developers write maintainable and efficient code.
  • One of the core features that support this philosophy is Django’s template inheritance system.
  • Template inheritance allows you to define a common structure or layout and reuse it across multiple pages, ensuring consistency and reducing redundant code.

About Template Inheritance

  • Template inheritance in Django allows you to define a base template that contains common elements (like a header, navigation menu, or footer) and then extend or customize parts of that template in child templates.
  • This means that instead of repeating code across multiple templates, you can create a standard layout and modify only the parts that are unique to each page.

Why Template Inheritance?

  • Maintainability: Updating the layout (like changing the site’s navigation) in one place reflects across all templates that extend from the base template.
  • Reusability: Common elements are defined once and reused across different pages.
  • Consistency: Ensures uniformity in design and layout across different pages.

Creating a Base Template

  • The base template is the foundation of the website.
  • It typically includes the HTML structure and sections that will be shared across various pages, like the <head>, navigation bar, and footer.
  • Let’s create a simple base template called base.html.

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Django Website{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about/">About</a></li>
                <li><a href="/contact/">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        {% block content %}
        <p>This is the default content.</p>
        {% endblock %}
    </main>
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>
  • Title Block: {% block title %} allows child templates to customize the page title.
  • Content Block: {% block content %} defines a section where child templates can insert their content.
  • Static Files: {% static 'path' %} is used to link static files like CSS.

Extending a Base Template

  • Base template can be extended in other templates.
  • To do this, use the {% extends %} tag in child templates, which allows them to inherit from the base template.
  • Let’s create an about.html page that extends base.html.

about.html

{% extends 'base.html' %}

{% block title %}About Us{% endblock %}

{% block content %}
    <h2>About Our Company</h2>
    <p>We are a leading company in the tech industry, providing innovative solutions worldwide.</p>
{% endblock %}
  • Inheriting the Layout: The {% extends 'base.html' %} tag at the top indicates that this template will use base.html as its foundation.
  • Overriding Blocks: The {% block title %} and {% block content %} blocks allow this template to define a custom title and main content, while still keeping the layout (header, navigation, and footer) from base.html.

Blocks: Defining Content Areas

  • Blocks are placeholders in the base template that child templates can override.
  • In the base.html example above, we used {% block title %} and {% block content %} to allow specific sections to be modified by child templates.

Syntax of a Block

{% block block_name %}
    Default content or structure for this block.
{% endblock %}

Examples of Common Blocks

  • Header/Footer: You can define blocks for your header or footer if these elements need to change slightly between pages.

  • Scripts: Create a {% block scripts %} to allow child templates to add page-specific JavaScript at the bottom of the page.

  • Here’s an enhanced example of base.html with a block for the footer

<footer>
    {% block footer %}
    <p>&copy; 2024 My Website</p>
    {% endblock %}
</footer>
* Now, the child template can modify the footer as needed.

Example of Template Inheritance in Django

  • Let’s walk through a basic setup where the home and about pages inherit from the base template.

base.html

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Django Website{% endblock %}</title>
</head>
<body>
    <header>
        <h1>Site Header</h1>
    </header>
    <nav>
        <!-- Navigation Menu -->
    </nav>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        {% block footer %}
        <p>&copy; 2024 My Website</p>
        {% endblock %}
    </footer>
</body>
</html>

home.html

{% extends 'base.html' %}

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

{% block content %}
    <h2>Welcome to the Home Page</h2>
    <p>This is the homepage of my Django website.</p>
{% endblock %}

about.html

{% extends 'base.html' %}

{% block title %}About Us{% endblock %}

{% block content %}
    <h2>About Our Company</h2>
    <p>Learn more about us here!</p>
{% endblock %}

When to use Template Inheritance

  • Consistent Layout: Ensure that all pages (home, about, contact) share the same header, footer, and navigation.
  • Section-Specific Customization: Create blocks for sections that change across pages (like a sidebar, banner, or footer).
  • Modular Design: Split large pages into smaller, reusable components using multiple layers of inheritance.