Building

Templates

Headers, footers and everything else around a page — assigned by route or collection.

A template is everything around a page: the header, the footer, and whatever else wraps the content. It is assigned by a rule rather than picked per page, so a new page is already dressed.

The shape of one

A template is a tree, edited on its own canvas exactly like a page. Somewhere in it sits the Site content element — a main that marks where the page is rendered:

Header
Shell
  Sidebar
  ▸ Site content        ← the page goes here
  On this page
Footer

Without a Site content element the page is simply placed between the header and the footer.

Templates carry their own stylesheet, shared by every page that uses them and emitted to src/styles/generated/templates/<id>.css.

Never build a header or a footer into a page. Two pages with their own copies of a header are two headers that will disagree by Thursday.

Assigning one

Each template says which pages it owns:

Rule	Means
All pages	the site default — the fallback for anything nothing else matches
Routes	these page routes, e.g. `index`, `about`
Collections	entries of these content types, e.g. `posts`
Except routes / collections	an exclusion, which always wins

Resolution is most specific first: a route rule beats a collection rule, which beats the site default. That is how the homepage can differ from the projects archive without anyone editing a theme file.

Working in one

Open a template and the canvas shows it with a marker where the page will be. Everything else works as usual: elements, classes, the Style panel, breakpoints, motion, overlays.

Because a template applies to many pages, saving one re-emits every page that uses it. You do not need to open those pages.

A navigation belongs here

Put the site menu in the template, not in each page. Inserting Nav composes a complete, working menu — dropdowns, mobile toggle, focus trap, aria-current — out of ordinary elements you can then restyle. See Navigation.

Components inside templates

A template can use your components, which is how one navigation list appears both in a sidebar and inside a mobile overlay without existing twice. The instance is one node; the markup lives in the component.