Template includes for reusability in Django - Step-by-Step Execution

Concept Flow - Template includes for reusability

Main Template

↓

Include Tag Found

↓

Load Included Template

↓

Render Included Template Content

↓

Insert Included Content into Main Template

↓

Render Complete Page

The main template finds an include tag, loads the included template, renders its content, and inserts it back into the main template before rendering the full page.

Execution Sample

Django

{% include 'header.html' %}
<p>Welcome to my site!</p>
{% include 'footer.html' %}

This template includes header.html and footer.html templates inside the main template to reuse common page parts.

Execution Table

Step	Action	Template Processed	Output Inserted	Resulting Content
1	Start rendering main template	main.html	None	{% include 'header.html' %} <p>Welcome to my site!</p> {% include 'footer.html' %}
2	Find include tag for header.html	main.html	Load header.html	<header><h1>Site Title</h1></header> <p>Welcome to my site!</p> {% include 'footer.html' %}
3	Render header.html content	header.html	<header><h1>Site Title</h1></header>	<header><h1>Site Title</h1></header> <p>Welcome to my site!</p> {% include 'footer.html' %}
4	Find include tag for footer.html	main.html	Load footer.html	<header><h1>Site Title</h1></header> <p>Welcome to my site!</p> <footer><p>© 2024 MySite</p></footer>
5	Render footer.html content	footer.html	<footer><p>© 2024 MySite</p></footer>	<header><h1>Site Title</h1></header> <p>Welcome to my site!</p> <footer><p>© 2024 MySite</p></footer>
6	Complete rendering main template	main.html	Full content	<header><h1>Site Title</h1></header> <p>Welcome to my site!</p> <footer><p>© 2024 MySite</p></footer>

💡 All include tags replaced by their respective template contents; main template fully rendered.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
main_template_content	{% include 'header.html' %} <p>Welcome to my site!</p> {% include 'footer.html' %}	<header><h1>Site Title</h1></header> <p>Welcome to my site!</p> {% include 'footer.html' %}	<header><h1>Site Title</h1></header> <p>Welcome to my site!</p> {% include 'footer.html' %}	<header><h1>Site Title</h1></header> <p>Welcome to my site!</p> <footer><p>© 2024 MySite</p></footer>	<header><h1>Site Title</h1></header> <p>Welcome to my site!</p> <footer><p>© 2024 MySite</p></footer>	<header><h1>Site Title</h1></header> <p>Welcome to my site!</p> <footer><p>© 2024 MySite</p></footer>

Key Moments - 3 Insights

Why does the main template content change after step 2?

Because the include tag {% include 'header.html' %} is replaced by the actual content of header.html, as shown in execution_table rows 2 and 3.

What happens if the included template file is missing?

Django will raise a TemplateDoesNotExist error and stop rendering, so the include tag cannot be replaced, unlike the smooth replacement shown in the execution_table.

Can included templates have their own include tags?

Yes, included templates can include other templates, and Django will process them recursively until all includes are resolved, similar to the main template process.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what content replaces the include tag?

A <footer><p>© 2024 MySite</p></footer>

B <header><h1>Site Title</h1></header>

C <p>Welcome to my site!</p>

D {% include 'footer.html' %}

💡 Hint

Check the 'Output Inserted' column at step 3 in the execution_table.

At which step does the footer.html content get inserted into the main template?

A Step 5

B Step 2

C Step 4

D Step 6

💡 Hint

Look at the 'Action' and 'Template Processed' columns in the execution_table for footer.html rendering.

If the main template had no include tags, how would the execution_table change?

A The footer.html would still be loaded.

B The main template content would be empty.

C There would be no steps for loading included templates.

D The rendering would fail.

💡 Hint

Refer to the steps involving include tags in the execution_table.

Concept Snapshot

Django template includes let you reuse parts by inserting other templates.
Use {% include 'file.html' %} inside your main template.
Django replaces the include tag with the included template's content.
This keeps templates clean and avoids repetition.
If the included file is missing, rendering stops with an error.
Includes can be nested for complex layouts.

Full Transcript

In Django templates, you can reuse common parts by using the include tag. When rendering, Django finds the include tag, loads the specified template file, renders its content, and inserts it into the main template. This process repeats for each include tag until the full page is rendered. For example, including header.html and footer.html inserts their content into the main template, so you don't repeat code. If an included file is missing, Django stops rendering with an error. Included templates can also include other templates, allowing nested reuse. This method keeps your templates organized and easy to maintain.

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'