As an experienced website operations expert, I know that how to efficiently manage and display content in an increasingly complex network environment, while improving user experience and search engine optimization, is the key to website success.English CMS (EnglishCMS) provides us with solid support with its simple and efficient architecture and powerful functions.paginationLabel whether it can bearchiveFiltersLabel combination, to achieve accurate pagination under filtering conditions?

Anqi CMS: A powerful content operation tool for achieving accurate pagination under filtering conditions

In the content management system, we often need to classify, filter a large number of contents, and display them to users in the form of pagination.For example, on a product showcase website, users may want to view 'high-end smartphones' and browse through these filtered results page by page.The core of this requirement is to seamlessly integrate filtering (Filters) with pagination (Pagination).In AutoCMS, not only is it feasible, but it can also be implemented very elegantly through its powerful and flexible template tag design.

The design philosophy of Anqi CMS aims to provide a highly efficient and customizable solution to help businesses and operators easily handle various content display challenges. Among them,archiveFilters/archiveListandpaginationThis collaboration of the three tags is the key to achieving complex content filtering and pagination display.

archiveListThe cornerstone of the content list:

Firstly, we need to understandarchiveListThe role of the label.It is the core tag used to get the document list in the Anqi CMS.archiveListTo call. When we want these lists to support pagination, just set it in the parameters.type="page"and specify the number of items per page.limitIt will be ready for pagination. At this point,archiveListThe content will be dynamically retrieved based on the parameters in the current URL, which lays a foundation for subsequent filtering and pagination联动.

archiveFilters: Implement dynamic options for precise filtering

Next,archiveFiltersLabel debut, it is a powerful tool for content filtering.This tag can dynamically generate filtering conditions available for users to choose from, based on the custom fields (such as product color, size, price range, etc.) we set for the content model.archiveFiltersGenerated filter conditions, the logic behind them is to add the filter values in the form of URL parameters to the link of the current page.

For example, on a house rental website, we usearchiveFiltersGenerated.../list.html?housing_type=apartmentThis way of passing the filter state through URL parameters is the key to its collaboration with the pagination tag.

pagination: Intelligent pagination that maintains the filter state

Finally,paginationThe tag is responsible for generating pagination links. Its strength lies in its intelligence: it automatically detects all parameters included in the URL of the current page and automatically includes these parameters (including byarchiveFiltersGenerated filter parameters should be included as well.

This means that when the user filters out 'high-priced phones' and clicks on the 'next page' of the pagination, they will still see the next page of high-priced phones under the filter, not the next page of all phones.This seamless experience greatly enhances the efficiency and satisfaction of users browsing content.

The combination of the three: building a highly interactive user experience

Combine these three tags to create a powerful and user-friendly content display page. Its workflow can be summarized as:

  1. User Operation:On the page, users can navigate through:archiveFiltersGenerated options select one or more filtering conditions.
  2. URL updated:The page URL is updated based on the user's selection, including the corresponding filtering parameters (such as)?category=electronics&price_range=high).
  3. archiveListResponse: archiveListLabel detection of filtering parameters in the URL and obtaining the list of contents that meet these conditions from the database. At the same time, due totype="page"settings, it also knows that the current list needs to be paginated.
  4. pagination联动：English paginationthe tag based onarchiveList提供的数据生成分页信息，并在所有分页链接中自动保留了URL中现有的筛选参数。English
  5. 无缝浏览：EnglishThe user will be redirected to the next page (or the specified page number) when clicking the pagination link, and all filter conditions will still be effective, providing accurate content continuously.

This is a typical secure CMS template structure example, which shows how the three collaborate:

{# 假设这是文档列表页的模板，用于筛选和分页展示内容 #}

{# 1. 动态生成筛选条件 #}
<div class="filter-area">
    <h3>筛选条件</h3>
    {% archiveFilters filters with moduleId="1" allText="不限" %}
        {% for item in filters %}
            <div class="filter-group">
                <h4>{{ item.Name }}</h4>
                <ul>
                    {% for val in item.Items %}
                        <li class="{% if val.IsCurrent %}active{% endif %}">
                            <a href="{{ val.Link }}">{{ val.Label }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

{# 2. 显示根据筛选条件过滤后的内容列表 #}
<div class="content-list">
    {% archiveList archives with moduleId="1" type="page" limit="10" %}
        {% for item in archives %}
            <div class="archive-item">
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                <p>{{ item.Description }}</p>
                <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
            </div>
        {% empty %}
            <p>抱歉，没有找到符合条件的文档。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

{# 3. 生成基于当前筛选状态的分页链接 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        <ul>
            {% if pages.FirstPage %}
                <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{ pages.FirstPage.Link }}">首页</a></li>
            {% endif %}
            {% if pages.PrevPage %}
                <li><a href="{{ pages.PrevPage.Link }}">上一页</a></li>
            {% endif %}
            {% for item in pages.Pages %}
                <li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{ item.Link }}">{{ item.Name }}</a></li>
            {% endfor %}
            {% if pages.NextPage %}
                <li><a href="{{ pages.NextPage.Link }}">下一页</a></li>
            {% endif %}
            {% if pages.LastPage %}
                <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{ pages.LastPage.Link }}">尾页</a></li>
            {% endif %}
        </ul>
    {% endpagination %}
</div>

This example clearly demonstratesarchiveFiltersresponsible for generating links with filter parameters,archiveListresponsible for displaying content based on these parameters,paginationthen ensure that all pagination links intelligently inherit and pass these filtering parameters.

Summary

Anqi CMS'sarchiveFiltersandpagination

Common Questions (FAQ)

1. How will the page display if the user applies a filter and finds no content?

WhenarchiveListWhen querying content based on filter conditions, if no documents match, it will trigger{% empty %}the content within the tags. You can in{% empty %}Label custom prompt information, such as “Sorry, no documents matching your filter criteria were found.”, thus providing friendly user feedback.

2. Can multiple filter conditions be applied at the same time, and pagination can be performed on this basis?

Yes, it can be done completely.archiveFiltersLabels can generate multiple-dimensional filtering conditions, such as filtering by "Color" and by "Size".When the user selects multiple conditions at the same time, these conditions will be attached to the link in the form of different URL parameters.archiveListIt will parse all valid URL parameters and perform multi-condition filtering