如何在 Shopify Liquid 中正确过滤和处理类似数组的结构

Question

我正在 Shopify 商店工作，需要根据特定句柄过滤博客文章并将其显示在 Swiper 组件中。但是，我在正确处理 Liquid 中的类似数组的结构以实现此目的时遇到了困难。这是我正在处理的具体案例：

我需要使用句柄数组过滤博客文章列表，并仅显示与这些句柄匹配的文章。以下是我当前的 Liquid 代码：

{{ "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 = '' %}

{% for article in blogs["news"].articles %}
  {% if blogs_handles contains article.handle %}
    {% if custom_articles == '' %}
      {% assign custom_articles = article %}
    {% else %}
      {% assign custom_articles = custom_articles | append: ',' | append: article %}
    {% endif %}
  {% endif %}
{% endfor %}

问题：

1. 文章似乎无法正确显示。
2. 处理 custom_articles 数组并确保它正确存储和迭代过滤后的文章。

期望的结果： 我想使用 blogs_handles 数组中指定的句柄过滤博客文章并显示它们的 x 属性。

我尝试过的：

• 使用分割过滤器创建句柄数组。
• 迭代博客文章并将匹配的文章附加到 custom_articles 数组中。
• 将 custom_articles 字符串拆分回数组并迭代它以呈现文章。

问题：

1. 如何正确过滤文章并将其存储在类似数组的结构中？
2. 在 Liquid 中处理和迭代这些过滤文章的最佳方法是什么？

Answer 1

按句柄过滤文章：我们迭代 blogs["news"].articles 并检查article.handle 是否在blogs_handles 数组中。 存储过滤的文章：我们将匹配文章的句柄连接到一个字符串 (custom_articles) 中，然后将该字符串拆分回一个数组 (custom_articles_array)。 在 Swiper 组件中显示文章：我们迭代 custom_articles_array，通过其句柄找到每篇文章，然后将其显示在 Swiper 组件中。

{{ "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 = '' %}
{% assign custom_articles_array = '' %}

{% for article in blogs["news"].articles %}
  {% if blogs_handles contains article.handle %}
    {% if custom_articles == '' %}
      {% assign custom_articles = article %}
    {% else %}
      {% assign custom_articles = custom_articles | append: ',' | append: article %}
    {% endif %}
  {% endif %}
{% endfor %}

{% assign custom_articles_array = custom_articles | split: ',' %}

<div class="swiper-container">
  <div class="swiper-wrapper">
    {% for handle in custom_articles_array %}
      {% assign article = blogs["news"].articles | where: "handle", handle | first %}
      {% if article %}
        <div class="swiper-slide">
          <h2>{{ article.title }}</h2>
          <p>{{ article.excerpt }}</p>
          <a href="{{ article.url }}">Read more</a>
        </div>
      {% endif %}
    {% endfor %}
  </div>
  <!-- Add Swiper navigation buttons -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<!-- Include Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>