十月 CMS：无法使用砌体过滤器进行分页

如何解决十月 CMS：无法使用砌体过滤器进行分页

我有一个简单的投资组合/博客文章显示页面。它具有两个类别：“照片”和“视频”。 for cycle 显示来自特定帖子的所有图像。由于照片太多，所以分页是为了不让整个页面过载。

我还使用 masonry.js 库来显示图像和过滤类别。

所以问题出在过滤器上。如果我当前在根页面 /portfolio 上并设置过滤器类别 - 帖子被过滤，但是一旦我单击特定分页页面并应用类别过滤器 - 过滤器仅在该页面上起作用。换句话说，如果我单击页码 4，则会加载 url: portfolio/4。然后我应用一个过滤器，它过滤来自该特定页面的帖子 - portfolio/4。虽然它应该从所有帖子中过滤。如何正确实现？应用任何过滤器后重定向到根页面 portfolio？或者也许有更优雅、更正确的 AJAX 解决方案来解决这个问题？

portfolio.html

title = "Portfolio"
url = "/portfolio/:page?"
layout = "default"
is_hidden = 0

[blogPosts]
pageNumber = "{{ :page }}"
postsPerPage = 10
nopostsMessage = "No posts found"
sortOrder = "published_at desc"
categoryPage = "about"
postPage = "blog-post"

[blogCategories]
slug = "{{ :slug }}"
displayEmpty = 0
categoryPage = "blog-category"
==
{% set posts = blogPosts.posts %}

<div class="portfolio-section">

    <ul class="portfolio-filter controls text-center">
        <li class="control" data-filter="all">All</li>
        {% for category in categories %}
        <li {% if category.slug == currentCategorySlug %} class="active control" {% endif %} data-filter=".{{ category.name }}">{{ category.name }}</li>
        {% endfor %}
    </ul>


    <div class="row portfolio-gallery m-0">
        {% for post in posts %}
        {% for image in post.featured_images %}
        {% for category in post.categories %}
        <div class="mix col-xl-2 col-md-3 col-sm-4 col-6 p-0 {{ category.name }}">
            <a href="{{ image.path }}" class="portfolio-item img-popup set-bg" data-setbg="{{ image.path }}"></a>
        </div>                
        {% endfor %}
        {% endfor %}
        {% endfor %}                      
    </div>

    {% if posts.lastPage > 1 %}
        <ul class="pagination">
            {% if posts.currentPage > 1 %}
                <li><a href="{{ page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}">&larr; Prev</a></li>
            {% endif %}

            {% for page in 1..posts.lastPage %}
                <li class="{{ posts.currentPage == page ? 'active' : null }}">
                    <a href="{{ page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
                </li>
            {% endfor %}

            {% if posts.lastPage > posts.currentPage %}
                <li><a href="{{ page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}">Next &rarr;</a></li>
            {% endif %}
        </ul>
    {% endif %}

</div>

砖石

  var masonryLayout = function () {
    $('.portfolio-grid').masonry({
      itemSelector: '.grid-item',columnWidth: '.grid-sizer',percentPosition: true
    });
  }

    /*MixituP*/
  masonryLayout();
  if ($('.portfolio-gallery').length > 0) {
    var containerEl = document.querySelector('.portfolio-gallery');
    var mixer = mixitup(containerEl,{
      callbacks: {
        onMixEnd: function () {
          masonryLayout();
        }
      }
    });
  }
});