Partial Templates in Django

Creating a Partial Template

Create the Partial Template File: Create a separate HTML file for the partial template. For instance, you might create a file called _header.html for the header of your web pages.

<!-- templates/partials/_header.html -->
<header>
    <h1>My Website Header</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>

Include the Partial Template in Your Main Template: Use the {% include %} template tag to include the partial template in your main templates.

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
</head>
<body>
    {% include "partials/_header.html" %}
    
    <main>
        {% block content %}
        <!-- Main content goes here -->
        {% endblock %}
    </main>
    
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

Extending the Base Template: If you are using a base template that other templates will extend, make sure to extend it properly in your child templates.

<!-- templates/home.html -->
{% extends "base.html" %}

{% block content %}
<h2>Welcome to My Website!</h2>
<p>This is the homepage.</p>
{% endblock %}

Using Context in Partial Templates

If you need to pass context variables to a partial template, you can include it with additional context using the with keyword.

Update the Partial Template:

<!-- templates/partials/_header.html -->
<header>
    <h1>{{ site_name }}</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>

Include the Partial Template with Context:

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
</head>
<body>
    {% include "partials/_header.html" with site_name="My Awesome Website" %}
    
    <main>
        {% block content %}
        <!-- Main content goes here -->
        {% endblock %}
    </main>
    
    <footer>
        <p>&copy; 2024 My Awesome Website</p>
    </footer>
</body>
</html>

By breaking your templates into partials and using the {% include %} tag, you can keep your templates clean, modular, and easy to manage. This approach is particularly useful for repetitive components like headers, footers, navigation bars, and sidebars.

Creating a Partial Template

Using Context in Partial Templates

Related