Eleventy elements

Frontmatter

Frontmatter is the information that comes before the main content of a document. It is often used to describe the document's author and publishing date, and to provide keywords associated with the document.

• layout: Eleventy Layouts are special templates that can be used to wrap other content.
• title: Add data in your template front matter.
• permalink: You can customize the default location of templates to the output directory using Eleventy’s permalinks feature.
• dynamicPermalink: Use the dynamicPermalink option in your front matter to disable this on a per-template basis.
• permalinkBypassOutputDir: To remap your template’s output to a directory independent of the output directory (--output), use permalinkBypassOutputDir: true in your front matter.
• tags: While pagination allows you to iterate over a data set to create multiple templates, a collection allows you to group content in interesting ways. A piece of content can be a part of multiple collections, if you assign the same string value to the tags key in the front matter.
• override:tags: As of Eleventy 1.0, the Data Cascade is combined using deep data merge by default, which means tags are merged together with tags assigned higher in the data cascade (the Arrays are combined). To redefine tags in the front matter use the override: prefix.
• pagination: Pagination allows you to iterate over a data set and create multiple files from a single template. The input data can be in the form of an array or object defined in your frontmatter or in global data, or you can paginate a collection to make an easily digestible list of your posts.
• date: Add a date key to your front matter to override the default date (file creation) and customize how the file is sorted in a collection.
• eleventyImport.collections: Use the eleventyImport object to declare any collections you use (data cascade friendly) to inform the relationships for smarter incremental builds. This is an Array of collection names.
• eleventyExcludeFromCollections: In front matter (or further upstream in the data cascade), set the eleventyExcludeFromCollections option to true to opt out of specific pieces of content added to all collections (including collections.all, collections set using tags, or collections added from the Configuration API in your config file). Useful for your RSS feed, sitemap.xml, custom templated .htaccess files, et cetera.
• templateEngineOverride: templateEngineOverride in the template’s front matter. Should be one templating engine (liquid) or markdown paired with another templating engine (liquid,md).
• eleventyComputed: At the end of the Data Cascade you may want to inject Data properties into your data object that are based on other data values. To do that you can use the new eleventyComputed feature.

Data

Exposed via variables that can be used inside templates and layouts using templating syntax. The data for a given template is aggregated through a process called the data cascade.

• content: In Eleventy, data is merged from multiple different sources before the template is rendered. The data is merged in what Eleventy calls the Data Cascade.
• collections.post: To reference this collection and make a list of all posts, use the collections object in any template.
• collections.all: By default Eleventy puts all of your content (independent of whether or not it has any assigned tags) into the collections.all Collection. This allows you to iterate over all of your content inside of a template.
• post.data.title: To reference this collection and make a list of all posts, use the collections object in any template.

Page variables

Exposed via variables that can be used inside templates and layouts using templating syntax. The data for a given template is aggregated through a process called the data cascade.

• page.inputPath: Edit your layout file to add the link. Provide the URL to the base of your repo and use the Eleventy provided {{ page.inputPath }} variable to point to the correct input file. Yes, this will also work with paginated templates.
• page.url: page.url is useful for finding the current page in a collection.
• page.fileSlug: The fileSlug variable is mapped from inputPath, and is useful for creating your own clean permalinks.
• page.filePathStem: The filePathStem variable is mapped from inputPath, and is useful if you’ve inherited a project that doesn’t use clean permalinks.
• page.date: The date associated with the page. Defaults to the content’s file created date but can be overridden.
• inputPath: The path to the original source file for the template, this will include your input directory path!
• outputPath: 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.
• outputFileExtension: Useful with page.filePathStem when using custom file extensions.
• lang: The default is the value of defaultLanguage passed to the i18n plugin.
• this.page: The data in page is also available as shortcodes, filters, transforms and linters.
• page: Has information about the current page.

Collection item data structure

Exposed via variables that can be used inside templates and layouts using templating syntax. The data for a given template is aggregated through a process called the data cascade.

• data.title: all data for this piece of content (includes any data inherited from layouts)
• data.tags: all data for this piece of content (includes any data inherited from layouts)
• data.date: all data for this piece of content (includes any data inherited from layouts)
• data.content: the rendered content of this template. This does not include layout wrappers.

Pagination

Pagination allows you to iterate over a data set and create multiple files from a single template. The input data can be in the form of an array or object defined in your frontmatter or in global data, or you can paginate a collection to make an easily digestible list of your posts.

• pagination.items: Array of current page’s chunk of data.
• pagination.pages: Array of all chunks of paginated data (in order).
• pagination.pageNumber: current page number, 0 indexed.
• pageEntry: Use pageEntry to access the original content.

Cascade

In Eleventy, data is merged from multiple different sources before the template is rendered. The data is merged in what Eleventy calls the Data Cascade.

• 7. Computed data: Highest precedence. Inject data properties into your data object that are based on other data values with the eleventyComputed feature.
• 6. Template frontmatter: locally assigned front matter values override things further up the layout chain.
• 5. Template data files: specific files of Json or JavaScript data that are paired by name with specific pages.
• 4. Directory data files: shared between multiple pages in a specific directory in your project.
• 3. Layout frontmatter: helpful for creating template inheritance features to show different data on each section based on the layout.
• 2. Config global data: use the configuration API to add global data to your templates.
• 1. Global data: Weakest precedence. JavaScript or Json files stored by default in the src directory of your project.