11tyThe possum is Eleventy’s mascot

Eleventy Documentation

Menu

Front Matter Data #

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.

Front Matter Configuration #

Here are a few special front matter keys you can assign:

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):

  1. Front Matter Data in a Template
  2. Front Matter Data in Layouts
  3. Template Data Files
  4. Directory Data Files (and ascending Parent Directories)
  5. Global Data Files

Alternative Front Matter Formats #

Eleventy uses the gray-matter package for front matter processing. gray-matter includes support for YAML, JSON, and even arbitrary JavaScript front matter.

JSON Front Matter #

---json
{
  "title": "My page title"
}
---
<!doctype html>
<html>
…

JavaScript Front Matter #

Note that Liquid templates do not allow executing a function in output {{ currentDate() }}. However, the following example does work in Nunjucks:

Syntax Nunjucks
---js
{
  title: "My page title",
  currentDate: function() {
    // You can have a JavaScript function here!
    return (new Date()).toLocaleString();
  }
}
---
<!doctype html>
<html>
<!-- … -->
<body>
  <h1>{{ title }}</h1>
  <p>Published on {{ currentDate() }}</p>
  <!-- … -->

Add your own format New in v0.9.0 #

You can customize Front Matter Parsing in Eleventy to add your own custom format. We have an example to do this with support for TOML.

Advanced: Customize Front Matter Parsing New in v0.9.0 #

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