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

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

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

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
]

Hint

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

Practice

1. What is the main purpose of using {% include %} in Django templates?

easy

A. To reuse parts of templates like headers or footers in multiple pages

B. To execute Python code inside the template

C. To define variables for use in the template

D. To create loops inside the template

Solution

1. Step 1: Understand the role of {% include %}

   This tag is used to insert reusable template parts, such as headers or footers, into other templates.

2. Step 2: Compare with other template features

   Executing Python code or defining variables is done differently, not with {% include %}.

3. Final Answer:

   To reuse parts of templates like headers or footers in multiple pages -> Option A

4. Quick Check:

   Template reuse = To reuse parts of templates like headers or footers in multiple pages [OK]

Hint: Remember: include = reuse template parts like header/footer [OK]

Common Mistakes:

• Thinking include runs Python code
• Confusing include with variable assignment
• Using include to create loops

2. Which of the following is the correct syntax to include a template named menu.html inside another template?

easy

A. {% include menu.html %}

B. {% include 'menu.html' %}

C. {% include "menu.html %}

D. {% include 'menu' %}

Solution

1. Step 1: Check the syntax for including templates

   The correct syntax requires the template name as a quoted string inside the include tag, like {% include 'menu.html' %}.

2. Step 2: Evaluate the options

   {% include menu.html %} misses quotes, {% include "menu.html %} malformed double quotes (missing closing quote), {% include 'menu' %} misses the file extension.

3. Final Answer:

   {% include 'menu.html' %} -> Option B

4. Quick Check:

   Include syntax = {% include 'menu.html' %} [OK]

Hint: Include template name in single quotes inside {% include %} [OK]

Common Mistakes:

• Forgetting quotes around template name
• Omitting file extension
• Using variable name without quotes

3. Given the following templates:

{% raw %}{# base.html #}%

  
    {% include 'header.html' %}
    
Welcome
  
{% endraw %}

And header.html contains:

{% raw %}
Menu
{% endraw %}

What will be the rendered output of base.html?

medium

A. Error: header.html not found

B.

{% include 'header.html' %}
Welcome

C.

Menu
Welcome

D.

Menu
Welcome

Solution

1. Step 1: Understand how {% include %} works

   The include tag inserts the full content of header.html into base.html at the include position.

2. Step 2: Replace include with header content

   Replacing {% include 'header.html' %} with <header><nav>Menu</nav></header> gives the full HTML output.

3. Final Answer:

   <html> <body> <header><nav>Menu</nav></header> <h1>Welcome</h1> </body> </html> -> Option D

4. Quick Check:

   Include inserts full template content =
   Menu

   Welcome

   [OK]

Hint: Include inserts full content exactly where placed [OK]

Common Mistakes:

• Expecting include tag to remain in output
• Assuming partial content inserted
• Thinking include causes error if file exists

4. You wrote {% include header.html %} in your template but get a TemplateSyntaxError. What is the most likely cause?

medium

A. Missing quotes around the template name in the include tag

B. The header.html file does not exist

C. You need to use {% extends %} instead of {% include %}

D. You forgot to load the include tag library

Solution

1. Step 1: Identify syntax rules for include

   The template name must be a quoted string inside the include tag, like {% include 'header.html' %}.

2. Step 2: Analyze the error cause

   Omitting quotes causes TemplateSyntaxError because Django expects a string literal.

3. Final Answer:

   Missing quotes around the template name in the include tag -> Option A

4. Quick Check:

   Quotes required for template name = Missing quotes around the template name in the include tag [OK]

Hint: Always put template names in quotes inside {% include %} [OK]

Common Mistakes:

• Forgetting quotes around template name
• Confusing include with extends
• Assuming include tag needs loading

5. You want to create a reusable navigation menu that highlights the current page. You have menu.html included in multiple templates. How can you pass the current page name to menu.html using {% include %}?

hard

A. {% include 'menu.html' current_page='home' %}

B. {% include 'menu.html' only current_page='home' %}

C. {% include 'menu.html' with current_page='home' %}

D. {% include 'menu.html' as current_page='home' %}

Solution

1. Step 1: Recall how to pass variables with include

   Django allows passing variables to included templates using with keyword inside the include tag.

2. Step 2: Check syntax correctness

   The correct syntax is {% include 'menu.html' with current_page='home' %}. Other options are invalid syntax.

3. Final Answer:

   {% include 'menu.html' with current_page='home' %} -> Option C

4. Quick Check:

   Pass variables with 'with' keyword = {% include 'menu.html' with current_page='home' %} [OK]

Hint: Use 'with' keyword to pass variables in {% include %} [OK]

Common Mistakes:

• Omitting 'with' keyword when passing variables
• Using 'only' incorrectly with variables
• Trying to assign variables with 'as'