Eleventy collections using the built in tags key

As the Eleventy Documentation lays out, using the tags key in your front matter or JSON helps create collections of content. This is the primary function of Eleventy tags and is an inherent method for organizing collections.

Lets break down how this can be applied to a category named "graphic design".

Category file structure

Here is what the file structure would look like for the category folder graphic-design. This includes any .md (Markdown) or .html files that represent your posts for the category.

/graphic-design
  - graphic-design.json
  - index.njk
  - post1.md
  - post2.md

graphic-design.json

Instead of adding the tags key and value to each of the posts front matter, we can just add it once in a JSON file with the same name as the folder.

Apply metadata to a group of files

In Eleventy, when you place a JSON file, with the same name, as the folder, within that folder, the data from the JSON file is automatically applied to all files within that folder. This mechanism is a convenient way to apply metadata to a group of files without having to manually include it in each file.

{
	"layout": "post.njk",
	"author": "Jeremy Faucher",
	"tags": ["graphicDesignPosts", "blog"],
	"tag": ["graphic-design-post"],
	"categorySlug": "graphic-design/",
	"categoryName": "Graphic Design"
}

Using the Eleventy built in tags key for each post in graphic design we can call the graphicDesignPosts value to create the collection.

Not to be confused with tags, here you can also see I'm using the tag key name by choice, to get pages and posts in the loop. More on this below in categories.njk.

index.njk

This is the index page category, and the front matter here defines the metadata for this page.

---
layout: base.njk
tags: blogPages
tag: graphic-design-page
allPosts: allPosts
eleventyExcludeFromCollections: true
---
{% include 'category.njk' %}

The {% include 'category.njk' %} statement pulls in the category.njk file, which contains the logic for displaying the posts in the graphicDesignPosts collection. This is where we can loop over all the categories in one place.

categories.njk

This file conditionally renders a list of posts from the graphicDesignPosts collection, if the tag value equals graphic-design-page. It then loops through the graphicDesignPosts collection in reverse order, including the post-card.njk template for each post to display them as cards within a grid layout. This structure allows for dynamic rendering of different post collections based on the page's tag.

<section class="container blog">
<ul class="grid col-three">
{%- elif tag == 'web-design-page' -%}
{%- for post in collections.graphicDesignPosts | reverse -%}
{%- include 'post-card.njk' -%}
{%- endfor -%}
{%- endif -%}
</ul>
</section>

There you have it!

We used the built in Eleventy tags key to group collections and added our own tag key to get the pages and posts.

Checkout my Epic CSS Eleventy theme to see this in action.