Template Blocks

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

diagram blocks are named holes, and naming them is the design mermaid

  flowchart LR
  subgraph "base.html"
    T["{% block title %}"]
    H["{% block head %}"]
    C["{% block content %}"]
    S["{% block scripts %}"]
  end
  subgraph "article.html"
    T2["title -> the article headline"]
    C2["content -> the article body"]
  end
  T -.-> T2
  C -.-> C2
  H -.->|"not overridden"| HD["base default is kept"]
  S -.->|"not overridden"| SD["base default is kept"]

Every block in the base is a decision about what a page is allowed to change. Too few and children start duplicating the layout; too many and the base stops meaning anything. The common set is a title, a place for per-page styles, the main content, and a place for per-page scripts.

Defining blocks

html

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

Overriding blocks

html

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

Using multiple blocks

Base templates often have blocks like:

• title
• content
• scripts

html

{% block scripts %}{% endblock %}

Child template:

html

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

Extending a block (super)

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 %}

That’s useful for base scripts shared across pages.