Templates

Templates are the source of content for your site.

You can generate HTML pages from Markdown, Pug, Handlebars, JavaScript, JSON and YAML. The built‑in CSS, Sass and JavaScript compilers bundle imports to generate client‑side assets.

Template data

When a template renders, it is provided with some data. The data includes any values that are set in the template front‑matter, along with any Layout data and Global data. Night Owl also generates some data, which is available in the meta object.

Pug, Markdown and Sass files can all set data using front‑matter. You add front‑matter at the top of your file, surrounded by three hyphens above and below.

---
title: "My blog post"
layout: "/path/to/article"
---

For JavaScript templates, the module’s default export is the data for the template. The same data in a JavaScript template would look like this.

export default {
  title: "My blog post",
  layout: "/path/to/article",
}

Special properties

Some special properties determine how Night Owl handles a template.

url

Night Owl uses file‑based routing to generate URLs.

Use url to create the file in a different location. For example, you could create a custom 404.html page like this.

---
url: "404.html"
---

The page you are looking for couldn't be found.

When a url includes a file extension, it is used in the generated file.

pages

One template can generate multiple pages. See Pages for more details.

tags

A template can be tagged with an array of strings, and they determine how pages are grouped together in Collections. Generate a list of all the pages that use a tag using an Index.

Add tags in your front‑matter. You can use the single line syntax or include tags over separate lines.

---
tags: ["tag1", "tag2"]

tags:
  - "tag1"
  - "tag2"
---

layout

Most templates use a layout to wrap their content in a consistent structure. See Layouts for more details.

index

Create a paginated results page listing other pages or array data. See Index for more details.

render

For most templates, the render function is compiled from either the template or layout file. However, you can include your own render method directly in a JavaScript template.

For example, to create a JSON file, you can combine the url and render properties like this.

export default {
  url: "data.json",
  answer: 42,
  render: function (data) {
    return JSON.stringify(data.answer, null, 2)
  },
}

You can use layout and render together. When both options are used, the layout will wrap the render content.

sort and date

You can control the sort order of your collections with these properties. See Sorting collections for more details.

hide

Templates that are not ready to publish can set hide to true. This prevents Night Owl from generating a file during the build process. This option requires the configuration option excludeHidden to also be enabled.

Generated data

meta

When Night Owl compiles a template, it creates meta data for each of the pages that are generated. This object includes the final url of the page, and the paths to the src and dist file.

Night Owl also sorts every page that will be generated into different collections using tags.

{
  "meta": {
    "src": "src/posts/my-first-post.md",
    "dist": "dist/posts/my-first-post/index.html",
    "url": "/posts/my-first-post/",
    "collections": {
      "all": [...],
      "posts": [...]
    }
  }
}

content

Content is the body of your template after it has been compiled and rendered. For Markdown and Pug, this is a string of HTML. Sass templates produce a CSS string. JavaScript templates can declare anything as their content.

For example, a layout for blog posts might take the content from a Markdown file and insert it into an article element.

extends _/layouts/default

block body
  article
    != content

Which files are templates?

Any files in the src directory which match the templates rules are compiled as templates. By default, any files that start with an underscore, or are located in a directory beginning with an underscore, will be excluded. Any file with an extension that matches a compiler will be compiled as templates.