Include for reusable fragments in Flask - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of using include in Flask templates?

It allows you to reuse parts of HTML code (fragments) across multiple pages, making your templates cleaner and easier to maintain.

beginner

How do you include a reusable fragment in a Flask template?

Use the Jinja2 syntax: {% include 'filename.html' %} where filename.html is the fragment you want to reuse.

intermediate

Can included fragments in Flask templates access variables from the parent template?

Yes, included fragments share the same context and can use variables passed to the parent template.

beginner

What is a practical example of using include in Flask templates?

You can create a header or footer HTML file and include it in all your pages to keep a consistent look and avoid repeating code.

intermediate

What happens if the included file does not exist in Flask templates?

Flask will raise a template error when rendering, indicating the included file was not found.

Which Jinja2 syntax is used to include a reusable fragment in a Flask template?

A {{ include('fragment.html') }}

B {% include 'fragment.html' %}

C <include src='fragment.html' />

D {% import 'fragment.html' %}

The correct syntax to include a fragment is {% include 'fragment.html' %}.

What is a main benefit of using include for reusable fragments in Flask templates?

A Speed up server response time

B Encrypt template files

C Automatically cache templates

D Avoid repeating code and keep templates clean

Including reusable fragments helps avoid repeating code and keeps templates organized.

Can included fragments access variables defined in the parent template?

A Only if variables are passed explicitly

B No, they have separate contexts

C Yes, they share the same context

D Only if using global variables

Included fragments share the same context and can use variables from the parent template.

What happens if you include a non-existing file in a Flask template?

A Flask raises a template error

B Flask ignores the include silently

C Flask creates an empty file automatically

D Flask logs a warning but renders normally

Flask will raise an error indicating the included file was not found.

Which of these is a good use case for include in Flask templates?

A Reusing a navigation bar across pages

B Storing user data securely

C Running Python code inside templates

D Styling templates with CSS

Including a navigation bar fragment helps reuse it on many pages easily.

Explain how and why you would use include in Flask templates to reuse HTML fragments.

Think about how websites have the same header on many pages.

Describe what happens if you try to include a file that does not exist in a Flask template.

Consider what happens if you try to open a missing file on your computer.

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