The Equal Justice Initiative
Eleventy
The possum is Eleventy’s mascot
Eleventy Documentation
Menu
Eleventy 5.81s
Astro 12.52s

Eleventy Supplied Data

Contents

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

page Variable Jump to heading

let 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 will include your input directory path!
inputPath: "./current/page/myFile.md",

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

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

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

Feature Availability Jump to heading

The data in page is also available as:

date Jump to heading

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

fileSlug Jump to heading

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-beta.1

filePathStem Jump to heading

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

INFO:
Careful with this one! Remember that Cool URI’s don’t change.

If you absolutely need a file extension on your output, 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

Added in v2.0.0-beta.1 Deep-link to 3c49f22.

Want to change resource.md to write to /resource.html instead of /resource/index.html? Use this configuration API code sample.

Filename .eleventy.js
module.exports = function(eleventyConfig) {
eleventyConfig.addGlobalData("permalink", () => {
return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
});
};
WARNING:
When using this approach for URLs without trailing slashes (file /resource.html -> url /resource), please do note that using trailing slashes with index.html files (file /resource/index.html -> url /resource/) is a bit friendlier on various Jamstack hosting providers. You may encounter unexpected 404 errors—make sure you study up on how this works and test appropriately!!

eleventy Variable Added in v1.0.0 Jump to heading

let eleventy = {

// Eleventy version
version: "1.0.1", // New in v1.0.1

// For use with `<meta name="generator">`
generator: "Eleventy v1.0.1", // New in 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-beta.2
},

serverless: {
// An object containing the values from any Dynamic URL
// slugs from Serverless paths
// e.g. A slug for /path/:id/ and a URL for /path/1/
// would give { id: 1 }
path: {}

// The `event.queryStringParameters` received from the
// serverless function. Note these are not available in
// Netlify On-demand Builders
// e.g. ?id=1 would be { id: 1 }
query: {},
}

};

Feature Availability Jump to heading

The data in eleventy is also available as:

Use with meta name="generator" Added in v1.0.1 Jump to heading

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

Environment Variables on process.env Jump to heading


Other pages in Using Data: