Block definitions and overriding in Flask - Mini Project: Build & Apply

Block Definitions and Overriding in Flask Templates

📖 Scenario: You are building a simple Flask web app that uses template inheritance to keep your HTML organized. You want to create a base template with a header and footer, and then create a child template that changes the main content area.

🎯 Goal: Build two Flask templates: a base template with a content block, and a child template that overrides the content block with custom text.

📋 What You'll Learn

Create a base template called base.html with a content block

Create a child template called child.html that extends base.html

Override the content block in child.html with a custom message

Use Flask's render_template to render child.html in the app route

💡 Why This Matters

🌍 Real World

Web developers use template inheritance to keep HTML code clean and reusable. This helps maintain consistent layouts across pages while customizing content easily.

💼 Career

Understanding template blocks and overriding is essential for backend web developers working with Flask or similar frameworks to build scalable web applications.

1

Create the base template with a content block

Create a file called base.html with HTML structure including a header and footer. Inside the body, define a Jinja2 block named content using {% block content %}{% endblock %}.

Flask

    
    
    Base Template


    
        Welcome to My Site
    
    
    

    
        © 2024 My Site
    

Hint

Use {% block content %}{% endblock %} inside the body to create a block that child templates can override.

2

Create the child template that extends the base

Create a file called child.html that extends base.html using {% extends 'base.html' %}. Inside it, override the content block with a paragraph that says "This is the child content.".

Flask

{% extends 'base.html' %}

Hint

Use {% extends 'base.html' %} at the top and then override the content block with your paragraph.

3

Set up the Flask app route to render the child template

In your Flask app file, import Flask and render_template. Create an app instance. Define a route for / that returns render_template('child.html').

Flask

from flask import Flask, render_template

app = Flask(__name__)

# Define route for '/' here
# Your code here

Hint

Use @app.route('/') to define the route and return render_template('child.html') inside the function.

4

Run the Flask app with debug mode enabled

Add the code to run the Flask app with debug=True when the script is executed directly. Use if __name__ == '__main__': and call app.run(debug=True).

Flask

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('child.html')

# Add code to run the app with debug=True
# Your code here

Hint

Use the standard Python check if __name__ == '__main__': and call app.run(debug=True) inside it.

Practice

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

easy

A. To include external CSS files

B. To define sections that child templates can override

C. To write Python code inside templates

D. To create comments in the template

Solution

1. Step 1: Understand block usage in Flask templates

   The {% block %} tag defines a section in a base template that child templates can replace or extend.

2. Step 2: Identify the purpose of blocks

   Blocks allow flexible template inheritance by letting child templates override specific parts without rewriting the whole template.

3. Final Answer:

   To define sections that child templates can override -> Option B

4. Quick Check:

   Blocks = override sections [OK]

Hint: Blocks mark replaceable sections in templates [OK]

Common Mistakes:

• Confusing blocks with comments
• Thinking blocks run Python code
• Using blocks to include CSS

2. Which of the following is the correct syntax to override a block named content in a child template?

easy

A. {% block content %}New content{% endblock %}

B. {% extends content %}New content{% endextends %}

C. {% override content %}New content{% endoverride %}

D. {% include content %}New content{% endinclude %}

Solution

1. Step 1: Recall block override syntax

   To override a block, use {% block block_name %}...{% endblock %} in the child template.

2. Step 2: Check each option

   Only {% block content %}New content{% endblock %} uses the correct {% block %} and {% endblock %} tags with the block name.

3. Final Answer:

   {% block content %}New content{% endblock %} -> Option A

4. Quick Check:

   Override block = {% block %}...{% endblock %} [OK]

Hint: Override blocks with {% block name %}...{% endblock %} [OK]

Common Mistakes:

• Using {% extends %} instead of {% block %} to override
• Using non-existent tags like {% override %}
• Confusing {% include %} with block override

3. Given the base template base.html with:

{% raw %}{% block title %}Base Title{% endblock %}{% endraw %}

and child template child.html with:

{% raw %}{% extends 'base.html' %}{% block title %}Child Title{% endblock %}{% endraw %}

What will be displayed in the title block when rendering child.html?

medium

A. Base Title

B. Base TitleChild Title

C. Child Title

D. An error occurs

Solution

1. Step 1: Understand template inheritance

   The child template extends the base and overrides the title block.

2. Step 2: Determine which block content is used

   Since the child overrides the block, the content shown is from the child: "Child Title".

3. Final Answer:

   Child Title -> Option C

4. Quick Check:

   Child block overrides base block [OK]

Hint: Child block content replaces base block content [OK]

Common Mistakes:

• Assuming base block content shows instead
• Thinking both contents concatenate automatically
• Expecting a syntax error

4. Identify the error in this child template code:

{% raw %}{% extends 'base.html' %}{% block content %}Hello{% endblock content %}{% endraw %}

medium

A. Incorrect block closing tag; should be {% endblock %} not {% endblock content %}

B. Missing {% block %} tag

C. Incorrect extends syntax

D. No error; code is correct

Solution

1. Step 1: Check block closing syntax

   The correct way to close a block is with {% endblock %} without repeating the block name.

2. Step 2: Identify the error in the code

   The code uses {% endblock content %}, which is invalid and causes a syntax error.

3. Final Answer:

   Incorrect block closing tag; should be {% endblock %} not {% endblock content %} -> Option A

4. Quick Check:

   Block ends with {% endblock %} only [OK]

Hint: Close blocks with {% endblock %} only, no name [OK]

Common Mistakes:

• Adding block name in endblock tag
• Omitting {% block %} tag
• Wrong quotes in extends

5. You have a base template with two blocks:

{% raw %}{% block header %}Base Header{% endblock %}{% block footer %}Base Footer{% endblock %}{% endraw %}

You want a child template to override only the footer block but keep the base header. Which is the correct child template code?

hard

A. {% raw %}{% extends 'base.html' %}{% block header %}Base Header{% endblock %}{% block footer %}Child Footer{% endblock %}{% endraw %}

B. {% raw %}{% extends 'base.html' %}{% block header %}Child Header{% endblock %}{% endraw %}

C. {% raw %}{% block footer %}Child Footer{% endblock %}{% endraw %}

D. {% raw %}{% extends 'base.html' %}{% block footer %}Child Footer{% endblock %}{% endraw %}

Solution

1. Step 1: Understand block overriding behavior

   Only blocks defined in the child template override the base. Blocks not overridden use base content.

2. Step 2: Check which blocks are overridden

   {% raw %}{% extends 'base.html' %}{% block footer %}Child Footer{% endblock %}{% endraw %} overrides only footer, so header remains from base.

3. Final Answer:

   {% extends 'base.html' %}{% block footer %}Child Footer{% endblock %} -> Option D

4. Quick Check:

   Override only needed blocks in child [OK]

Hint: Override only blocks you want to change [OK]

Common Mistakes:

• Overriding blocks unnecessarily
• Forgetting {% extends %} in child
• Defining blocks without extends