Layouts

Layouts define shared page structure.

Layout files live in:

src/layouts

A layout file begins with:

@layout Main(title)

Basic layout

@layout Main(title)

<header>
  <a href="/">{{ site.name }}</a>
</header>

<main>
  {{ slot }}
</main>

Slot

{{ slot }} is replaced with the page content.

The current implementation also provides content as an alias for the same slot content inside layouts.

Using a layout from a page

Pages attach layouts with @use.

@page
@use Main(title=page.title)

<h1>{{ page.title }}</h1>

Layout props

Layout props are declared in the layout declaration:

@layout Main(title, description)

They are passed from the page:

@use Main(title=page.title, description=page.description)

Unknown layout props

If a page passes a prop that the layout did not declare, the engine throws an error.

Example:

@use Main(unknown="Value")

If unknown is not declared by Main, this is invalid.

Missing layout props

Declared layout props that are not passed are set to undefined.

Layout file name and declaration name

The layout file name and declared layout name must match.

Example:

src/layouts/Main.csc

must contain:

@layout Main(...)