Best Way to Structure Django Templates (2024)

I have Django project and i want to structure Django templates. Specifically i aim to organize templates with a base layout and extend it across all pages.

1. The Base Template(`base.html`) to Structure Django Templates

The base template is the foundation of your Django template structure. It typically contains the common layout elements like header, footer and any scripts that should be included across all pages.

Here’s what a simple `base.html` might look like:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Bootstrap Page</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    {% include 'header.html' %}  <!-- Include header -->

    <main>
        {% block content %}
        <!-- Main content -->
        {% endblock %}
    </main>

    {% include 'footer.html' %}  <!-- Include footer -->

    {% block extra_scripts %}
    <!-- All Script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    {% endblock %}
</body>
</html>

2.Creating Reusable Template

In your structure Django templates, reusable components like header and footer are stored in separate HTML files. This allows you easily include them in multiple templates without repeating code.

Header(`header.html`)

<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Brand</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

Footer(`footer.html`)

<footer>
    <div class="container">
            <p class="mb-0">© 2024 Your Company. All Rights Reserved.</p>
        </div>
</footer>

3. Extending The Base Template in Paged(`index.html`)

Django’s template inheritance is a powerful feature that allows you to extend the `base.html` template in other templates, like ‘index.html’. This is a key part of structure Django templates because it means you only needs to define the content specific to each page, while the common elements(header, footer, etc.) are automatically included.

Here’s an example `index.html`

{% extends 'base.html' %}


{% block content %}

        <div class="row">
            <div class="col-md-8">
                <h1>Welcome to Our Website</h1>
                <p>This is a simple template to get you started with Bootstrap. Customize it as needed!</p>
            </div>
            <div class="col-md-4">
                <h2>Sidebar</h2>
                <p>Use this section for additional content or links.</p>
            </div>
        </div>

{% endblock %}

4. Putting It All Together

The `base.html` files serves as the core of your structure Django templates. It includes header and footer templates, which are reused across different pages. The `index.html` file extend this base structure and fills in the specific content for the home page.

I hope this article on structure Django templates will help you.

For more information read Add Header and Footer Template on each page in Django

Best Way to Structure Django Templates