Template includes for reusability in Django - Mini Project: Build & Apply

Template includes for reusability

📖 Scenario: You are building a simple Django website for a small bakery. The website has multiple pages, and each page should have the same header and footer for a consistent look.

🎯 Goal: Learn how to use Django template includes to reuse header and footer HTML code across multiple pages.

📋 What You'll Learn

Create a base HTML template with header and footer sections

Create separate header and footer templates

Use Django's {% include %} tag to insert header and footer into the base template

Render the base template in a Django view

💡 Why This Matters

🌍 Real World

Websites often share common parts like headers and footers on many pages. Using template includes helps keep code clean and easy to update.

💼 Career

Knowing how to reuse templates is essential for Django developers to build maintainable and scalable web applications.

1

Create header and footer templates

Create two separate HTML files named header.html and footer.html inside the templates folder. In header.html, add a <header> element with the text Welcome to the Bakery. In footer.html, add a <footer> element with the text © 2024 Bakery Inc..

Django

Need a hint?

Use simple HTML tags <header> and <footer> with the exact text inside.

2

Create base template with includes

Create a file named base.html inside the templates folder. Use Django's {% include 'header.html' %} to add the header at the top and {% include 'footer.html' %} to add the footer at the bottom. Between them, add a <main> element with the text Bakery Home Page.

Django

{% include 'header.html' %}

Bakery Home Page

{% include 'footer.html' %}

# Your code here

Need a hint?

Use the exact Django template include syntax with single quotes around the filenames.

3

Create a Django view to render the base template

In your Django app's views.py, create a function named home that uses render to return the base.html template. Import render from django.shortcuts.

Django

from django.shortcuts import render

# Create the home view function below
# Your code here

Need a hint?

Remember to define a function named home that takes request and returns render(request, 'base.html').

4

Add URL pattern for the home view

In your Django app's urls.py, import the home view and add a URL pattern that maps the root URL '' to the home view using path. Import path from django.urls.

Django

from django.urls import path
from .views import home

urlpatterns = [
    # Add the URL pattern for home here
    # Your code here
]

Need a hint?

Use path('', home) inside the urlpatterns list.