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

Eleventy Documentation

WARNING:
This is an older version of Eleventy. Go to the newest Eleventy docs (current path: /docs/data-eleventy-supplied/) or the full release history.
Menu

IndieWeb Avatar for https://www.11ty.dev/Eleventy runs npm install 352% faster than Gatsby.

Eleventy Supplied Data Jump to heading

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

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

  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:

Learn more Jump to heading

Play Video: eleventy.version and eleventy.generator Data (Weekly №7) eleventy.version and eleventy.generator Data (Weekly №7) ▶3m55s

Environment Variables on process.env Jump to heading

Other pages in Using Data: