Templates and Data

Templates combine HTML with values prepared from Preview Data. Begin with Customize a Theme to run a starter’s local preview.

Shared Layout

layout.html wraps the route template and must contain exactly one content slot:

<main>
  {{slot:content}}
</main>

Shared fragments live in partials/. Include one with {{partial:header}}, or use an existing named slot such as {{slot:header}}. Put shared scripts in a partial and include it from the layout; direct <script> tags in layout.html are not allowed.

Use the complete Minimal layout as a starting point for the document shell, metadata, and asset links. <title>{{meta.title}}</title> and {{meta.head_tags}} render the generated head metadata; this root meta object is separate from authored site.meta.

Variables And Conditions

Use {{path.to.value}} to insert a value and {{#if ...}} to show optional UI:

<a href="/">{{site.title}}</a>
{{#if site.description}}
  <p>{{site.description}}</p>
{{/if}}

Comparison helpers support exact matches and branches:

{{#if_eq route.type "post"}}
  <span>Article</span>
{{#else_if_eq route.type "page"}}
  <span>Page</span>
{{/if}}

These are template helpers, not JavaScript expressions. Comparisons preserve types; 4 and "4" are different. See the syntax reference for the complete helper and loop syntax.

Route Data

The render-context reference lists the common roots and each route’s data. post.html receives post, page.html receives page, and listing templates use summary items rather than complete detail objects.

Use route.is_front_page and route.is_post_index where a template serves more than one purpose. A Page selected as the front page is rendered at /; its usual page route is not emitted.

Lists And Partials

Render post cards by looping over posts.items:

{{#for post in posts.items}}
  {{partial:post-card post=post variant="compact"}}
{{/for}}

Create partials/post-card.html to use the passed arguments under partial.*:

<article class="post-card post-card--{{partial.variant}}">
  <h2><a href="{{partial.post.url}}">{{partial.post.title}}</a></h2>
  {{#if partial.post.summary}}<p>{{partial.post.summary}}</p>{{/if}}
</article>

Use summary for cards: it contains the authored excerpt or a summary derived from the body. Use excerpt when a detail page should show only the author’s introductory text.

Post And Page Bodies

post.html and page.html contain rendered body HTML. For Markdown documents whose body already includes the title, render it without adding another H1:

<article class="prose">
  {{page.html}}
</article>

For content written without a body H1, the template can provide <h1>{{page.title}}</h1> before the body. Choose one heading source for your site.

Update timestamps are optional. Display both the machine-readable date and its site-localized text when available:

{{#if page.updated_at_iso}}
  <time datetime="{{page.updated_at_iso}}">{{page.updated_at}}</time>
{{/if}}

Page Layout Variants

Use meta for scalar options and data for structured values. A Page can include this Preview Data fragment:

{
  "meta": { "layout": "case-study" },
  "data": {
    "facts": [
      { "label": "Role", "value": "Design Engineering" },
      { "label": "Year", "value": "2026" }
    ]
  }
}

In page.html, select named partials rather than changing the route filename:

{{#if_eq page.meta.layout "case-study"}}
  {{partial:page-case-study page=page}}
{{#else}}
  {{partial:page-default page=page}}
{{/if}}

Create both partials. In partials/page-case-study.html, render the passed facts:

<dl>
  {{#for fact in partial.page.data.facts}}
    <dt>{{fact.label}}</dt>
    <dd>{{fact.value}}</dd>
  {{/for}}
</dl>
<div class="prose">{{partial.page.html}}</div>

Custom meta and data values are escaped as text. Use rendered body fields for content HTML, and custom HTML slots for trusted site integrations.

Site Identity And Footer

Use site.logo.src and site.logo.alt for a logo, with site.title as fallback text. Site-specific scalar options belong in site.meta; a manifest’s site_meta entries describe them but do not supply values or defaults.

The footer can use the site’s configured text and attribution preference:

<footer>
  {{#if site.footer.copyright_text}}<p>{{site.footer.copyright_text}}</p>{{/if}}
  {{#if site.footer.attribution}}
    <p>Published with <a href="https://zeropress.app">ZeroPress</a></p>
  {{/if}}
</footer>

For field definitions, see Post and Page details and list summaries.