Generating Tag Pages with Eleventy and JSON Data

Generating Tag Pages with Eleventy and JSON Data

Eleventy is a powerful static site generator that allows you to work with various data sources, including JSON files. While the official Eleventy documentation covers using collections, it doesn't explicitly mention how to generate tag pages directly from JSON data. In this article, we'll explore a technique for achieving this functionality.

Setting up JSON Data

First, let's assume you have a JSON file containing your data. Each object in the JSON file should have a tags property, which is an array of strings representing the tags associated with that object. Here's an example:

[
{
    "title": "Product 1",
    "description": "This is product 1",
    "tags": ["electronics", "gadgets"]
},
{
    "title": "Product 2",
    "description": "This is product 2",
    "tags": ["clothing", "accessories"]
},
]

Using the Before Field and Setting Up Frontmatter with Javascript

In the provided code snippet, the before field is used to generate the pagination.data array before the actual pagination process. This allows you to transform or filter the data as needed before generating the tag pages.

Here's an example of how you could use the before field to dynamically generate the tag pages:

---js
{
layout: "base",
pagination: {
    data: "JSONfile",
    size: 1,
    alias: "tag",
    before: (paginationData) => Array.from(new Set(paginationData.flatMap((d) => d.tags))),
},
addAllPagesToCollections: true,
permalink: "products/",
}
---

In this example:

• data: "JSONfile" specifies that the pagination data should be loaded from a the named JSON file.
• size: 1 means that each page will contain a single item from the pagination.data array.
• alias: "tag" sets the variable name for the current item in the pagination loop.
• before: (paginationData) => Array.from(new Set(paginationData.flatMap((d) => d.tags))) is the crucial part. Here, we're using the before field to transform the original paginationData (which is the entire JSON file) into an array of unique tag strings. This is achieved by:
  • flatMap((d) => d.tags) - Flattening the array of objects and extracting all the tags into a single array.
  • new Set(...) - Creating a new Set from the flattened array, which automatically removes duplicates.
  • Array.from(...) - Converting the Set back to an array.
• addAllPagesToCollections: true ensures that each generated tag page is added to Eleventy's collections, making it easier to work with the pages later.
• permalink: "products/" sets the permalink structure for the generated tag pages, using the current tag value as the URL slug.
• filter: ["products", "everything"] is an optional filter to include or exclude certain tags from being generated.

By using the before field, you can transform the pagination data in any way you need before generating the tag pages, allowing for more flexibility and customization.

Filtering Items on the Tag Page

To display only the items that belong to the current tag on each tag page, you can use the following code:

{% set filteredItems = [] %}
{% for item in JSONfile %}
{% if tag in item.tags %}
    {% set filteredItems = (filteredItems.push(item), filteredItems) %}
{% endif %}
{% endfor %}

This code loops through the entire JSON file and creates a new array filteredItems containing only the items that have the current tag in their tags array.

You can then use this filteredItems array to render the list of items on the tag page:

    <ul>
{% for item in filteredItems %}
    <li>{{ item.title }}</li>
{% endfor %}
</ul>

By combining the techniques mentioned in this article, you can effectively generate tag pages from JSON data in Eleventy, providing a seamless browsing experience for your users.