Pages

Layouts

A block chooses its page chrome with <meta name="template">. The named layout under templates/ wraps the block into its <slot> and can run its own .mjs view first. Omit the meta and the block uses default.

The block picks a layout

<!-- blocks/layouts.html -->
<meta name="template" content="feature" />
<title>Layouts</title>
...your block body...

The layout splices it into its slot

<!-- templates/feature.html (the chosen layout) -->
<header> ... site nav ... </header>
<main>
  <div x-text="topic"></div>   <!-- eyebrow, from scope -->
  <h1 x-html="title"></h1>     <!-- title, from scope -->
  <slot></slot>               <!-- your block body lands here -->
</main>

Live — you're looking at it

This page set content="feature", so the site nav, the “You are here” strip, the topic eyebrow and the page title above all come from templates/feature.html. Everything from the intro paragraph down is this block's body, rendered into the layout's <slot>.

The page title

A <title> at the top of a block is the page's title. It renders into the layout's <head> — not where you wrote it — and it is a normal render, so x-text reads the same scope the block body reads. A block that declares none leaves the layout's own title alone.

Declared on the block, rendered in the layout

<!-- blocks/layouts.html -->
<title x-text="'Layouts — ' + edition + ' edition'"></title>

<!-- templates/feature.html -->
<head>
  <title>C&amp;C &mdash; Feature</title>  <!-- the fallback -->
</head>

Live — watch the browser tab

This page's title reads edition off the block scope. Change it and the tab follows — the title re-renders with the block, so it never goes stale.

tab: Layouts — first edition

An app shell

A layout can embed shared blocks with x-block — a header, a footer — and wrap its slot in <cnc-block name="main">, the region a link moves.

Open the app shell →