Templates

Variables

Any frontmatter key is available as {{key}} in the template. Example: title: Home → {{title}} in the template outputs Home. Use for <title>, meta tags, headings, etc.

title: About Us
subtitle: Our story

<title>{{title}}</title>
<h1>{{title}}</h1>
<p>{{subtitle}}</p>

Mount placeholders

In the template: {{MOUNT.slotName}} (e.g. {{MOUNT.head}}, {{MOUNT.content}}, {{MOUNT.body}}). The build replaces each with the merged content for that slot (styles, scripts, HTML from all pages and components targeting that slot).

In a page body you can also write {{MOUNT.slotName}} or {{MOUNT.slotName:var1,var2}} to inject a component and pass variables.

{{MOUNT.head}}
{{MOUNT.nav}}
<main>
  {{MOUNT.content}}
</main>
{{MOUNT.footer}}
{{MOUNT.body}}

{{MOUNT.hero:heroTitle}}
<article>...</article>

Conditionals

{{if variable}} … {{else}} … {{/if}}. The variable can come from frontmatter or from a mount argument (e.g. @@heroTitle in a component). Nested conditionals work (evaluate inside-out).

{{if showSidebar}}
  <aside class="sidebar">...</aside>
{{else}}
  <p>No sidebar</p>
{{/if}}

Foreach

In frontmatter define a list: items: '["a","b","c"]' or items: Apple, Banana, Cherry. In the body:

<ul>
{{foreach items}}
  <li>{{index}}: {{item}}</li>
{{/foreach}}
</ul>

Inside the loop: {{index}} (0-based) and {{item}}. For arrays of objects use {{item.name}}, {{item.url}}.

Component variables

When you pass variables into a mount ({{MOUNT.card:title,description}}), the component uses @@title, @@description for substitution and {{if title}} for conditionals. Same variable names in both places.

{{MOUNT.card:title,description}}

<div class="card">
  {{if title}}
    <h3>@@title</h3>
  {{/if}}
  <p>@@description</p>
</div>