- Stable
3.0.0
Toggle Menu
5.81s
40.14s
Front Matter Data
Contents
Add data in your template front matter, like this:
---
title: My page title
---
<!doctype html>
<html>
β¦
The above is using YAML syntax. You can use other formats too.
Locally assigned front matter values override things further up the layout chain. Note also that layouts can contain front matter variables that you can use in your local template. Leaf template front matter takes precedence over layout front matter. Read more about Layouts.
Note that only the permalink
and eleventyComputed
front matter values can contain variables and shortcodes like you would use in the body of your templates. If you need to use variables or shortcodes in other front matter values, use eleventyComputed
to set them.
Template Configuration
Eleventy allows many options to control how your template works. The most popular is permalink
, which allows you to change where the file goes on the file system. You can set these options in your front matter, or anywhere else in the Data Cascade. Read more about Template Configuration.
Sources of Data
When the data is merged in the Eleventy Data Cascade, the order of priority for sources of data is (from highest priority to lowest):
- Computed Data
- Front Matter Data in a Template β¬
- Template Data Files
- Directory Data Files (and ascending Parent Directories)
- Front Matter Data in Layouts (this moved in 1.0)
- Configuration API Global Data
- Global Data Files
Front Matter Formats
Eleventy uses the gray-matter
package for front matter processing. gray-matter
(and thus, Eleventy) includes support out of the box for yaml
, json
, and js
front matter (with some aliases also included).
Change the default format project-wide
By default, yaml
is used when a front matter syntax is not explicitly specified. You can change this project-wide with:
export default function (eleventyConfig) {
eleventyConfig.setFrontMatterParsingOptions({
language: "js", // default is "yaml"
});
};
module.exports = function (eleventyConfig) {
eleventyConfig.setFrontMatterParsingOptions({
language: "js", // default is "yaml"
});
};
JSON Front Matter
---json
{
"title": "My page title"
}
---
<!DOCTYPE html>
<html>
β¦
</html>
JavaScript Front Matter
Added in v3.0.0You can use any arbitrary JavaScript here and weβll export all of the top level variables and functions to your template. This uses the node-retrieve-globals
library.
---js
const title = "My page title";
function currentDate() {
return (new Date()).toLocaleString();
}
---
<h1>{{ title }}</h1>
<p>Published on {{ currentDate() }}</p>
Warning: while Nunjucks and Liquid syntax are similar, the above example will not work in Liquid. Liquid does not allow function execution in output (e.g. {{ currentDate() }}
).
More Advanced Examples of JavaScript Front Matter
---js
// async-friendly
const myAsyncString = await Promise.resolve("HELLO FROM THE OTHER SIDE");
// export via destructuring assignment
const { myKey } = { myKey: "myValue" };
const [ first, second ] = [ "first", "second" ];
// export via dynamic import
const { noop } = await import("@zachleat/noop");
// access Node.js globals like console.log
console.log({ noop });
---
<!-- The template content goes here -->
JavaScript Object Front Matter
In previous versions of Eleventy, js
front matter was required to use a JavaScript object notation. This method is still supported moving forward.
---js
{
title: "My page title",
currentDate: function() {
// You can have a JavaScript function here!
return (new Date()).toLocaleString();
}
}
---
<h1>{{ title }}</h1>
<p>Published on {{ currentDate() }}</p>
Warning: while Nunjucks and Liquid syntax are similar, the above example will not work in Liquid. Liquid does not allow function execution in output (e.g. {{ currentDate() }}
).
Add your own format
You can customize Front Matter Parsing in Eleventy to add your own custom format, and we provide examples for:
- JavaScript in front matter.
- TOML in front matter.
- You can also configure front matter for customized excerpts.
From the Community
Γ41 resources via 11tybundle.dev curated by Bob Monsour.