11ty

Eleventy Documentation

This documentation is for an older version. Go to the newest Eleventy docs or check out the full release history.

Documentation Pages

Using Data

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.

Special Front Matter Customizations

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

Special Data Variables

Here are a few data values we supply to your page that you can use in your templates:

page Variable Contents:

{
// URL can be used in <a href> to link to other templates
url: "/current/page/file.html",
// JS Date Object for current page
date: new Date(),
// the path to the original source file for the template
inputPath: "/current/page/file.md",
// New in Eleventy v0.3.4
// mapped from inputPath, useful for clean permalinks
fileSlug: "file"
// More inputPath => fileSlug examples:
// 2018-01-01-file.md => file
// dir/file.md => file
// Returns parent directory if an `index` template
// index.md => "" (empty)
// dir/index.md => dir
// dir/2018-01-01-index.md => dir
}

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() {
    // wow you can have a function in here
    return (new Date()).toLocaleString();
  }
}
---
<!doctype html>
<html>
…