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/.(json | js)` |
| Scope: | In all templates | |
| Access: | {{ <filename>.<key> }} | |
| Examples: | Site-wide data such as API keys, header/footer inputs. |
Directory Data
| File: | `.(json | 11tydata.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: | `.(json | 11tydata.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 skipped Custom Global Data and Computed Data in this summary. They're less common and independently understandable from the rest of the Data Cascade.
In Javascript Data Files you can return a function, an async function or promise. This allows you to interact with Databases/APIs at build time.
The data keys are shallow merged via object assign.
I hope you find it useful!