Stand with Ukraine 🇺🇦
Eleventy
The possum is Eleventy’s mascot

Eleventy Documentation

Menu

Eleventy Supplied Data Jump to heading

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: "",
};

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

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"

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.

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

Coming soon in v2.0.0-canary.9 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}`;
  });
};
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 New in v1.0.0 Jump to heading 

let eleventy = {

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

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

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

};

Learn more about:

Eleventy Leaderboards:

Environment Variables on process.env Jump to heading

Other pages in Using Data: