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
    

Need a 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' %}

Need a 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

Need a 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

Need a hint?

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