11ty如何生成所有集合的列表

Question

我有一个简单的 Eleventy 网站 v0.11.0

我在前端使用标签来生成集合。

例如：

---
title: Some post
tags:
 - apple
 - banana
 - soccer
---

我想为每个标签/集合显示一个列表，但我不知道该怎么做。

Answer 1

我可以通过在我的 .eleventy 文件中创建一个新集合来让它工作...

    eleventyConfig.addCollection("tagsList", function(collectionApi) {
        const tagsList = new Set();
        collectionApi.getAll().map( item => {
            if (item.data.tags) { // handle pages that don't have tags
                item.data.tags.map( tag => tagsList.add(tag))
            }
        });
        return tagsList;
    });

然后在模板中：

{% for tag in collections.tagsList %}
    <a href="/tags/{{tag}}">{{tag}}</a>
{% endfor %}

但这感觉很老套，我怀疑一定有更好的方法来做到这一点。

Answer 2

你自己的答案对我来说似乎很正确。一些cmets：

• 您正在使用addGlobalData() 方法创建custom global data，但访问数据时就像是collection (collections.tagsList)。我不知道这怎么可能，但也许我只是遇到了一些问题，因为我根本无法让 addGlobalData() 工作。
• 创建自定义全局数据 (addGlobalData()) 的替代方法是创建一个集合 (addCollection())。这就是我在我的 11ty 网站上所做的：I create a collection of tags in my .eleventy.config.js。看起来像11ty/eleventy-base-blog also uses a collection of tags。
• Array.prototype.map() 返回一个新数组。您的代码使用 map() 两次，但不使用它们的返回值（即新数组）。如果不需要新数组，使用Array.prototype.forEach() 会更有意义。

以下是我创建集合的方式（与您的解决方案非常相似）：

config.addCollection('tagsList', (collectionApi) => {
  const tagsSet = new Set()
  collectionApi.getAll().forEach((item) => {
    if (!item.data.tags) return
    item.data.tags.forEach((tag) => tagsSet.add(tag))
  })
  return tagsSet
})

在模板中的用法是一样的。

奖励：过滤（不包括标签“foo”和“bar”）和字母排序：

config.addCollection('tagsList', (collectionApi) => {
  const tagsSet = new Set()
  collectionApi.getAll().forEach((item) => {
    if (!item.data.tags) return
    item.data.tags
      .filter((tag) => !['foo', 'bar'].includes(tag))
      .forEach((tag) => tagsSet.add(tag))
  })
  return [...tagsSet].sort((a, b) => b.localeCompare(a))
})

Answer 3

我的工作代码版本

      // Display tag list on page
  eleventyConfig.addCollection('tagsList', function (collectionApi) {
    const tagsList = new Set()
    collectionApi.getAll().map((item) => {
      if (item.data.tags) {
        // handle pages that don't have tags
        item.data.tags.filter((tag) => !['yourtag'].includes(tag)).map((tag) => tagsList.add(tag))
      }
    })
    return tagsList
  })