11ty

Eleventy Documentation

Documentation Pages

Front Matter Data

Add data in your template front matter, like this:

---
title: My page title
---
<!doctype html>
<html>
…

The above is using YAML syntax.

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.

User Defined Front Matter Customizations

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

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

---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>
  <!-- … -->

Sources of Data

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