When building a website list page, a good pagination experience is the key to improving user satisfaction and website performance.AnQi CMS knows this and provides intuitive and powerful tags to help us easily implement pagination on list pages, while flexibly controlling the number of displayed page numbers.
Core Function Analysis: List Data and Pagination Navigation
The AnQi CMS list pagination mainly depends on the cooperation of two core tags:archiveListandpagination.archiveListIt is responsible for fetching the list of content to be displayed from the database, whilepaginationIt is responsible for according toarchiveListThe data provided generates and displays pagination.
1. Retrieve list data:archiveListTag
First, we need to make use of the powerful functions of Anqi CMS.archiveListLabel to get the list of content you want to display. The key is that you need to set this labeltype="page"The parameter tells the system that you need paginated data instead of loading all the content at once. At the same time,limitThe parameter is used to specify how many items are displayed per page, for examplelimit="10"It indicates that 10 items are displayed per page.
Here is a basic example of code to retrieve a list.
{% archiveList archives with type="page" limit="10" categoryId="1" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<p>{{item.Description}}</p>
</a>
</li>
{% empty %}
<li>
目前该分类下没有内容。
</li>
{% endfor %}
{% endarchiveList %}
In the above example,archivesIt is a custom variable name that will contain the list of articles on the current page.categoryId="1"Limited to retrieving articles under category ID 1, you can adjust according to your actual needscategoryId/moduleIdset parameters such as.{% for item in archives %}The loop will iterate over all articles on the current page and display their titles and descriptions.{% empty %}The prompt will be displayed when the list is empty.
2. Implement pagination navigation:paginationTag
WhenarchiveListlabel'stypeis set to"page"After that, Anqi CMS will automatically handle the pagination logic and generate apagesAn object that contains all information related to pagination, such as total number of pages, current page, first page, last page, previous page, next page, and the list of page numbers in the middle.paginationTags are used to consume thispagesobject.
paginationThe most critical parameter of the tag isshowwhich controls how many page numbers are displayed in the pagination navigation bar. For example,show="5"It will display a total of 5 page number links before and after the current page (if there are enough pages).
Here is an example of pagination navigation code:
<div class="pagination">
{% pagination pages with show="5" %}
<ul>
<li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
{# 首页链接 #}
<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 %}
{# 中间页码列表 #}
{% 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 %}
{# 尾页链接 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
{% endpagination %}
</div>
In this example,pagesIt is composed ofpaginationAn object provided by the tag. We can getpages.TotalItemsthe total number of items,pages.TotalPagesthe total number of pages,pages.CurrentPagethe current page number.pages.FirstPage/pages.PrevPage/pages.NextPage/pages.LastPagerepresent the links for home, previous page, next page, and end page information, includingLink(link address),Name(display name) andIsCurrent(whether it is the current page).
is the most core part{% for item in pages.Pages %}loop, it traversedshowThe page number list specified by the parameter dynamically generates page number links. EachitemContainsLink/NameandIsCurrentProperty, convenient for us to build page number navigation with style judgment.
Practical exercise: Integrating code to implement pagination
Usually, you will place the above two parts of the code in the template file where you want to display the pagination list (for exampletemplate/{模型table}/list.htmlortemplate/{您的自定义模板名}.html).
Here is a complete integrated example:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{% tdk with name="Title" %}</title>
<style>
.pagination { margin-top: 20px; text-align: center; }
.pagination ul { list-style: none; padding: 0; display: inline-block; }
.pagination li { display: inline-block; margin: 0 5px; }
.pagination li a { text-decoration: none; padding: 8px 12px; border: 1px solid #ddd; color: #333; }
.pagination li.active a { background-color: #007bff; color: white; border-color: #007bff; }
.pagination li a:hover:not(.active) { background-color: #eee; }
</style>
</head>
<body>
<div class="container">
<h1>文章列表</h1>
<ul>
{% archiveList archives with type="page" limit="10" categoryId="1" %}
{% for item in archives %}
<li>
<h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
<p>{{item.Description}}</p>
<small>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}} | 浏览量：{{item.Views}}</small>
</li>
{% empty %}
<li>
目前该分类下没有内容。
</li>
{% endfor %}
{% endarchiveList %}
</ul>
<div class="pagination">
{% pagination pages with show="5" %}
<ul>
<li>总计 {{pages.TotalItems}} 篇文章，共 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</li>
<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 %}
{% 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 %}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
{% endpagination %}
</div>
</div>
</body>
</html>
In the above example, we obtained articles under the category with ID 1, displaying 10 articles per page, and showing 5 page number links in the pagination navigation. You can adjust it according to your design needs.limitandshowThe value, to achieve **visual and user experience effects.
Techniques for controlling the number of displayed page numbers.
Bypaginationlabel'sshowParameter, we can control the display style of the pagination bar very flexibly.
show="3": It will only display one page number before and after the current page (if the total number of pages allows). This is suitable for cases with a very large number of page numbers, making navigation more concise.show="7": More page number links will be displayed, allowing users to quickly jump to distant pages.- Not set
showParameter: The Anqi CMS will have a default display quantity, usually 5, but it depends on the system configuration.
In addition, you can also utilizepagesItems in the object