Skip to navigation Skip to main content
11ty Logo Sustainability Fundraising
Eleventy
Eleventy Documentation
Sustainability Fundraising
70.3
Versions
Stable
2.0.1
Canary
3.0.0-alpha.17
Toggle Menu
Compare ×4000 file build
Eleventy 1.93s
Gatsby 29.05s

Eleventy Supplied Data

Contents

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

  • pkg: The local project’s package.json values.
  • pagination: Using the pagination key in front matter, this divides data into chunks for multiple output pages. Read more about Pagination.
  • collections: Lists of all of your content, grouped by tags. Read more about Collections
  • page: Has information about the current page (see the code block below for page contents). For example, page.url is useful for finding the current page in a collection. Read more about Collections (look at Example: Navigation Links with an active class added for on the current page).
  • eleventy: Added in v1.0.0 contains Eleventy-specific data from environment variables and the Serverless plugin (if used).

page Variable

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

INFO:
Careful with this one! Remember that Cool URIs 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 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

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
  },

  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

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" Added in v1.0.1

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:

Play Video: Full control over HTML, a look at requiring opt-in for the meta name=generator in Eleventy Full control over HTML, a look at requiring opt-in for the meta name=generator in Eleventy
Play Video: eleventy.version and eleventy.generator Data (Weekly №7) eleventy.version and eleventy.generator Data (Weekly №7) ▶3m55s

Learn more

Environment Variables on process.env

Other pages in Using Data: