Theming

April 21, 2025 at 10:09 AM • 2 min read • 332 words

Hello World Theme

The smallest possible Snout.nu theme consists of metadata and a single page. This is enough to fully override the default homepage.

To overwrite the default page, create a page with the slug set to /.

{
  "name": "Hello World",
  "license": "CC0",
  "author": "You",
  "pages": {
    "/": "<!DOCTYPE html><h1>Hello world</h1>"
  }
}

When this theme is applied, visiting the root of the site will render the provided HTML.

Using Liquid in Pages

You can use the page editor to make custom pages using Liquid. Pages are defined as HTML documents, but Liquid expressions may be embedded anywhere in the markup.

For example, a page may reference global blog metadata directly:

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

If this page is assigned to /, it will overwrite the default page and become the new homepage.

Liquid is rendered server-side, so all expressions are resolved before the page is delivered to the browser.

Exposed Variables

Snout.nu exposes several variables to all templates by default.

The {{ title }}, {{ description }}, and {{ subdomain }} of your blog are always available. These values are commonly used for headers, metadata, and navigation.

<header>
  <h1>{{ title }}</h1>
  <span>{{ subdomain }}.snout.nu</span>
</header>

These variables are read-only and reflect the current blog configuration.

Posts Collection

The posts collection exposes all published posts as a list of objects.

Each post contains a title, content, and date:

[
  {
    "title": "Hello world!",
    "content": "Content in markdown",
    "date": "2025-04-17T23:33:42.365Z"
  }
]

This collection can be iterated over using Liquid. A common pattern is to render a list of posts on the homepage or an index page.

<ul>
  {% for post in posts %}
    <li>
      <h2>{{ post.title }}</h2>
      <small>{{ post.date }}</small>
    </li>
  {% endfor %}
</ul>

The content field contains the post body, rendered from Markdown. It may be displayed directly inside a template:

<article>
  <h1>{{ post.title }}</h1>
  {{ post.content }}
</article>