Include for reusable fragments in Flask - Mini Project: Build & Apply

Using Include for Reusable Fragments in Flask Templates

📖 Scenario: You are building a simple website with Flask. You want to reuse the same navigation bar on multiple pages without copying the code each time.

🎯 Goal: Create a Flask project that uses template include to reuse a navigation bar fragment in two different HTML pages.

📋 What You'll Learn

Create a base HTML file with a navigation bar fragment in a separate file

Use Flask's render_template to render pages

Use Jinja2 {% include %} to insert the navigation bar fragment into pages

Create two pages that both include the navigation bar fragment

💡 Why This Matters

🌍 Real World

Web developers often reuse parts of web pages like headers, footers, or navigation bars to keep code clean and consistent across many pages.

💼 Career

Knowing how to use template includes is essential for building maintainable web applications with Flask or other template-based frameworks.

1

Create the navigation bar fragment file

Create a file called nav.html inside the templates folder. Add a simple navigation bar with an unordered list containing links: Home, About, Contact.

Flask

Hint

Use HTML <nav> and <ul> tags. Put three <li> items with links inside.

2

Create the home page template including the nav fragment

Create a file called home.html inside the templates folder. Use Jinja2 {% include 'nav.html' %} to insert the navigation bar at the top. Below it, add a heading <h1>Welcome to the Home Page</h1>.

Flask

  
    Home
    About
    Contact
  

Hint

Use {% include 'nav.html' %} exactly to insert the nav bar. Then add the heading below.

3

Create the about page template including the nav fragment

Create a file called about.html inside the templates folder. Use Jinja2 {% include 'nav.html' %} to insert the navigation bar at the top. Below it, add a heading <h1>About Us</h1>.

Flask

{% include 'nav.html' %}
Welcome to the Home Page

Hint

Use the same include syntax as before. Change the heading text to 'About Us'.

4

Create the Flask app to render the pages

Create a file called app.py. Import Flask and render_template. Create a Flask app instance called app. Add two routes: / rendering home.html and /about rendering about.html. Finally, add the if __name__ == '__main__' block to run the app with debug mode on.

Flask

# Your code here

Hint

Follow Flask basics: import, create app, define routes with decorators, return render_template calls, and run the app.

Practice

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

easy

A. To create new routes in Flask

B. To define variables in templates

C. To insert reusable HTML fragments into templates

D. To execute Python code inside templates

Solution

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

   This tag is used to insert reusable HTML parts into templates to avoid repetition.

2. Step 2: Compare with other options

   Defining variables, creating routes, or executing Python code are not done with {% include %}.

3. Final Answer:

   To insert reusable HTML fragments into templates -> Option C

4. Quick Check:

   Reusable HTML insertion = A [OK]

Hint: Remember: include means insert reusable HTML [OK]

Common Mistakes:

• Confusing include with variable definition
• Thinking include creates routes
• Assuming include runs Python code

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

easy

A. {% include 'header.html' %}

B. {% import 'header.html' %}

C. {{ include('header.html') }}

D. {% extend 'header.html' %}

Solution

1. Step 1: Recall the correct syntax for including templates

   The correct syntax uses {% include 'filename' %} with quotes around the filename.

2. Step 2: Eliminate incorrect options

   {% import %} is for macros, {{ include() }} is invalid, and {% extend %} is for template inheritance.

3. Final Answer:

   {% include 'header.html' %} -> Option A

4. Quick Check:

   Include syntax = {% include 'file' %} [OK]

Hint: Use {% include 'file.html' %} with quotes [OK]

Common Mistakes:

• Using {% import %} instead of {% include %}
• Trying to call include as a function {{ include() }}
• Confusing include with extend

3. Given the following templates, what will be rendered when base.html is rendered?

base.html:
<html>
  <body>
    {% include 'nav.html' %}
    <h1>Welcome</h1>
  </body>
</html>

nav.html:
<nav>Menu</nav>

medium

A. <nav>Menu</nav><h1>Welcome</h1>

B. <html><body><h1>Welcome</h1></body></html>

C. Error: nav.html not found

D. <html><body><nav>Menu</nav><h1>Welcome</h1></body></html>

Solution

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

   The {% include 'nav.html' %} inserts the content of nav.html exactly where the tag is placed.

2. Step 2: Combine the templates

   In base.html, the <nav>Menu</nav> from nav.html appears before the <h1>Welcome</h1> inside the body.

3. Final Answer:

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

4. Quick Check:

   Include inserts nav.html content inline [OK]

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

Common Mistakes:

• Ignoring the included file content
• Expecting an error if file exists
• Thinking include replaces whole template

4. What is the error in this template snippet?

{% include header.html %}

medium

A. Filename should be a variable, not a string

B. Missing quotes around the filename

C. Incorrect tag name, should be import

D. Include tag cannot be used inside templates

Solution

1. Step 1: Check syntax for include tag

   The filename must be a string literal enclosed in quotes, like 'header.html'.

2. Step 2: Identify the error

   Here, header.html is unquoted, causing a syntax error.

3. Final Answer:

   Missing quotes around the filename -> Option B

4. Quick Check:

   Filename must be quoted in include [OK]

Hint: Always put quotes around filenames in include [OK]

Common Mistakes:

• Omitting quotes around filename
• Using import instead of include
• Thinking include is invalid in templates

5. You want to create a reusable footer for your Flask app. Which approach correctly uses {% include %} to add footer.html to multiple pages and ensures easy updates?

hard

A. Add {% include 'footer.html' %} in each page template where footer is needed

B. Copy footer HTML code into every page template manually

C. Use {% extend 'footer.html' %} in each page template

D. Write footer HTML inside the Flask route function

Solution

1. Step 1: Understand reusable fragments with include

   Using {% include 'footer.html' %} inserts the footer code wherever needed, keeping code DRY.

2. Step 2: Compare other options

   Copying code manually duplicates it, {% extend %} is for inheritance, and writing HTML in route mixes logic and presentation.

3. Final Answer:

   Add {% include 'footer.html' %} in each page template where footer is needed -> Option A

4. Quick Check:

   Include footer in templates for easy updates [OK]

Hint: Use include tag in templates to reuse footer [OK]

Common Mistakes:

• Copy-pasting footer code instead of including
• Using extend instead of include for fragments
• Mixing HTML in Python route code