Hugo Page Chrome

Page chrome is the shared frame around authored content: header, logo, breadcrumbs, aside panels, page TOCs, book TOCs, status badges, and overlays. It is contract-driven so sites can vary behavior through config/front matter without copying shared layouts.

Contract Then Render

The chrome pipeline has two main stages:

• layouts/partials/page/chrome-contract.html decides which chrome surfaces should exist for the current page.
• layouts/partials/page/chrome-render.html renders the chrome shell and emits the data attributes used by runtime code.

The header follows the same model. page/header-contract.html normalizes params.header.*, page front matter, and legacy compatibility values before layouts/partials/header.html, logo.html, and nav partials render the visible header.

Runtime Boundary

The header is replaceable after SPA navigation. Runtime code should bind to the current header and listen for route/header swap events rather than assuming a static singleton. The shared mobile/brochure behavior belongs in cdn/custom/brochure-nav.js, not in site-local header forks.

Common Inputs

• params.header.* and page header.* for semantic header configuration.
• Book/page TOC flags for aside and page navigation.
• Video and summary chrome contracts for richer page sidebars.
• Page-lock and draft state for visible status badges.

Files To Read

• layouts/partials/page/chrome-contract.html
• layouts/partials/page/chrome-render.html
• layouts/partials/page/header-contract.html
• layouts/partials/header.html
• layouts/partials/logo.html
• layouts/partials/nav/breadcrumbs.html
• cdn/custom/brochure-nav.js