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.AnQiCMS (AnQiCMS) with its concise and efficient architecture and powerful functions, provides us with solid support.Today, let's delve deeply into a common and important issue in operation:paginationCan the label be combined witharchiveFiltersTo achieve precise pagination under filtering conditions?
AnQi CMS: A content operation tool for precise pagination under filtering conditions
In a content management system, we often need to classify, filter a large amount of content, and display it to users in a paginated form.For example, on a product display website, users may want to view 'high-end phones' and browse the filtered results page by page.The core of this requirement is to seamlessly combine Filters and Pagination.In Anqi CMS, not only is it feasible, but it can also be very elegantly implemented through its powerful and flexible template tag design.
The design concept of Anqi CMS aims to provide a highly efficient and customizable solution to help businesses and operators easily meet various content display challenges. Among which,archiveFilters/archiveListandpaginationThis collaboration of the three tags is the key to realizing complex content filtering and pagination display.
archiveListThe foundation of the content list:
Firstly, we need to understandarchiveListThe role of the tag. It is the core tag used to retrieve document lists in Anqi CMS.Whether it is an article, product, or other custom content model, as long as it needs to be displayed in a list form, it can be done througharchiveListCall it. When we want these lists to support pagination, we just need to set it in the parameterstype="page"Specify the number of items per pagelimitand it will be ready for pagination. At this time,archiveListDynamically retrieves content based on the current URL parameters, which lays a foundation for subsequent filtering and pagination联动.
archiveFilters: Achieve dynamic filtering options.
Then,archiveFiltersThe tag appears, it is a tool for implementing content filtering. This tag can dynamically generate selection conditions for users to choose from, based on the custom fields we set for the content model (such as product color, size, price range, etc.)It is noteworthy that,archiveFiltersGenerated filter conditions, the logic behind it is to add the filter values in the form of URL parameters to the current page link.
For example, on a house rental website, we usearchiveFiltersGenerated the filters such as .../list.html?housing_type=apartmentThis method of passing the filtering state through URL parameters is the key to its collaboration with the pagination tag.
pagination: Maintain intelligent pagination with the filtering state.
Finally,paginationThe tag is responsible for generating pagination links. Its strength lies in its intelligence: it automatically detects all parameters included in the current page's URL and automatically includes these parameters (including those generated by
whenarchiveFiltersThe filtering parameters should be included.
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 three combined: building a highly interactive user experience.
Combine these three tags to create a powerful and user-friendly content display page. The workflow can be summarized as:
- User operation:Users navigate through the page, by using
archiveFiltersSelect one or more filter conditions generated. - URL update:The page URL is updated based on the user's selection, including the corresponding filter parameters (such as
?category=electronics&price_range=high) archiveListResponse:archiveListThe tag detects the filtering parameters in the URL and retrieves a list of content that matches these conditions from the database. At the same time, due totype="page"the setting, it also knows that the current list needs to be paginated.paginationLinkage:paginationLabel based onarchiveListPage information is generated from the data provided, and the existing filter parameters in the URL are automatically retained in all pagination links.- Seamless browsing:When the user clicks the pagination link, it will jump to the next page (or the specified page number), and all filtering conditions will still be effective, continuing to provide accurate content.
This is a typical security CMS template structure example, which shows how these 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 filtering parameters,archiveListresponsible for displaying content based on these parameters whilepaginationensures that all pagination links intelligently inherit and pass these filter parameters.
Summary
Of Security CMSarchiveFiltersandpaginationLabels can be perfectly combined to achieve precise pagination under filtering conditions.This combination not only makes website content management more flexible and efficient, but more importantly, it provides users with a smooth, personalized content discovery experience, making the website stand out among a sea of information.For website managers who pursue efficient operation and excellent user experience, a deep understanding and good use of these tags are undoubtedly an important way to enhance website competitiveness.
Frequently Asked Questions (FAQ)
1. How will the page display if the user applies a filter and no content is found?
WhenarchiveListWhen querying content based on filtering criteria, if no documents are matched, it will trigger{% empty %}the content within the tag. You can{% 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 simultaneously, and pagination can be performed on this basis?
Absolutely, you can.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 multiple conditions.