Template Blocks

A block is a named placeholder region that child templates can override.

Defining blocks

html

<!-- base.html -->
{% block content %}{% endblock %}

html

<!-- base.html -->
{% block content %}{% endblock %}

html

<!-- page.html -->
{% extends "base.html" %}
 
{% block content %}
  <h1>Page content</h1>
{% endblock %}

html

<!-- page.html -->
{% extends "base.html" %}
 
{% block content %}
  <h1>Page content</h1>
{% endblock %}

Base templates often have blocks like:

html

{% block scripts %}{% endblock %}

html

{% block scripts %}{% endblock %}

Child template:

html

{% block scripts %}
  <script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}

html

{% block scripts %}
  <script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}

If you want to add to a parent block rather than replace it:

html

{% block scripts %}
  {{ super() }}
  <script src="{{ url_for('static', filename='extra.js') }}"></script>
{% endblock %}

html

{% block scripts %}
  {{ super() }}
  <script src="{{ url_for('static', filename='extra.js') }}"></script>
{% endblock %}

That’s useful for base scripts shared across pages.

If this helped you, consider buying me a coffee ☕