📐 What is a Master Template?

A master template is a base layout that other templates inherit from. It contains common elements like headers and footers, reducing code duplication across your site.


<!-- base.html -->
{% block content %}
<!-- Child templates insert content here -->
{% endblock %}

Template Inheritance

📄

Base Template

Contains common structure

<!-- base.html -->
{% block content %}
{% endblock %}

🔗

Extends

Inherits from base

{% extends 'base.html' %}

📦

Blocks

Replaceable sections

{% block title %}
Page Title
{% endblock %}

♻️

Reusability

Write once, use everywhere

DRY Principle

🔹 Step 1: Create Base Template

The base template defines the overall structure of your site with blocks that child templates can override. It includes common elements like navigation, footer, and CSS that appear on every page.

<!-- 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>{% block title %}My Site{% endblock %}</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
        header { background: #333; color: white; padding: 1rem; }
        footer { background: #333; color: white; padding: 1rem; text-align: center; }
        main { padding: 2rem; }
    </style>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <a href="{% url 'home' %}">Home</a> |
            <a href="{% url 'about' %}">About</a> |
            <a href="{% url 'contact' %}">Contact</a>
        </nav>
    </header>
    
    <main>
        {% block content %}
        <!-- Child templates insert content here -->
        {% endblock %}
    </main>
    
    <footer>
        <p>© 2025 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

🔹 Step 2: Create Child Template

Child templates extend the base template and fill in the blocks with specific content. The extends tag must be the first tag in the file, and you only need to define the blocks you want to override.

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

{% block title %}Home - My Site{% endblock %}

{% block content %}
    <h2>Welcome to Our Homepage</h2>
    <p>This is the home page content.</p>
    <p>The header and footer come from base.html!</p>
{% endblock %}

Output:

My Website

Welcome to Our Homepage

This is the home page content.

The header and footer come from base.html!

🔹 Multiple Blocks

You can define multiple blocks in your base template for different sections. This gives child templates flexibility to customize various parts of the page while maintaining consistent structure.

<!-- base.html with multiple blocks -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Default Title{% endblock %}</title>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <header>
        {% block header %}
            <h1>Site Header</h1>
        {% endblock %}
    </header>
    
    {% block content %}{% endblock %}
    
    <footer>
        {% block footer %}
            <p>Default Footer</p>
        {% endblock %}
    </footer>
    
    {% block extra_js %}{% endblock %}
</body>
</html>

🔹 Using Multiple Blocks

Child templates can override any or all blocks defined in the base template. You only need to include the blocks you want to customize, leaving others with their default content.

<!-- about.html -->
{% extends 'base.html' %}

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

{% block extra_css %}
    <style>
        .about-section { background: #f0f0f0; padding: 20px; }
    </style>
{% endblock %}

{% block content %}
    <div class="about-section">
        <h2>About Our Company</h2>
        <p>We are a leading provider of web solutions.</p>
    </div>
{% endblock %}

{% block extra_js %}
    <script>
        console.log('About page loaded');
    </script>
{% endblock %}

🔹 Block Super

Use block.super to include the parent block's content along with your additions. This is useful when you want to extend rather than replace the parent content.

<!-- Child template -->
{% extends 'base.html' %}

{% block header %}
    {{ block.super }}
    <p>Additional header content</p>
{% endblock %}

Result:

The child template will show both the base header content AND the additional paragraph.

🔹 Include Tag

The include tag lets you insert reusable template snippets into your pages. This is perfect for components that appear in multiple places but aren't part of the base layout.

<!-- templates/navbar.html -->
<nav>
    <a href="{% url 'home' %}">Home</a>
    <a href="{% url 'products' %}">Products</a>
    <a href="{% url 'contact' %}">Contact</a>
</nav>

<!-- Use in any template -->
{% include 'navbar.html' %}

Add Master Template