如何在Stacey App中通过Twig实现跨项目数组分类匹配？

核心思路 #

不需要逐个手动匹配分类，正确的做法是先构建「分类-项目」的映射数组，一次性遍历所有项目完成聚合，后续无论是展示全部分类列表还是单个分类的项目，都可以直接复用这个映射，高效且易于维护。

步骤1：构建分类-项目映射（Twig代码） #

首先在模板中初始化一个空数组，遍历所有项目并将每个分类对应的项目存入映射：

{# 初始化分类映射：键为分类名称，值为对应项目数组 #}
{% set category_map = {} %}

{# 遍历所有项目页面（假设项目都在/projects/目录下） #}
{% for project in pages.projects.children %}
  {# 遍历当前项目的所有分类 #}
  {% for category in project.category %}
    {# 将项目添加到对应分类的数组中（分类不存在则创建空数组） #}
    {% set category_map = category_map|merge({
      (category): (category_map[category]|default([]))|merge([project])
    }) %}
  {% endfor %}
{% endfor %}

步骤2：展示全部分类及对应项目 #

用上面的映射直接生成你需要的展示效果：

{# 按分类遍历，输出每个分类和对应的项目标题 #}
{% for category, projects in category_map %}
  <strong>{{ category }}:</strong> 
  {{ projects|map(p => p.title)|join(', ') }}<br>
{% endfor %}

输出结果完全符合你的需求：

Design: Design project, Illustration project

Logo: Design project

Illustration: Illustration project, Video project

Animation: Illustration project, Video project

Handmade: Illustration project

Video: Video project

步骤3：实现单个分类页面的项目过滤 #

当访问单个分类页面（比如/projects/category/design/individual-category.yml）时，只需从映射中提取对应分类的项目即可：

{# 从当前页面配置获取目标分类（建议在individual-category.yml中设置category: Design） #}
{% set target_category = page.category %}

{# 从映射中获取该分类下的所有项目（无项目则返回空数组） #}
{% set filtered_projects = category_map[target_category]|default([]) %}

{# 输出过滤后的项目（可添加链接、缩略图等） #}
<h1>{{ target_category }} 项目</h1>
<div class="project-list">
  {% for project in filtered_projects %}
    <div class="project-item">
      <a href="{{ project.url }}">
        {# 若有缩略图可在此添加：<img src="{{ project.thumbnail.url }}" alt="{{ project.title }}"> #}
        <h3>{{ project.title }}</h3>
      </a>
    </div>
  {% else %}
    <p>暂无该分类的项目</p>
  {% endfor %}
</div>

关键说明 #

1. 自动适配：新增项目或分类时，模板无需任何修改，映射会自动更新
2. 性能优化：映射只需构建一次，后续可重复用于分类导航、统计等场景
3. 兼容性：如果你的YAML中category是逗号分隔的字符串（而非数组），只需先转成数组：{% set categories = project.category|split(',')|map(c => c|trim) %}，再遍历categories即可

内容的提问来源于stack exchange，提问作者Louis Bullock