如何使用11ty的Collections API与JS filter()方法，在内置tags键之外实现自定义标签和分类？

嘿，我完全懂你的需求——你已经把11ty内置的tags字段用来做顶级内容类型的归类了，现在想单独处理portCategories和portTags这类自定义标签/分类，不想和内置tags混在一起，对吧？其实用11ty的Collections API加上JavaScript的filter()方法就能轻松实现，我给你一步步拆解：

第一步：在配置文件里创建自定义集合 #

打开你的.eleventy.js配置文件，用addCollection方法来创建基于自定义字段的集合。这里我们分别处理portCategories和portTags：

module.exports = function(eleventyConfig) {
  // 基于portCategories创建分类集合
  eleventyConfig.addCollection("portCategories", function(collectionApi) {
    // 先筛选出所有带有portCategories字段的内容
    const validItems = collectionApi.getAll().filter(item => item.data.portCategories);
    
    // 把相同分类的内容归组，方便模板调用
    return validItems.reduce((categoryGroups, currentItem) => {
      // 处理单个分类或数组形式的分类（兼容两种写法）
      const categories = Array.isArray(currentItem.data.portCategories) 
        ? currentItem.data.portCategories 
        : [currentItem.data.portCategories];
      
      categories.forEach(category => {
        if (!categoryGroups[category]) {
          categoryGroups[category] = [];
        }
        categoryGroups[category].push(currentItem);
      });
      
      return categoryGroups;
    }, {});
  });

  // 基于portTags创建标签集合，逻辑和上面一致
  eleventyConfig.addCollection("portTags", function(collectionApi) {
    const validItems = collectionApi.getAll().filter(item => item.data.portTags);
    
    return validItems.reduce((tagGroups, currentItem) => {
      const tags = Array.isArray(currentItem.data.portTags) 
        ? currentItem.data.portTags 
        : [currentItem.data.portTags];
      
      tags.forEach(tag => {
        if (!tagGroups[tag]) {
          tagGroups[tag] = [];
        }
        tagGroups[tag].push(currentItem);
      });
      
      return tagGroups;
    }, {});
  });
};

这段代码的逻辑很清晰：先用filter()把没有自定义字段的内容过滤掉，再用reduce()把相同分类/标签的内容整理成键值对，这样在模板里就能直接按分类名调用对应的内容列表了。

第二步：在模板里调用自定义集合 #

假设你用的是Nunjucks模板，想要展示所有portCategories分类下的内容，可以这么写：

{% for category, items in collections.portCategories %}
  <section class="category-section">
    <h2>{{ category }}</h2>
    <div class="content-grid">
      {% for item in items %}
        <article class="grid-item">
          <a href="{{ item.url }}">
            <h3>{{ item.data.title }}</h3>
          </a>
        </article>
      {% endfor %}
    </div>
  </section>
{% endfor %}

如果要展示portTags的内容，直接把collections.portCategories换成collections.portTags就行，用法完全一致。

第三步：单篇文章里展示自定义标签/分类 #

要是想在单篇文章页面显示它对应的portCategories或portTags，直接调用页面的data字段就可以：

{% if page.data.portCategories %}
  <div class="entry-categories">
    <span>分类：</span>
    {% for category in page.data.portCategories %}
      <span class="category-badge">{{ category }}</span>
    {% endfor %}
  </div>
{% endif %}

{% if page.data.portTags %}
  <div class="entry-tags">
    <span>标签：</span>
    {% for tag in page.data.portTags %}
      <span class="tag-badge">{{ tag }}</span>
    {% endfor %}
  </div>
{% endif %}

这样就完美把内置tags和自定义的分类/标签隔离开，各自负责不同的归类逻辑啦！

内容来源于stack exchange