Shopify Liquid：基于标签的博客文章分页 创建一个单独的 blog.ajax.liquid 模板向该新模板发出提取请求分页请求博客主页

如何解决Shopify Liquid：基于标签的博客文章分页 创建一个单独的 blog.ajax.liquid 模板向该新模板发出提取请求分页请求博客主页

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

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

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

我已经在我的分配标签和分页标签上尝试了“where”过滤器，但没有奏效。当我在 Shopify Slack 上询问时，有人提到将 Section Render API 与端点 '/blogs/{blog_id}/tagged/{tag_id}' 一起使用，但返回了该页面的所有 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>

解决方法

在这种情况下，我可能会走 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 %}

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