如何在Shopify Liquid中正确过滤博客文章并处理类数组结构

问题根源 #

你当前代码的核心问题是将Article对象直接拼接成字符串，导致custom_articles最终存储的是对象的字符串表示（类似#<Article:0x00000001>），而非可操作的文章实例，因此无法正常访问文章属性或遍历渲染。

正确实现代码 #

{{ "knowledge-hub-section.css" | asset_url | stylesheet_tag }}

{% assign blogs_handles = "5-best-materials-for-a-basketball-backboard,guide-to-installing-basketball-hoops-onto-brick-walls,4-tips-to-properly-maintain-a-basketball-hoop-base" | split: ',' %}
{% assign custom_articles = '' | split: '' %} <!-- 初始化空数组 -->

{% for article in blogs["news"].articles %}
  {% if blogs_handles contains article.handle %}
    {% assign custom_articles = custom_articles | concat: [article] %} <!-- 添加匹配的文章到数组 -->
  {% endif %}
{% endfor %}

<!-- Swiper组件渲染 -->
{% if custom_articles.size > 0 %}
  <div class="swiper">
    <div class="swiper-wrapper">
      {% for article in custom_articles %}
        <div class="swiper-slide">
          <a href="{{ article.url }}">
            {% if article.image %}
              <img src="{{ article.image | img_url: 'medium' }}" alt="{{ article.title }}">
            {% endif %}
            <h3>{{ article.title }}</h3>
            <p>{{ article.excerpt | strip_html | truncatewords: 20 }}</p>
          </a>
        </div>
      {% endfor %}
    </div>
    <!-- 可添加Swiper分页/导航组件 -->
    <div class="swiper-pagination"></div>
  </div>
{% endif %}

关键步骤说明 #

1. 初始化空数组：
   使用'' | split: ''创建一个空的Liquid数组，作为过滤后文章的容器，避免字符串拼接导致的对象丢失。

2. 过滤并存储文章：
   遍历博客文章时，用concat过滤器将匹配的文章（包装成单元素数组[article]）合并到custom_articles中，确保数组始终存储原始Article对象。

3. 遍历渲染Swiper：
   直接对custom_articles数组使用for循环，可直接访问文章的所有属性（如article.url、article.title、article.image等），完美适配Swiper的slide结构。

你的疑问解答 #

1. 如何正确过滤存储文章到类数组结构？
   不要用字符串拼接对象，而是用concat过滤器操作数组：先初始化空数组，每次匹配到符合条件的文章，就将其作为单元素数组与原数组合并，保持数组元素为可操作的Article实例。

2. Liquid中处理遍历过滤后文章的最佳方式？
   直接对过滤后的数组使用for循环即可，无需额外转换。可以通过custom_articles.size判断数组是否为空，避免渲染无效的Swiper容器。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo