如何在Jekyll中嵌套循环并实现多集合关联展示？

我来帮你一步步搞定这个需求，全程通过Front Matter配置，用户只需要选对应服务就能完成关联，非常省心：

1. 统一服务标识（关键前提） #

首先得让三个集合的服务标识统一，不然关联会乱套。建议给services集合里的每个文档加一个唯一的slug字段（比如service-slug），示例如下：

---
title: "Web开发定制服务"
slug: custom-web-dev
---

同时，testimonials集合里的每篇评价文档，也要加一个related_service字段，对应关联服务的slug：

---
title: "某科技公司客户评价"
related_service: custom-web-dev
content: "团队响应超快，定制的Web系统完全贴合我们的业务流程！"
---

2. 案例研究页的Front Matter配置 #

在每个案例研究的Markdown文档里，只需要加一个related_service字段，让用户填入对应服务的slug就行，示例：

---
title: "XX金融平台重构案例"
related_service: custom-web-dev # 这里直接选对应服务的slug即可
---

3. 案例研究模板里的逻辑与渲染实现 #

打开你的案例研究模板（比如_layouts/case-study.html），按以下步骤编写代码：

第一步：筛选匹配的Testimonial #

用Jekyll的Liquid语法，先获取当前案例关联的服务slug，再从testimonials集合里筛选出第一条匹配的评价：

{% assign target_service = page.related_service %}
{% assign matched_testimonial = site.testimonials | where: "related_service", target_service | first %}

这里用| first确保只取第一条匹配内容，符合你要展示1条的需求。

第二步：渲染Slick Slider结构 #

如果找到匹配的评价就渲染滑块，没找到的话显示友好提示：

{% if matched_testimonial %}
  <div class="testimonial-slick-slider">
    <div class="testimonial-card">
      <blockquote class="testimonial-content">
        {{ matched_testimonial.content }}
      </blockquote>
      <p class="testimonial-source">— {{ matched_testimonial.title }}</p>
    </div>
  </div>
{% else %}
  <p class="no-testimonial-tip">暂无对应服务的客户评价</p>
{% endif %}

第三步：初始化Slick Slider #

在模板底部（或者你的全局JS文件）添加Slick的初始化代码，根据需求调整参数：

$(document).ready(function(){
  $('.testimonial-slick-slider').slick({
    dots: true,
    infinite: true,
    speed: 600,
    fade: true,
    autoplay: true,
    autoplaySpeed: 6000,
    arrows: false
  });
});

注意：确保你的项目已经引入了jQuery、Slick的CSS和JS文件哦。

额外优化小技巧 #

• 如果以后需要展示多条对应评价，只需要去掉| first，Slick会自动处理多滑块切换
• 可以在案例研究的Front Matter示例里加注释，比如# 填写对应服务的slug，可从services集合文档中复制，降低用户配置门槛

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