Metadata & Layouts

Websites typically have multiple pages, which generally follow the same layout, and share most of their assets and metadata (e.g. <meta> tags). Each page might also have its own unique metadata, such as its title or description. Use pree's front matter and layouting to manage this shared metadata and layout.


👉 STEP 1: Create a layout page:

<!-- _layout.html-->
<html lang="en">
  <head>
    <!-- shared metadata -->
    <!-- shared scripts and styles -->
  </head>
  <body>
      <!-- 👇 content of pages using this layout
              will be slotted here. -->
      <slot></slot>
  </body>
</html>

👉 STEP 2: Add front matter to your page, and specify the layout:

---
title: My Page
layout: ./_layout.html
---

<h1>My Page</h1>
<p>Some Content</p>

👆 When prebuilding this HTML, pree will:

 🔍

Resolve and load ./_layout.html,

 🧩

Insert content of the page into the <slot> element in the layout,

 💳

Override metadata that is provided in the front matter.

Front matter is a YAML block at the top of a file, specifying title of the page, layout of the page, or any other page-specific metadata. If some metadata is provided in the front matter and the layout, the one in the front matter is used.

 ⚖️ Front matter MUST be the first string in your file, ⚖️ Front matter MUST be valid YAML, ⚖️ Front matter must be set between tripple-dashed lines.

Named Slots

A layout file can also have named slots, where other pages can insert specific content. For example, a page might also want to specify footer content alongside the main content:

<!-- _layout.html-->
<!-- ... -->
<main>
  <slot></slot>
</main>
<footer>
  <slot name="footer"></slot>
  <p> copyright (c) 2024, all rights waivered </p>
</footer>
<!-- ... -->

---
title: My Page
layout: ./_layout.html
---

<h1>My Page</h1>
<p>Some Content</p>

<span slot="footer">This is the footer content</span>

IMPORTANT: named slots in the child pages MUST appear at the root of the content.

pree logo