Eleventy Supplied Data

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, when enabled using pagination in front matter. 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 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 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: "",
};

• Note that page.lang is only available when the i18n plugin has been added to your configuration file.

Feature Availability Jump to heading #

The data in page is also available as:

• this.page on Shortcodes
• this.page on Filters, Transforms, and Linters Added in v2.0.0
• page on Collection entries Added in v2.0.0

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.

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

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.

If you absolutely need a file extension on your output, you might use it like this:

---
permalink: "{{ page.filePathStem }}.html"
---

This example output uses the above permalink value.

Changing your project default permalinks Jump to heading #

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.

module.exports = function(eleventyConfig) {
  eleventyConfig.addGlobalData("permalink", () => {
    return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
  });
};

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

  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:

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

<meta name="generator" content="{{ eleventy.generator }}">

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

Learn more Jump to heading #

• Eleventy-supplied Environment Variables on process.env
• Serverless
  • Dynamic Slugs and Serverless Global Data.
  • event.queryStringParameters, which are very similar to URL.searchParams. It’s an object representing the name/value pairs for things after the ? in a URL.

Environment Variables on process.env Jump to heading #

• Read more about Eleventy-supplied environment variables.

Other pages in Using Data:

• Configure your Templates
• Eleventy Supplied Data
• Data Cascade
  • Front Matter Data
    • Custom Front Matter
  • Template & Directory Data Files
  • Global Data Files
    • Data Preprocessing
  • Data Deep Merge
  • Config Global Data
  • Computed Data
• Environment Variables
• JavaScript Data Files
• Custom Data File Formats