Template Inheritance - potatoscript/django GitHub Wiki

When you build websites, a lot of pages share the same structure:

✅ Same header
✅ Same footer
✅ Same sidebar

But the content in the middle changes depending on the page. Instead of copying and pasting the same HTML over and over again... 😩

➡️ Template Inheritance lets you create a base template (the common structure) and other templates that extend it (like a child).

Just like how a child can inherit from a parent in a family, a template can inherit from another template in Django. 👨‍👩‍👧

🏗️ Folder Setup

Here’s how your Django app folder should be organized:

my_project/
├── my_app/
│   ├── templates/
│   │   └── my_app/
│   │       ├── base.html        ← 🏠 The parent template
│   │       ├── home.html        ← 🧒 Inherits from base
│   │       └── about.html       ← 🧒 Inherits from base

✨ Step 1: Create the Base Template

This is the foundation of your site, like the layout blueprint.

📄 my_app/templates/my_app/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
    <header>
        <h1>🍠 PotatoScript Blog</h1>
        <nav>
            <a href="/">🏠 Home</a> |
            <a href="/about/">👩‍💻 About</a>
        </nav>
    </header>

    <main>
        {% block content %}
        <!-- Default content goes here -->
        {% endblock %}
    </main>

    <footer>
        <p>🍰 Made with Django • © 2025</p>
    </footer>
</body>
</html>

🧠 What's Happening Here?

{% block title %} and {% endblock %} — You can override this title in child templates.
{% block content %} — This is where each page will put its own content.

✨ Step 2: Create a Child Template

Now, let’s make a page that uses the base template and fills in its own stuff.

📄 my_app/templates/my_app/home.html

{% extends 'my_app/base.html' %}

{% block title %}Home - PotatoScript{% endblock %}

{% block content %}
    <h2>📝 Welcome to PotatoScript!</h2>
    <p>This is your homepage powered by Django Templates.</p>
    <ul>
        <li>🌱 Learn Python</li>
        <li>🚀 Master Django</li>
        <li>🎓 Share your knowledge</li>
    </ul>
{% endblock %}

📄 my_app/templates/my_app/about.html

{% extends 'my_app/base.html' %}

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

{% block content %}
    <h2>👩‍💻 About PotatoScript</h2>
    <p>We are passionate about teaching Django in a fun and simple way!</p>
    <p>Contact us if you love coffee and code ☕💻.</p>
{% endblock %}

🔁 Reuse, Reuse, Reuse

If you want to change the menu, do it once in base.html and it's updated everywhere!
All child templates only fill in the blanks, like content or page title.

🧩 Bonus: You Can Add More Blocks!

Want to have a block for a sidebar, scripts, or styles?

Add this to base.html:

<aside>
    {% block sidebar %}
    <p>Default sidebar content</p>
    {% endblock %}
</aside>

Then in any child template:

{% block sidebar %}
    <ul>
        <li>🧠 Python</li>
        <li>🌐 Web Dev</li>
    </ul>
{% endblock %}

👀 Final Look When Rendered

When the user visits the / URL, Django will:

Use home.html.
See {% extends 'my_app/base.html' %}.
Fill in the title and content blocks.
Combine everything to show a beautiful, complete webpage!

🏁 Summary – Why Use Template Inheritance?

✅ Keeps your code clean
✅ Makes updates faster
✅ Avoids repetition
✅ Follows DRY principle
✅ Easy to maintain large websites

🧠 Memory Trick:

🔁 "If you repeat it, template inheritance can beat it!"