如何创建标签集合和类别集合

Question

我在.eleventy.js文件中有以下两个代码，

    // Tags
    eleventyConfig.addCollection('tagList', collection => {
        const tagsSet = new Set();
        collection.getAll().forEach(item => {
            if (!item.data.tags) return;
            item.data.tags.filter(tag => !['posts', 'all'].includes(tag)).forEach(tag => tagsSet.add(tag));
        });
        return Array.from(tagsSet).sort();
    });

    // Categories
    eleventyConfig.addCollection('categoryList', collection => {
        let catSet = new Set();
        collection.getAll().forEach(item => {
            if (!item.data.categories) return;
            item.data.categories.filter(cat => !['posts', 'all'].includes(cat)).forEach(cat => catSet.add(cat));
        });
        return Array.from(catSet).sort();
    });

我拥有的帖子

---
layout: post
title: 'Whatever'
date: '2021-10-12'
permalink: '{{ title | slug }}/index.html'
categories:
    - code
tags:
    - javascript
    - angular
---

，我正在使用这样的模板来自动生成每个标签的页面（并且类别类似的模板）。

---
layout: page
eleventyComputed:
    title: All posts tagged '{{ tag }}'
    permalink: /tags/{{ tag }}/
pagination:
    data: collections
    size: 1
    alias: tag
    filter:
        - all
        - nav
        - post
        - posts
        - tagList
    addAllPagesToCollections: true
permalink: /tags/{{ tag }}/
headerButton:
    url: '/blog/'
    text: All posts
---

<ul class="unstyled">
    {%- for post in collections[tag].reverse() -%}
    {%- if not post.data.draft -%}
    <li>{% include 'post-listing.njk' %}</li>
    {%- endif -%}
    {%- endfor -%}
</ul>

对于标签，一切正常。我得到了生成的正确页面IE /tags/javaScript，但对于类别，其基于标签而不是类别生成页面。因此，代替/categories/code我最终以/categories/javascript

我假设问题是我的everdentyconfig.addcollection（'categoryList' ）功能，但我不知道为什么。

Answer 1

您的问题可能是模板中的分页。您正在 collections object 对象映射标签（一个特殊的11ty Front Ittribute）与该标签的页面。

由于您正在创建标签和类别作为集合项目的列表，因此您需要为该集合分页。

---
# ...
pagination:
    data: collections.tagList # (or collections.categoryList)
    size: 1
    alias: tag
    # ...
---

这可能会构成问题，因为您正在模板中访问帖子，因此您需要一种将标签/类别映射回帖子列表的方法。您可以通过将收集更改为对象而不是array来解决此问题。

    // Tags
    eleventyConfig.addCollection('tagList', collection => {
        const tagsSet = {};
        collection.getAll().forEach(item => {
            if (!item.data.tags) return;
            item.data.tags.filter(
                tag => !['posts', 'all'].includes(tag)
            ).forEach(
                tag => {
                    if (!tagsSet[tag]) { tagsSet[tag] = []; }
                    tagsSet[tag].push(item)
                }
            );
        });
        return tagsSet;
    });

    // Categories
    eleventyConfig.addCollection('categoryList', collection => {
        let catSet = {};
        collection.getAll().forEach(item => {
            if (!item.data.categories) return;
            item.data.categories.filter(
                cat => !['posts', 'all'].includes(cat)
            ).forEach(
                cat => {
                    if (!catSet[cat]) { catSet[cat] = []; }
                    catSet[cat].push(item)
                }
            );
        });
        return catSet;
    });

现在，当您要访问帖子时，您可以索引collections.taglist（或collections.categorylist）。

{%- for post in collections.tagList[tag] | reverse -%}

Answer 2

您上面建议的一切都起作用。我现在有针对生成的标签和类别的单独页面，所以谢谢您。

我现在遇到的问题是，在我的博客页面上，我以前有一个类似输出的标签列表，因此

<div class="tags tags--buttons">
  {%- for tag in collections.tagList -%}
    <a href="/tags/{{tag}}">{{tag}}</a>
  {%- endfor -%}
</div>

由于集合不再是数组，因此不再输出任何内容。

我更新到

<div class="tags tags--buttons">
  {%- for tag, val in collections.tagList -%}
    <a href="/tags/{{tag}}">{{tag}}</a>
  {%- endfor -%}
</div>

标签上可以正常工作，但是它不适用于集合（使用collections.CategoryList）

，标签不再按字母顺序排列

任何建议？

更新：

输出类别的代码是

    {%- for cat, val in collections.categoryList | dictsort -%}
        {%- if cat !== "posts" -%}
            <a href="/categories/{{cat}}">{{cat}}</a>
        {%- endif -%}
    {%- endfor -%}

没有任何错误，但也没有输出。
如果我添加| DIDSORT对此，我得到错误模板渲染错误：dictsort filter：val必须是一个对象