Mix and match JSON, YAML, YAML front matter, and data stored in the Gruntfile however you want.
Any of the following data formats may be used:
my-data.json
my-data.yml
Go to options.data to learn about supplying data to your templates →
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 }}.
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"
}Here is the same in YAML format: my-template.yml
title: Assemble
author: Brian WoodwardAnd this template:
my-template.hbs
<h1>{{ title }}</h1>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>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>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"
}myTemplate.hbs:
{{myData.title}}