Skip to navigation Skip to main content
11ty Logo Sustainability Fundraising
Eleventy
Eleventy Documentation
Stable
2.0.1
Canary
3.0.0-alpha.10
Toggle Menu
Eleventy 5.81s
Gatsby 43.36s

Front Matter Data

Contents

Add data in your template front matter, like this:

Syntax YAML
---
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 Jump to heading

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 Jump to heading

When the data is merged in the Eleventy Data Cascade, the order of priority for sources of data is (from highest priority to lowest):

  1. Computed Data
  2. Front Matter Data in a Template β¬…
  3. Template Data Files
  4. Directory Data Files (and ascending Parent Directories)
  5. Front Matter Data in Layouts (this moved in 1.0)
  6. Configuration API Global Data
  7. Global Data Files

Alternative Front Matter Formats Jump to heading

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 for JavaScript object literals in front matter (some aliases are also included).

Change the default format project-wide Jump to heading

By default, yaml is used when a front matter syntax is not explicitly specified. You can change this project-wide with:

Filename .eleventy.js
module.exports = function (eleventyConfig) {
eleventyConfig.setFrontMatterParsingOptions({
language: "json", // default is "yaml"
});
};

Add your own format Jump to heading

You can customize Front Matter Parsing in Eleventy to add your own custom format, and we provide examples for:

JSON Front Matter Jump to heading

---json
{
"title": "My page title"
}
---

<!DOCTYPE html>
<html>
…
</html>

JavaScript Object Front Matter Jump to heading

This method makes use of a JavaScript Object in front matter. You can also easily extend Eleventy to add arbitrary JavaScript in your front matter too!

Warning: while Nunjucks and Liquid syntax are similar, the following example will not work in Liquid. Liquid does not allow function execution in output (e.g. {{ currentDate() }}).

Syntax Nunjucks
---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>

Advanced: Customize Front Matter Parsing Jump to heading

Configure front matter for customized excerpts, TOML parsing, and more.

From the Community Jump to heading

Γ—37 resources courtesy of 11tybundle.dev curated by IndieWeb Avatar for https://www.bobmonsour.com/Bob Monsour

Expand to see 32 more resources.

Other pages in Data Cascade: