Using Data #

Data can be used on a template from multiple different sources.

Sources of Data #

When the data is merged in the Eleventy Data Cascade, the order of priority for sources of data is (from highest priority to lowest):

1. Front Matter Data in a Template
2. Front Matter Data in Layouts
3. Template Data Files
4. Directory Data Files (and ascending Parent Directories)
5. Global Data Files

Eleventy Provided Data Variables #

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

page Variable Contents: #

let page = {
  
  // URL can be used in <a href> to link to other templates
  url: "/current/page/myFile/",
  
  // For permalinks: inputPath filename minus template file extension (New in v0.3.4)
  fileSlug: "myFile",

  // For permalinks: inputPath minus template file extension (New in v0.9.0)
  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.
  outputPath: "./_site/current/page/myFile/index.html"
};

fileSlug New in v0.3.4 #

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 New in v0.9.0 #

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

Example Output below is using the above permalink value.

date #

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

Using Data:

• Data Cascade
  • Front Matter Data
    • Customize Front Matter Parsing
  • Template & Directory Data Files
  • Global Data Files
  • Data Deep Merge
• JavaScript Data Files
• Data Preprocessing