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

Question

我有一个简单的十一网站 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 %}

但这感觉很hacky，我怀疑必须有更好的方法来做到这一点。

Answer 2

我的工作代码版本

      // 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
  })

Answer 3

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

• 您正在使用该方法创建自定义全局数据addGlobalData()，但访问数据就像它是一个集合( collections.tagsList)。我不知道这怎么可能，但也许我只是遇到了一些问题，因为我根本无法addGlobalData()上班。
• 创建自定义全局数据 ( ) 的替代方法addGlobalData()是创建集合 ( addCollection())。这就是我在我的 11ty 网站上所做的：我在我的.eleventy.config.js. 看起来11ty/eleventy-base-blog 也使用了 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))
})