Shopify全博客页面排序异常求助：多分类博客无法统一排序

你的问题核心是当前代码仅对博客分类的handle进行排序，而非所有分类下的文章全局排序。要实现所有文章统一排序，需要先把所有目标分类的文章合并到一个数组，再对数组排序后输出。

修改后的完整代码 #

{% comment %} 1. 定义目标博客分类的handle列表 {% endcomment %}
{% assign blog_handles = "skin-care,hair-care,foot-care,sun-care,learn" | split: "," %}

{% comment %} 2. 创建空数组，收集所有分类下的文章 {% endcomment %}
{% assign all_articles = blank %}
{% for handle in blog_handles %}
  {% assign all_articles = all_articles | concat: blogs[handle].articles %}
{% endfor %}

{% comment %} 3. 对所有文章按发布时间倒序排序（最新文章在前） {% endcomment %}
{% assign sorted_articles = all_articles | sort: 'published_at' | reverse %}

{% comment %} 4. 遍历排序后的文章输出 {% endcomment %}
{% for article in sorted_articles %}
<div class="blog-articles__article article">
  <div class="card-wrapper underline-links-hover">
    <div class="card article-card card--card article-card__image--medium card--media color-background-1" style="--ratio-percent: 52.33333333333333%;">
      <div class="card__inner  ratio" style="--ratio-percent: 52.33333333333333%;">
        <div class="article-card__image-wrapper card__media">
          <div class="article-card__image media media--hover-effect">
            <img
                srcset="{{ article.image.src | img_url: '533x' }}"
                src="{{ article.image.src | img_url: '533x' }}"
                alt="{{ article.image.src.alt | escape }}"
                class="motion-reduce"
                loading="lazy">
          </div>
        </div>
      </div>
      <div class="card__content">        
        <div class="card__information">
          <h3 class="card__heading h2">
            <a href="{{ article.url }}" class="full-unstyled-link">
              {{ article.title | truncate: 50 | escape }}
            </a>
          </h3>
          <div class="article-card__info caption-with-letter-spacing h5">              
              <span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>              
          </div>
          <p class="article-card__excerpt rte-width">
            {%- if article.excerpt.size > 0 -%}
              {{ article.excerpt | strip_html | truncatewords: 30 }}
            {%- else -%}
              {{ article.content | strip_html | truncatewords: 30 }}
            {%- endif -%}
          </p>            
        </div>
      </div>
    </div>
  </div>
</div>
{% endfor %}

关键说明 #

• 合并文章数组：使用concat把每个分类的文章列表合并成一个全局数组，避免分类间的独立循环。
• 全局排序：通过sort: 'published_at'对文章按发布时间升序排列，再用reverse转为倒序（最新文章优先）；如果需要旧文章在前，去掉reverse即可。
• 保留原有样式：完全复用你原有的文章卡片HTML结构，只修改了数据获取和排序逻辑。

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