Skip to main content

Using variables

Templates have access to a range of variables at runtime. These variables can be used to customise the output of HTML.

Types of variables​

config​

The website-generator.config.json contents are made available in the config variable. See Configuration for more information.

The head variable is an object containing data commonly included in the <head> tag of a website.

NameDescription
head.titleThe title of the Markdown file, defined in front matter.

runtime​

The runtime variable is an object containing data relevant to the time of generation.

NameDescription
runtime.date.yearThe year that the website was generated.

page​

The page variable is an object containing front matter that has been defined on a Markdown file. Despite its name, both page and section templates have access to the page variable.

For example, the following front-matter…

+++
title: My Title
description: My description.
+++

…will create the following properties on the page object:

  • page.title; and
  • page.description.

Some front matter keys are reserved to enable specific features (see Reserved front matter).

section​

The section variable is an object containing front matter that has been defined by all sections that a page or section is in.

Within page templates​

For pages, the section variable contains any front matter that has been defined in _index.md.

For example, with a section and page…

content/my-section/_index.md
content/my-section/my-post.md

…where _index.md contains the following front matter…

content/my-section/_index.md
+++
title = "My Section"
+++

…the templates/section/my-post.hbs template will have access to:

{
  section: {
    title: "My Section",
  }
}

Within section templates​

For sections, in addition to the front matter, an array of each child page's front matter and Markdown is accessible.

content/my-section/_index.md
content/my-section/my-post.md

…where my-post.md contains the following front matter…

content/my-section/my-post.md
+++
title = "My Section"
+++

…the templates/my-section/section.hbs template will have access to detailed information about each child page within the section:

{
  section: {
    title: "My Section",
    children: [
      {
        markdown: {
          content: "",
          matter: {},
          options: {}, // Options referenced internally by website-generator.
        },
        name: "my-post.md",
        filePath: "./content/my-section/my-post.md",
        outputPath: "./build/my-section/my-post/index.html",
        outputURL: "/my-section/my-post/"
      }
    ]
  }
}

Nested sections inherit all section matter from their parent section but can also override values with their own front matter, which will in turn be made available to any children of that section via section.

data​

The data variable is populated whenever a JSON file exists in the same directory as the page or section (see Including JSON).

For example, the following JSON data file…

_data.json
{
  "items": [
    {
      "title": "A"
    },
    {
      "title": "B"
    }
  ],
  "total": 5
}

…can be referenced using data.items or data.total in templates.