Skip to navigation Skip to main content
Eleventy
Eleventy Documentation
Stable
2.0.1
Toggle Menu
Eleventy 5.81s
Gatsby 43.36s

Eleventy Supplied Data

Contents

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

page Variable

const page = {
// URL can be used in <a href> to link to other templates
// NOTE: This value will be `false` if `permalink` is set to `false`.
url: "/current/page/myFile/",

// For permalinks: inputPath filename minus template file extension
fileSlug: "myFile",

// For permalinks: inputPath minus template file extension
filePathStem: "/current/page/myFile",

// JS Date object for current page (used to sort collections)
date: new Date(),

// The path to the original source file for the template
// NOTE: this includes your input directory path!
inputPath: "./current/page/myFile.md",

// Depends on your output directory (the default is _site)
// You should probably use `url` instead.
// NOTE: This value will be `false` if `permalink` is set to `false`.
outputPath: "./_site/current/page/myFile/index.html",

// Useful with `page.filePathStem` when using custom file extensions.
outputFileExtension: "html",

// Comma separated list of template syntaxes processing this template
// Added in 2.0+
templateSyntax: "liquid,md",

// The raw unparsed/unrendered plaintext content for the current template
// Added in 3.0+
rawInput: "<!doctype html>…"

// Available in 2.0 with the i18n plugin
// The default is the value of `defaultLanguage` passed to the i18n plugin
lang: "",
};

Feature Availability

The data in page is also available as:

date

The date associated with the page. Defaults to the content’s file created date, but can be overridden. Read more at Content Dates.

fileSlug

The fileSlug variable is mapped from inputPath, and is useful for creating your own clean permalinks.

inputPath page.fileSlug Result
"2018-01-01.md" "2018-01-01"
"2018-01-01-myFile.md" "myFile"
"myDir/myFile.md" "myFile"

fileSlug returns information on the parent directory if the file is an index template:

inputPath page.fileSlug Result
"index.md" "" (empty)
"myDir/index.md" "myDir"
"myDir/2018-01-01-index.md" "myDir"
"2018-01-01-myDir/index.md" "myDir" Added in v2.0.0

filePathStem

The filePathStem variable is mapped from inputPath, and is useful if you’ve inherited a project that doesn’t use clean permalinks.

You can use this feature to globally change your project’s default permalinks but make sure you also read the section about Trailing Slashes.

INFO:
Careful with this one! Remember the recommendation to leave off the file extension from URLs in Cool URIs don’t change.

If you want a file extension in your URL, you might use it like this:

Syntax YAML Front Matter
---
permalink: "{{ page.filePathStem }}.html"
---

This example output uses the above permalink value.

inputPath page.filePathStem Result Example Output
"2018-01-01-myFile.md" "myFile" myFile.html
"myDir/myFile.md" "myDir/myFile" myDir/myFile.html

eleventy Variable

const eleventy = {

// Eleventy version
version: "1.0.1",

// For use with `<meta name="generator">`
generator: "Eleventy v1.0.1",

// Read more about their `process.env` counterparts below
env: {
// Absolute path to the directory in which
// you’ve run the Eleventy command.
root: "/Users/zachleat/myProject/",

// Absolute path to the current config file
config: "/Users/zachleat/myProject/.eleventy.js",

// The method, either `cli` or `script`
source: "cli",

// One of `serve`, `watch`, or `build`
runMode: "build", // New in v2.0.0
},

// Project root-relative normalized paths, new in v3.0.0
directories: {
"input": "./",
"includes": "./_includes/",
"data": "./_data/",
"output": "./_site/"
},

};
  • Added in v3.0.0eleventy.directories contains project-root relative normalized paths for the important Eleventy directories: input, includes, layouts (if used), data, and output.

Feature Availability

The data in eleventy is also available as:

  • this.eleventy on Shortcodes Added in v2.0.0
  • this.eleventy on Filters Added in v2.0.0

Use with meta name="generator"

It’s helpful if you add <meta name="generator"> to your existing Eleventy project as shown below. Learn more from David Darnes’ blog post: You should add a generator tag to your Eleventy site.

Syntax Nunjucks, Liquid
<meta name="generator" content="{{ eleventy.generator }}">

These videos also provide some additional context as to why this is important:

Learn more

Environment Variables on process.env

Frozen Data

Starting in Eleventy 3.0, the pkg, eleventy, page, content, and collections properties are now frozen from external modification to prevent accidental overrides interfering with Eleventy internals.

You can temporarily opt-out of the behavior using:

eleventy.config.js
export default function(eleventyConfig) {
eleventyConfig.setFreezeReservedData(false);
};
module.exports = function(eleventyConfig) {
eleventyConfig.setFreezeReservedData(false);
};

Other pages in Using Data: