Data

Mix and match JSON, YAML, YAML front matter, and data stored in the Gruntfile however you want.

Data Formats

Any of the following data formats may be used:

JSON files, such as my-data.json
YAML files, such as my-data.yml
YAML Front-Matter, embedded directly inside the page/template itself

Go to options.data to learn about supplying data to your templates →

Usage examples

Let's start by creating a template, which can be any kind of markdown, text, xml or markup/HTML that we want to use. For this example our template is going to be HTML, and since I'm feeling creative let's call it my-template.hbs.

Now, focusing only on the head of our HTML document, let's add template variables for title and author so that we can later replace them with real data:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{{title}}</title>
    <meta name="author" content="{{author}}">
  </head>
  <body>
  </body>
</html>

Handlebars.js is the default template engine in Assemble, so our variables are wrapped in "Handlebars expressions": {{ and }}.

JSON example

Here is an example of what we might put inside of my-template.json to populate our template with data.

{
  "title ": "Assemble" ,
  "author ": "Brian Woodward" 
 }

YAML example

Here is the same in YAML format: my-template.yml

title: Assemble
author: Brian Woodward

And this template:

my-template.hbs

<h1>{{ title }}</h1>

YAML front-matter example

Or, in cases where we only require simple metadata we can use YAML Front-matter to eliminate the need for an external data file:

---
title: Assemble
author: Brian Woodward
---
<h1>{{ title }}</h1>

Outputs:

<h1>Assemble</h1>
<p>Brian Woodward</p>

Underscore and YAML front-matter

Furthermore, we can optionally use underscore templates in the YAML front-matter to translate external variables into data inside the content:

---
title: <%= some.title.variable %>
author: <%= some.author.variable %>
---
<h1>{{ title }}</h1>
<p>{{ author }}</p>

The "data" Object

Using data.json or data.yml should work, but works a little bit differently than if you put data into a file called myData.json. When the data is in data.json, it's loaded directly into the root of the context...

data.json:

{
  "title ": "My Title" 
 }

myTemplate.hbs:

{{title}}

When used in myData.json, the data can be accessed through the name of the file...

myData.json:

{
  "title ": "My Title" 
 }