External Data

Acetate can include data from external JSON and YAML files or you can define function to load data. To load data files place, .json, .yaml or .yml files in your source folder. In your config file you can then declare those files as data sources.

acetate.config.js

acetate.data('projects', 'projects.json');
acetate.data('people', 'people.yaml');
acetate.data('status', function (callback) {
  // get data, via api request ect...
  // callback with an error if something goes wrong
  callback(error, data);
});

Using Data in your Templates

Once you have defined your data sources you can access them in your pages under the data key.

{{ data.projects }}
{{ data.people }}
{{ data.status }}

Data Types

Acetate supports JSON and YAML. The rest of these examples will use define data sources locally on the page for clarity.

JSON

acetate.config.js

acetate.data('company', 'company.json');

src/company.json

{
    "name": "ACME Widgets",
    "employees": [{
        "name": "Bob",
        "age": 32
    },{
        "name": "Alice",
        "age": 28
    }]
}

src/company.html

---
title: Employee Directory
---


<h1>{{data.company.name}} - {{title}}</h1>
<ul>
{% for employee in data.company.employees %}
    <li>{{employee}} ({{age}})</li>
{% endfor %}
</ul>

YAML

acetate.config.js

acetate.data('company', 'company.yaml');

src/company.yaml

name: ACME Widgets
employees:
    - name: Bob
      age: 32
    - name: Alice
      age: 28

src/company.html

---
title: Employee Directory
---


<h1>{{data.company.name}} {{title}}</h1>
<ul>
{% for employee in data.company.employees %}
    <li>{{employee}} ({{age}})</li>
{% endfor %}
</ul>

Dynamic Data

You can also use functions that query data dynamically at build time. This is great for things that need to come from external sources like an API or a database but don't need to be always up to date.

acetate.config.js

var request = require('request');

module.exports = function (acetate) {
  acetate.data('gists', function(callback){
    request({
      method: 'GET',
      url: 'https://api.github.com/users/patrickarlt/gists',
      json: true,
      headers: {
        'User-Agent': 'request'
      }
    }, function(err, resp, body){
      callback(err, body);
    });
  }
}

src/gists.html

---
title: My Gists
---


<ul>
{% for gist in data.gists %}
    <li><a href="{{gist.html_url">{{gist.description}}</a>)</li>
{% endfor %}
</ul>

Edit this Page on GitHub