Including Partials

Partials are reusable template fragments.

Examples:

• navbars
• footers
• alerts
• “card” components

diagram include and extends solve opposite problems mermaid

  flowchart LR
  subgraph extends
    E1["child says: put ME inside base"] --> E2["base renders, child fills the blocks"]
    E2 --> E3["one per template, at the top"]
  end
  subgraph include
    I1["page says: paste THIS here"] --> I2["the partial renders in place"]
    I2 --> I3["as many as you like, anywhere"]
  end
  E3 -.->|"layout"| K["a page shape shared by many pages"]
  I3 -.->|"reuse"| L["a card, a nav bar, a form row"]

extends is about a page fitting into a layout: the base is in charge and the child fills its holes. include is about dropping a fragment into the place you are already writing, and the fragment has no say in the surrounding page. A template can extend exactly one base, but include as many partials as it likes.

Create a partial

templates/partials/_navbar.html:

html

<nav>
  <a href="{{ url_for('home') }}">Home</a>
  <a href="{{ url_for('about') }}">About</a>
</nav>

Include it in another template

html

{% include "partials/_navbar.html" %}

Where to use includes

• inside base.html to share nav/footer
• in pages to share repeated UI patterns

Tip: naming convention

Many teams prefix partials with _ (like _navbar.html) to signal “not a full page”.

Jinja doesn’t require it, but it helps humans.