As a website operator who is well-versed in the operation of AnQiCMS, I know that the exquisite presentation of content lies in how to efficiently and elegantly serve users.For document list pages containing a large amount of content, a reasonable pagination mechanism can not only improve user experience but also optimize website performance.paginationThe label is the core tool to achieve this goal, it allows us to flexibly control the pagination display and style of the document list.
Understand the pagination mechanism in AnQiCMS
AnQiCMS separates the pagination logic of the content list from the content display itself, which means you first need to usearchiveListlabels totype="page"the pattern to obtain the paginated document data. OncearchiveListGenerated a dataset with pagination information (we usually name it)archives, accompanied by apagesvariable to store pagination metadata),paginationLabels can take the stage, responsible for parsing these pagination metadata and rendering them as visible navigation elements for users.This separation design philosophy gives template developers a great degree of freedom, allowing for deep customization of the visual presentation of pagination without affecting the core data logic.
paginationbasic usage of tags
paginationThe use of tags is very intuitive, it always works with a variable that stores pagination information and appears in the{% pagination pages with show="5" %}...{% endpagination %}format. Here,pagesis provided automatically by thearchiveListTags intype="page"mode.showThe parameter is the key to controlling the number of pages displayed on the page, for example,show="5"It indicates that up to 5 page number links are displayed before and after the current page number to maintain the simplicity of pagination.
In addition to the basicshowParameter out,paginationLabels also provide aprefixParameter, this is usually a high-level feature. It allows you to redefine the URL pattern of pagination links, such asprefix="?page={page}"In most standard application scenarios, AnQiCMS will automatically handle the construction of URLs, thereforeprefixthe parameters usually do not need to be manually set.
paginationcore fields provided by the tag
paginationA comprehensive pagination data object is encapsulated within the label. Through these fields, we can precisely construct the pagination navigation. These fields include:
TotalItems: The total number of items in the document list, allowing users to understand the total amount of content.TotalPages: Shows the total number of pages in the document list, informing users of how the content is distributed across multiple pages.CurrentPageEnglish: : Mark the current page that the user is browsing. This is the key information for the user to locate their position.FirstPageAn object containing links and names pointing to the first page, for the convenience of users to quickly return to the starting page.LastPageAn object that contains links and names to the last page, making it convenient for users to jump to the end of the content.PrevPageAn object that contains a link to the previous page and its name, enabling sequential browsing.NextPage: An object that contains links and names to the next page, used to continue browsing the next page of content.Pages: This is an array object that contains the middle page number links, which is the core data for building the page number list.
Especially,PagesEach element in the array (which we callpageItem）also has its own fields, includingName(Page name displayed, such as “1”, “2”),Link(URL pointing to this page) as well asIsCurrentAn boolean value indicating whether the page number is the current active page.
How to build flexible pagination styles
BypaginationTags provide rich fields, allowing us to build highly customizable pagination navigation. Here is a typical AnQiCMS pagination code example, demonstrating how to combine these fields to achieve a fully functional and style-controllable pagination:
Firstly, make sure you have usedarchiveListlabels totype="page"mode to get the document list data:
{# page 分页列表展示 #}
<div>
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<div>{{item.Description}}</div>
<div>
<span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>{{item.Views}} 阅读</span>
</div>
</a>
{% if item.Thumb %}
<a href="{{item.Link}}">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
{% endif %}
</li>
{% empty %}
<li>
该列表没有任何内容
</li>
{% endfor %}
{% endarchiveList %}
{# 分页代码 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination">
{# 显示总数、总页码、当前页等信息 #}
<li class="info">总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
{# 首页链接，根据IsCurrent状态添加active样式 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{# 上一页链接，仅当存在上一页时显示 #}
{% if pages.PrevPage %}
<li class="page-item">
<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
</li>
{% endif %}
{# 中间数字页码列表，遍历Pages数组 #}
{% for item in pages.Pages %}
<li class="page-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{item.Link}}">{{item.Name}}</a>
</li>
{% endfor %}
{# 下一页链接，仅当存在下一页时显示 #}
{% if pages.NextPage %}
<li class="page-item">
<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
{# 末页链接，根据IsCurrent状态添加active样式 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
{% endpagination %}
</div>
</div>
In this example, we first go through:divandulThe tag provides structure for pagination areas, making it convenient to apply CSS styles later. Each pagination link is wrapped inlithe tag and added thepage-itemclass. We cleverly utilizeIsCurrentProperty has been dynamically added to the current pageactiveclass, which allows us to highlight the current page through CSS rules (such as.pagination .active a { background-color: #007bff; color: white; }) to enhance visual feedback.
Moreover, for the 'Previous Page' and 'Next Page' links, we use{% if pages.PrevPage %}and{% if pages.NextPage %}Perform conditional judgment to ensure that these navigation elements are rendered only when logically existing, avoiding invalid links and further optimizing the user experience.This fine control allows you to freely adjust the layout, color, font, and all other visual elements according to the design style of the website.
Concluding remarks
paginationLabels are the core of AnQiCMS content list pagination, and their design philosophy is to provide strong data support and high flexibility in template rendering.By flexibly using its parameters and built-in fields, and combining with CSS for style control, you will be able to provide website visitors with an efficient and beautiful browsing experience, and elevate the presentation of content lists to a higher level.
Frequently Asked Questions
Q1: Why is my page not displaying pagination?A: First, please check yourarchiveListtags have been settype="page"becausepaginationLabel is onlyarchiveListIt can only work normally when data is retrieved in paginated mode.Next, please make sure that your content list actually contains more than one page of data. If there is not enough content to paginate, the pagination navigation will not be displayed naturally.paginationLabel syntax is correct, especially variable namespagesconsistent witharchiveListthe returned pagination data variable.
Q2: How to change the number of displayed page numbers in pagination?A: You can use the parameter to control the number of displayed page numbers.paginationTagsshowFor example,{% pagination pages with show="7" %}Will display more page number links before and after the current page, with a total of up to 7 numeric page numbers.You can adjust this parameter according to the width of the page and design requirements to achieve **visual effects**.
Q3: Can pagination be used in conjunction with search results or filter conditions?A: Of course. AnQiCMS supportspaginationTags andarchiveListlabel integration closely, andarchiveListitself supportsq(Search keywords) and custom filtering parameters. This means that when the user is paging through the search results page or the list page with applied filtering conditions,paginationThe label will automatically generate new pagination links containing these search and filter conditions, ensuring that search or filter criteria are retained when users switch between different pages, thereby providing a seamless user experience.