Step 3. Scoped and Global Data

Data is an important concept in 11ty and many sites are driven by data held locally or in an API. You could create complex management workflows in WordPress and use the API to render the site statically in 11ty. We're not going to look at any complex cases but anythink you can get into JS natively you can work with.

11ty has a Data Cascade which merges all data accessible by an 11ty page to a single object. Before we let 11ty loose on a piece of data, let's review the cascade even though it will have some concepts and terms you are not yet familiar with. Don't worry, we won't hang around here long.

11ty Data Cascade

When you're in a template, you have a single data object to operate on. Behind the scenes it is actually mashed together from a bunch of different sources. The way 11ty chooses which value to pick if there are collisions is the Data Cascade. It is as follows, in order from highest to lowest specificity:

Computed Data is computed directly before the templates are rendered. They cannot be used to configure templates such as changing layout, it's too late for that. A lot of the magic functions of 11ty such as changing URLs is done with computed data. We're unlikely to cover this in detail but I may mention it when we use functions that rely on it.

Front Matter is an extremely important concept almost any implementation of 11ty will utilize. It is a way to inject data into the cascade before you process a source template. You can use it in any template type, and it is simply data object offset by three hyphens (---) at the head of a template.

Template and Directory Data Files are data files that reference a specific template. Think of template files almost like external Front Matter and Directory Data Files as the same object but applied to an entire file heirarchy.

Front Matter Data in Layouts is Front Matter you will mostly use to establish defaults for templates that use the layout. One common use I've done for this is to set a default date format for everything in my master layout.

Configuration API Global Data is data you set in the 11ty config file that we used last step to set up the passthrough copy. This is often a good place to do post-processing of data as you're in a JS function so you have a lot of power.

Global Data Files means any data file in the _data folder. It's exposed to everything so it's a great choice for data used site-wide such as global navigation.

Don't spend too much time worrying about this at the moment, just keep think about which part of your template cascade actually needs to work with the data.

Let's add a global data file with our social links that we might want to render in a site footer in _data/social.json:

{
    "LinkedIn": "https://www.linkedin.com/in/bigdog",
    "Blue Sky": "https://bsky.app/bigdog",
    "Mastodon": "https://mastodon.social/bigdog"
}

Then I create a homepage finally, index.md:

{% for link in social %}
- [ {{ link[0] }} ]( {{ link[1] }} )
{% endfor %}

Wait, what? Does that actually work? Yep! Both Markdown and HTML templates are processed as Liquid templates so you have a template engine with some logic out of the box.

There are a few special data structures in 11ty Front Matter we should set up to grab those blog articles and put them the homepage. Let's add a Front Matter block to each article in /blog/:

---
tags: [blog]
title: A Lunch
---

tags is a special value that inserts a template into an 11ty Collection. Collections are ways to easily grab a group of templates that are related. Let's add a second loop to the homeprage to grab those articles:

{% for link in collections.blog %}
- [ {{ link.data.title }} ]( {{ link.url }} )
{% endfor %}

You know, this is nott the cleanest programming exactly but it is working and we have a homepage with a blog feed!