如何修改Shopify的blog-posts.liquid仅展示指定标签的博文？

核心思路 #

通过在板块后台添加标签配置项，在模板中筛选出带有该标签的文章进行展示，同时保留原有的样式和占位符逻辑。

步骤1：更新板块配置（Schema部分） #

在{% schema %}的settings数组中添加一个标签输入字段，让你可以在Shopify后台直接设置要筛选的标签：

{
  "type": "text",
  "id": "target_tag",
  "label": "筛选标签",
  "info": "输入要展示的文章标签，仅显示带有该标签的博客文章"
}

步骤2：修改文章筛选逻辑 #

替换原模板中的文章循环逻辑，先筛选出带有指定标签的文章，再进行展示：

完整修改后的blog-posts.liquid代码 #

{%- assign blog = section.settings.blog -%}
{%- assign target_tag = section.settings.target_tag | downcase -%}
{%- assign tagged_articles = blog.articles | where_exp: "article", "article.tags | downcase | contains: target_tag" -%}

<section class="section" data-section-id="{{ section.id }}" data-section-type="blog-posts">
  <div class="container">
    {%- if section.settings.title != blank -%}
      <header class="section__header">
        <h2 class="section__title heading h3">{{ section.settings.title | escape }}</h2>

        {%- unless section.settings.link_title == blank -%}
          <a href="{{ blog.url }}" class="section__action-link link">{{ section.settings.link_title }} {% render 'icon', icon: 'tail-right' %}</a>
        {%- endunless -%}
      </header>
    {%- endif -%}

    {%- capture block_list -%}
      <div class="block-list block-list--loose">
        {%- for article in tagged_articles limit: section.settings.blog_posts_count -%}
          <div class="block-list__item 1/2--tablet 1/3--lap-and-up {% if section.settings.stack_mobile and forloop.index == 3 %}hidden-tablet{% endif %}">
            {%- render 'article-item', article: article, featured: false -%}
          </div>
        {%- else -%}
          {%- for i in (1..section.settings.blog_posts_count) -%}
            <div class="block-list__item 1/2--tablet 1/3--lap-and-up {% if section.settings.stack_mobile and i == 3 %}hidden-tablet{% endif %}">
              <div class="article-item">
                <div class="article-item__image-container article-item__image-container--placeholder">
                  {%- capture placeholder -%}{% cycle 'lifestyle-1', 'lifestyle-2' %}{%- endcapture -%}
                  {{ placeholder | placeholder_svg_tag: 'placeholder-svg' }}
                </div>

                {%- capture article_meta -%}
                  {%- if section.settings.show_category -%}
                    <span class="article-item__meta-item">{{ 'home_page.onboarding.article_category' | t }}</span>
                  {%- endif -%}

                  {%- if section.settings.show_author -%}
                    <span class="article-item__meta-item">{{ 'home_page.onboarding.article_author' | t }}</span>
                  {%- endif -%}

                  {%- if section.settings.show_date -%}
                    <time class="article-item__meta-item">{{ 'now' | date: format: 'short_month_day_year' }}</time>
                  {%- endif -%}
                {%- endcapture -%}

                {%- if article_meta != blank -%}
                  <div class="article-item__meta">
                    {{ article_meta }}
                  </div>
                {%- endif -%}

                <h3 class="article-item__title heading link h4">{{ 'home_page.onboarding.article_title' | t }}</h3>

                {%- if section.settings.show_excerpt -%}
                  <div class="article-item__excerpt rte">{{ 'home_page.onboarding.article_excerpt' | t }}</div>
                {%- endif -%}
              </div>
            </div>
          {%- endfor -%}
        {%- endfor -%}
      </div>
    {%- endcapture -%}

    {%- if section.settings.stack_mobile -%}
      {{ block_list }}
    {%- else -%}
      <div class="scroller">
        <div class="scroller__inner">
          {{ block_list }}
        </div>
      </div>
    {%- endif -%}
  </div>
</section>

{% schema %}
{
  "name": "Blog posts",
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "Blog"
    },
    {
      "type": "text",
      "id": "target_tag",
      "label": "筛选标签",
      "info": "输入要展示的文章标签，仅显示带有该标签的博客文章"
    },
    {
      "type": "range",
      "id": "blog_posts_count",
      "label": "Blog posts to show",
      "min": 3,
      "max": 9,
      "step": 3,
      "default": 3
      },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Blog posts"
    },
    {
      "type": "text",
      "id": "link_title",
      "label": "Link title",
      "default": "View all"
    },
    {
      "type": "checkbox",
      "id": "show_category",
      "label": "Show category",
      "info": "The first article's tag will be shown as category.",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "label": "Show author",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "label": "Show date",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_excerpt",
      "label": "Show excerpt",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "stack_mobile",
      "label": "Stack on mobile",
      "default": false
    }
  ],
  "presets": [
    {
      "category": "Blog",
      "name": "Blog posts",
      "settings": {
        "blog": "news"
      }
    }
  ]
}
{% endschema %}

关键说明 #

1. 标签不区分大小写：通过downcase过滤器统一转换为小写进行匹配，避免因大小写不一致导致筛选失败
2. 后台可配置：添加的target_tag设置项让你无需修改代码，直接在Shopify主题编辑器中输入要筛选的标签
3. 保留原逻辑：原有的占位符样式、移动端堆叠设置等功能完全保留，仅修改文章筛选逻辑

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