How to use block in jinja2 in flask

FlaskHow-ToBeginner · 3 min read

How to Use Block in Jinja2 Templates with Flask

In Flask, use Jinja2's {% block %} tag inside a base template to define sections that child templates can override. Child templates extend the base with {% extends %} and replace blocks with their own content to customize pages.

📐

Syntax

The {% block block_name %} tag defines a replaceable section in a base template. Child templates use {% extends 'base.html' %} to inherit the base and override blocks with their own content inside {% block block_name %} tags.

This allows you to create a common layout and customize parts of the page in different views.

jinja2

{% raw %}
<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
    <header>
        {% block header %}Default Header{% endblock %}
    </header>
    <main>
        {% block content %}Default Content{% endblock %}
    </main>
    <footer>
        {% block footer %}Default Footer{% endblock %}
    </footer>
</body>
</html>

<!-- child.html -->
{% extends 'base.html' %}

{% block title %}Custom Page Title{% endblock %}

{% block content %}
<p>This is custom content replacing the base content block.</p>
{% endblock %}
{% endraw %}

💻

Example

This example shows a simple Flask app using a base template with blocks and a child template that overrides them. The base template defines title and content blocks. The child template customizes these blocks to change the page title and main content.

python

from flask import Flask, render_template

app = Flask(__name__)

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

# base.html
base_html = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}Welcome{% endblock %}</title>
</head>
<body>
    <h1>Site Header</h1>
    <div>
        {% block content %}
        <p>This is the default content.</p>
        {% endblock %}
    </div>
    <footer>Site Footer</footer>
</body>
</html>
'''

# child.html
child_html = '''
{% extends 'base.html' %}

{% block title %}Home Page{% endblock %}

{% block content %}
<p>Hello from the child template!</p>
{% endblock %}
'''

# To run this example, save base.html and child.html in the templates folder with the above content.

if __name__ == '__main__':
    app.run(debug=True)

Output

<!DOCTYPE html> <html lang="en"> <head> <title>Home Page</title> </head> <body> <h1>Site Header</h1> <div> <p>Hello from the child template!</p> </div> <footer>Site Footer</footer> </body> </html>

⚠️

Common Pitfalls

Forgetting to use {% extends 'base.html' %} in the child template means blocks won't override the base.
Not closing blocks with {% endblock %} causes template errors.
Using different block names in child and base templates means no override happens.
Placing content outside blocks in child templates will be ignored if extends is used.

jinja2

{% raw %}
<!-- Wrong: missing extends, block won't override -->
{% block content %}
<p>This won't replace base content.</p>
{% endblock %}

<!-- Right: extends base and overrides block -->
{% extends 'base.html' %}
{% block content %}
<p>This replaces base content correctly.</p>
{% endblock %}
{% endraw %}

📊

Quick Reference

Jinja2 block usage in Flask templates:

{% block name %}...{% endblock %}: Define a replaceable section in base template.
{% extends 'base.html' %}: In child template, inherit base layout.
Override blocks in child templates with same block names.
Blocks help keep layout DRY and flexible.

✅

Key Takeaways

Use {% block %} in base templates to define sections that child templates can override.

Child templates must use {% extends 'base.html' %} to inherit and replace blocks.

Always close blocks with {% endblock %} to avoid template errors.

Block names must match exactly between base and child templates for overrides to work.

Content outside blocks in child templates with extends is ignored.