Shopify Liquid：基于标签的分页博客文章

Question

我将尽力解释这一点，如果看起来令人困惑，请见谅。

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

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

我已经在我的分配标签和分页标签上尝试了“where”过滤器，但没有用。当我在 Shopify Slack 上询问时，有人提到使用带有端点“/blogs/{blog_id}/tagged/{tag_id}”的 Section Render API，但返回该页面的所有 HTML，我不知道我是怎么做到的d 对其进行解析和分页。至少可以说，Section Render API 文档是想要的。而且我对 API 的经验有限

我最接近的答案是这个答案：https://stackoverflow.com/a/60000460/12948634

液体解决方案的问题是我可以将“视图”应用到标记的帖子页面，但我仍然需要对其进行分页。我仍然必须使用显然没有过滤的 {% 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;
})

博客主页

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

{%- 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 %}

这将是我个人选择的方向，我不知道它是否符合您的需求。