Content files are stored in the content folder. Files in this folder that have .md extension, have YAML front matter and are written in markdown.

---
Page Variables in YAML format
---

# This is a markdown h1

This is markdown text

Front matter parameters are accessible in a layout using the {{ page.params }} object.

The markdown content (that comes after the front matter) is rendered in a layout file using {{ page.content }}

Front Matter

The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines. Here is a basic example:

---
title: Hello World!
template: home
image: images/cat.png
---

Special Front Matter Parameters

The following front matter fields are reserved and have special functionality.

  • title - the title of the page. If a title was defined in the front matter its value will be used, otherwise the page's filename will be used as the title.
  • template - the layout file to be used. For example if you have a file in layouts called home.html and you want to use that layout you would set this value to template: home
  • date - if date was defined in front-matter its value will be used, otherwise the page's file creation date will be used.
  • url - the url of the page relative to the site root including generated filename and excluding any base URL.

Markdown

Under the front matter you can write any markdown content as normal. The markdown content is rendered in a layout using {{ page.content }}

---
title: Hello World!
template: home
---

## This is a heading 2

some paragraph text is written here

* list item 1
* list item 2
<!-- layouts/home.html -->

<div class="home">
    <h1>{{ page.params.title }}</h1>
    {{ page.content }}
</div>

Will output

<div clasc="home">
    <h1>Hello World!</h1>
    <h2>This is a heading 2</h2>
    <p>some paragraph text is written here</p>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
    </ul>
</div>

Linking Content to Layouts

Unlike other static site generators which often infer which layout is used based on where the markdown files are placed in the content directory, Unibit requires that you explicitly set the layout in the front matter.

Every markdown file should have template parameter that defines which layout file will be used to render the page. In the code example below setting template: home will use the layout file found in layouts/home.html

---
title: Hello World!
template: home # link this content to `layouts/home.html`
----

Front Matter Page Variables

You may define any variables you like in front matter. These variables will be available as page variables in layout files in the page.params object.

Take the following front matter defined in content/services.md

# content/services.md

---
title: Services
template: services
subHeading: View our services
---

This would render the content using the layout layouts/services.html

<!-- layouts/services.html -->

<div class="services">
    <h2>{{ page.params.subHeading }}</h2>
</div>

Inside of the layout file you can access the frontmatter parameters by accessing page.paramsand then the name of your front matter variable.