Stop forgetting the Eleventy Data Cascade

Eleventy is a great static site generator and one of the best parts of it is The Data Cascade. It's a notably simple way to map data to templates and I mean that in the best possible Simple Made Easy sense. I hope more static site generators steal it.

I wrote this document because I always need to look it up when I come back to Eleventy after a bit. I intend for this summary to help me re-remember by showing the patterns and structure of The Data Cascade all in one place.

In ascending order of precedence:

Global Data Directory:

File:`_data/.(jsonjs)`
Scope:In all templates
Access:{{ <filename>.<key> }}
Examples:Site-wide data such as API keys, header/footer inputs.

Directory Data

File:`.(json11tydata.js)`
Scope:All templates in directory or subdirectories if not overridden
Access:{{ <key> }}
Examples:Section specific overrides like a new default layout, or section specific data to subsequently dynamically generate pages from.

Template Data File

File:`.(json11tydata.js)`
Scope:In template
Access:{{ <key> }}
Examples:This data is the input for this page. Similar to input props for a component or database information for a server rendered page.

Layout Frontmatter

File:_includes/<layout>.njk)
Scope:In template
Access:{{ <key> }}
Examples:Presentational properties to override, such as a layout specific page title.

Template Frontmatter

File:<filename>.md
Scope:In Template
Access:{{ <key> }}
Examples:More common for this to be metadata about this page to be used in listing pages.

Notes:

I hope you find it useful!