The Data Cascade #

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

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

Example #

---
title: This is a Good Blog Post
tags:
  - CSS
  - HTML
layout: my-layout.njk
---

---
title: This is a Very Good Blog Post
author: Zach
tags:
  - JavaScript
---

Note that when my-template.md and my-layout.njk share data with the same object key (title and tags), the “leaf template” my-template.md takes precedence.

The data cascade results in the following data when my-template.md is rendered:

{
  "title": "This is a Good Blog Post",
  "author": "Zach",
  "tags": [
    "CSS",
    "HTML"
  ],
  "layout": "my-layout.njk"
}

By default, Eleventy does a simple top level merge (Object.assign) from the different data sources. It doesn’t dive any deeper to merge Object literals or Arrays in the data. If you’d like Eleventy to perform deeper data merging, you need to enable the Data Deep Merge option.

Other pages in 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