Shopify Liquid：根据标签对博客进行分页 post

Question

我会尽力解释这一点，抱歉，如果它看起来令人困惑。

我有一个自定义主题。我正在尝试从博客中获取文章并将它们放入 7 个单独的标记页面中。本质上是创建单独的博客模板标准一个博客模板。这些页面包含一个按 6 分页的部分。

我可以将博客文章放入版块并分页，但无法过滤掉不需要的标签。当我在分页循环中使用 if/unless 语句时，它只是没有呈现不必要的，但仍然基于它进行分页，所以我在第一页有 3 篇文章，在第二页有 2 篇，依此类推。这就是它为什么会这样做的原因。

我已经在我的分配标签和分页标签上尝试了 'where' 过滤器，但没有用。当我在 Shopify Slack 上询问时，有人提到使用 Section Render API 和端点 '/blogs/{blog_id}/tagged/{tag_id}' 但是 returns该页面中的所有 HTML，我不知道我将如何对其进行解析和分页。至少可以说，Section Render API 文档是缺乏的。我对 APIs 的经验有限

我最接近回答的是这个答案：

液体解决方案的问题是我可以将“视图”应用到标记的帖子页面，但我仍然需要对其进行分页。我仍然必须使用显然不过滤的 {% paginate blog.articles %} 。此主题中不包含分页，我不太确定如何在不干扰主要标记页面的情况下将其添加到我的 'blog-content.liquid' 文件中。

有什么想法吗？代码如下：

<div id="article-index-card-section" class="g-flex">
    {% assign blog = blogs.{blog_id} %}
    {% paginate blog.articles by 6 %}
        {% for article in blog.articles %}
            
                <div class="article-index-card g-vertical">
                    <div style="display: flex; flex-direction: column;">
                        <img class="article-index-card-image" src="{{ article.image.src | img_url: 'master' }}">
                        <div class="article-index-card-text">
                            <h4>{{ article.title }}</h4>
                            <p class="t-body">{{ article.excerpt }}</p>
                        </div>
                    </div>
                    
                    <div class="article-index-card-btn btn">
                        <a href="{{ article.url }}">Learn More</a>
                    </div>
                </div>
            
        {% endfor %}
        <div>
           {{ paginate | default_pagination: next: '>', previous: '<' }} 
        </div>
        
    {% endpaginate %}
</div>

Answer 1

在这种情况下，我可能会走 JS 路线。

下面是我大概会做的，不知道合不合你的需要。

创建一个单独的 blog.ajax.liquid 模板

我们将创建一个新的博客模板，我们将仅保留页面的 HTML 需要以加快请求速度并删除未使用的 HTML 元素。

{% layout none %}

<div id="article-index-card-section" class="g-flex">
  {% paginate blog.articles by 6 %}
    {% for article in blog.articles %}
      <div class="article-index-card g-vertical">
          <div style="display: flex; flex-direction: column;">
              <img class="article-index-card-image" src="{{ article.image.src | img_url: 'master' }}">
              <div class="article-index-card-text">
                  <h4>{{ article.title }}</h4>
                  <p class="t-body">{{ article.excerpt }}</p>
              </div>
          </div>
          
          <div class="article-index-card-btn btn">
              <a href="{{ article.url }}">Learn More</a>
          </div>
      </div>
    {% endfor %}
    <div>
        {{ paginate | default_pagination: next: '>', previous: '<' }} 
    </div>
  {% endpaginate %}
</div>

这就是为什么我们在顶部添加行 {% layout none %} 以从默认布局中删除所有 HTML 输出并仅在我们创建的模板上输出 HTML。

向该新模板发出获取请求

我们向博客发出提取请求，但我们必须指定它必须使用新创建的模板，而不是默认模板。

fetch('/blogs/{blog_handle}/tagged/{tag}?view=ajax').then(res => res.text()).then(res => {
  document.querySelector('.blog-holder').innerHTML = res;
})

为此，我们将 ?view=ajax 添加到请求的末尾，其中 ajax 部分是我们在 blog.ajax.liquid 之后创建的模板的名称。

需要为每个单独的博客完成此请求，因此如果您有 10 个博客，您将为每个博客执行此请求 10 次。

分页请求

分页请求类似于博客的请求，但您需要将 page=2 参数添加到请求中，其中 2 是页码。

像这样：

fetch('/blogs/{blog_id}/tagged/{tag_id}?view=ajax&page=2').then(res => res.text()).then(res => {
  document.querySelector('.blog-template').innerHTML = res;
})

博客主页

我可能会创建一个静态部分，您可以在其中 select 此页面上的博客。

{%- for block in section.blocks -%}
    {%- assign _block = block.settings -%}
    {%- assign block_blog = _block.blog -%}
  <div class="blog-template" data-handle="{{block_blog}}">
    
  </div><!-- /.blog-template -->  
{%- endfor -%}

<script>
  document.querySelectorAll('.blog-template').forEach(item => {
    const handle = item.getAttribute('data-handle');
    // make fetch request and the logic for your tags
  })
</script>

{% schema %}
{
  "name": "Blogs",
  "blocks": [
    {
      "type": "blog",
      "name": "Blog",
      "settings": [
        {
          "type": "blog",
          "id": "blog",
          "label": "Choose a blog"
        }
      ]
    }
  ]
}
{% endschema %}

这是我个人选择的方向，不知道合不合你的需要。

Shopify Liquid：根据标签对博客进行分页 post

Shopify Liquid: Paginating blog post based on tag

pagination

themes

liquid

shopify

创建一个单独的 blog.ajax.liquid 模板

向该新模板发出获取请求

分页请求

博客主页