Custom Data File Formats New in v0.10.0 #
Out of the box, Eleventy supports arbitrary JavaScript and JSON for both template and directory data files as well as global data.
Maybe you want to add support for TOML or YAML too! Any text format will do.
Note that you can also add Custom Front Matter Formats as well.
Examples #
YAML #
Here we’re using the js-yaml
package. Don’t forget to npm install js-yaml --save
.
const yaml = require("js-yaml");
module.exports = eleventyConfig => {
eleventyConfig.addDataExtension("yaml", contents => yaml.safeLoad(contents));
};
TOML #
Here we’re using the toml
package. Don’t forget to npm install toml --save
.
const toml = require("toml");
module.exports = eleventyConfig => {
eleventyConfig.addDataExtension("toml", contents => toml.parse(contents));
};
A custom JSON file extension #
module.exports = eleventyConfig => {
eleventyConfig.addDataExtension("geojson", contents => JSON.parse(contents));
};
Ordering in the Data Cascade #
Note that in the data cascade there is a specific conflict resolution order when the same keys are used in data files. For example, JavaScript files take priority over JSON. These new custom data file formats are treated as lower priority than both JavaScript and JSON.
If you add multiple file extensions, the latter ones take priority over the earlier ones. In the following example, if there is ever conflicting data between *.toml
and *.yaml
files, the yaml
file will take precedence.
const toml = require("toml");
const yaml = require("js-yaml");
module.exports = eleventyConfig => {
// Lower priority
eleventyConfig.addDataExtension("toml", contents => toml.parse(contents));
// Higher priority
eleventyConfig.addDataExtension("yaml", contents => yaml.safeLoad(contents));
};
Example #
Consider the template data file search for a my-first-blog-post.md
file. The order with custom toml
and yaml
formats (as seen above) will go as follows:
my-first-blog-post.11tydata.js
my-first-blog-post.11tydata.json
my-first-blog-post.11tydata.yaml
(custom)my-first-blog-post.11tydata.toml
(custom)my-first-blog-post.json
my-first-blog-post.yaml
(custom)my-first-blog-post.toml
(custom)
This same ordering would be used for template directory data files as well.
Other pages in Using Data:
- Configure your Templates
- Eleventy Supplied Data
- Data Cascade
- JavaScript Data Files
- Custom Data File Formats