我正在 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 %}
问题:
期望的结果: 我想使用 blogs_handles 数组中指定的句柄过滤博客文章并显示它们的 x 属性。
我尝试过的:
问题:
按句柄过滤文章:我们迭代 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>