Layouts

A layout wraps pages. A _layout.jsx is a function of one argument, the content to wrap:

(content) =>
<html>
  <head>
    <title>{page.title} · {siteTitle}</title>
  </head>
  <body>
    {partial("_partials/header")}
    <main>{content}</main>
    {partial("_partials/footer")}
  </body>
</html>

content is already-rendered HTML and is inserted as is. page is the data of the page being wrapped.

Nesting

A layout applies to pages in its folder and every folder below. Layouts nest nearest first: a page in articles/2021/ is wrapped by articles/_layout.jsx, and the result is wrapped by the root _layout.jsx. Section layouts usually return a fragment or a <div>, and leave <html> to the root layout:

// articles/_layout.jsx
(content) =>
<article>
  <h1>{page.title}</h1>
  <time>{page.date}</time>
  {content}
</article>

Choosing a layout explicitly

Set layout in a page's data to skip the folder layouts and use a specific one. The value is a path from the site root, without the extension:

---
layout: about/_wide
---

layout: "" turns layouts off entirely, which is what feeds and other non-HTML pages want.

A layout can also set layout (with data() in JSX, or frontmatter in a template layout). When it does, the remaining folder layouts are dropped and the named layout is applied next. This lets one layout hand off to a specific chain:

// about/_layout.jsx
data({ layout: "_layouts/wide" });
(content) => <div class="about">{content}</div>

Go template layouts (_layout.tmpl) get the content through [[ content ]].