Troubleshooting & How-Tos 📡 🔍 Obsolete

Eleventy data cascade not picking up front matter on layouts

NOTE: This article is out of date and likely obsolete.

Update: This turns out to be a bug only in version 1.0.0, and had already been fixed in 1.0.1.

The Eleventy static site generator will combine information you’ve set in data files as well as front matter in your templates and layouts. (The way it combines them is called the data cascade.) So you can put this in your page template sample.md:

---
title: This is my page
layout: article.njk
---
Lorem ipsum yada yada yaga.

and this in your layout article.njk:

---
pageType: "Tech Article"
---
<html>
<head>{{ title }}</head>
<body>
{{ content | safe }}

<p>This is a {{ pageType }}</p>
</body>
</html>

The layout should be able to use both the title and pageType.

But it wasn’t working. It applied the layout, it filled in everything from the page template, if I set the same variable in the page template it found it, but it just ignored anything I’d set in the layout’s front matter.

Well, in most cases it ignored it. It seemed like some layouts worked and some didn’t, but I couldn’t see any difference between them. All the 11ty documentation and issues and commentary suggested it should work.

I finally figured it out:

  • It works when you set the layout explicitly on the page template like in the example above.
  • It works when you set a default layout for a subdirectory using directoryname.json using { "layout": "mylayout.njk" }
  • It doesn’t work when you set a global default layout in _data/layout.js using module.exports = "mylayout.njk"

I filed an issue with Eleventy, and it turns out that it only affects 1.0.0. They had already fixed it in the work leading up to 1.0.1, so once that’s released, it should work correctly.

Sure enough, when 1.0.1 came out and I upgraded, it worked as expected! Until then, I just added a directoryname.json to each subdirectory with the layout applied there, and the data cascade did what it’s supposed to.