As an experienced CMS website operation personnel, I fully understand that effectively displaying content is the key to attracting and retaining users when building and maintaining a website.Especially for pages that may contain a large amount of information such as document lists, a reasonable pagination mechanism can not only improve user experience but also optimize website performance.Today, I will elaborate on how to use the pagination tag in the AnqiCMS template to implement pagination display of document lists.
Understand the pagination mechanism in AnqiCMS
In AnqiCMS, the pagination display of the document list mainly relies on the collaborative work of two core template tags:archiveList(or other content list tags liketagDataList/commentListandpagination.archiveListThe tag is responsible for retrieving document data from the database based on specified conditions, whilepaginationthe tag is responsible for generating pagination navigation on the user interface, allowing users to browse documents on different pages.
To enable pagination, first make sure that the content list tag (such asarchiveList）的typethe parameter is set to"page". Whentype="page"then,archiveListthe tag will not load all matching documents at once, but based onlimitSpecify the number of documents to display per page and provide necessary pagination information for the entire document collection.
archiveListRetrieve tags and pagination data.
archiveListThe tag is the core to obtain document list data. When you want to paginate documents, you need to configure it in pagination mode.
{% 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 %}
In this code block:
archivesis a variable name used to store fromarchiveListThe array of documents obtained on the current page.type="page"Explicitly inform the system to retrieve documents in pagination mode.limit="10"Set to display 10 documents per page. You can adjust this value according to your actual needs.
archiveListLabels also support other parameters, such asmoduleId(Model ID),categoryId(Category ID),order(Sorting method) and others, you can combine them as needed to precisely control the range and order of documents to be displayed.
paginationTags implement pagination navigation display.
InarchiveListlabel'stype="page"In mode, the system will automatically calculate all the information required for pagination. This information can be obtained and rendered as visible pagination navigation for users.paginationtag to retrieve and render as user-visible pagination navigation.
paginationThe typical usage of the tag is as follows:
<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>
Here:
pagesis a variable name that contains all the data and links required for pagination.show="5"The parameter indicates that the pagination navigation can display a maximum of 5 page number links (excluding the home page, last page, previous page, and next page buttons).This helps to keep pagination navigation concise, especially when there are many pages.pagesThe variable contains multiple sub-objects and properties used to build a complete navigation:TotalItems: Total document count.TotalPages: Total number of pages.CurrentPage: The current page number.FirstPage: Home page link information (NameFor "Home"，“LinkFor link address，“IsCurrentTo determine if it is the current page）“LastPage: Link information of the last page.“PrevPage: Link information of the previous page. If there is no previous page, this object may be empty。“NextPage: Link information for the next page. If there is no next page, this object may be empty.Pages: An array containing link information for middle page numbers, each element includesName(page number),Link(link address),IsCurrent.
By these fields, you can flexibly build pagination navigation that matches the design style of your website. Be sure to according toIsCurrentAttribute to addactiveclass to provide clear user feedback.
Integrate example: complete document list pagination template structure
To make the document list and pagination navigation take effect and display at the same time, they are usually placed in the same template file, such as the category list page ({模型table}/list.htmlOr search result page (search/index.html)
The following is a combinationarchiveListandpaginationHere is the complete template example:
{# 假设这是某个分类的列表页模板 #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
<style>
.pagination ul { list-style: none; padding: 0; display: flex; justify-content: center; margin-top: 20px; }
.pagination li { margin: 0 5px; }
.pagination li a { display: block; padding: 8px 12px; border: 1px solid #ddd; text-decoration: none; color: #333; }
.pagination li.active a { background-color: #007bff; color: white; border-color: #007bff; }
.document-list { list-style: none; padding: 0; }
.document-list li { border-bottom: 1px solid #eee; padding: 15px 0; display: flex; align-items: center; }
.document-list li img { width: 100px; height: 75px; margin-right: 15px; object-fit: cover; }
.document-list li .info h5 { margin: 0 0 5px 0; font-size: 1.2em; }
.document-list li .info div { font-size: 0.9em; color: #666; }
</style>
</head>
<body>
<h1>{% categoryDetail with name="Title" %}</h1>
<p>{% categoryDetail with name="Description" %}</p>
<ul class="document-list">
{% archiveList archives with type="page" categoryId="当前分类ID或从URL获取" limit="10" %} {# 替换 categoryId 为实际值 #}
{% for item in archives %}
<li>
{% if item.Thumb %}
<a href="{{item.Link}}">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
{% endif %}
<div class="info">
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<div>
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span> |
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span> |
<span>阅读量：{{item.Views}}</span>
</div>
<p>{{item.Description}}</p>
</a>
</div>
</li>
{% empty %}
<li>
抱歉，当前分类下没有任何文档。
</li>
{% endfor %}
{% endarchiveList %}
</ul>
{# 分页导航区域 #}
<div class="pagination">
{% pagination pages with show="5" %}
<ul>
<li class="page-info">共 {{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>
</body>
</html>
This sample code demonstrates how to retrieve a document list and pagination navigation on the same page, and differentiate visually with simple inline styles.In practice, you would integrate it into a more complex website layout and use an external CSS file for styling control.
Frequently Asked Questions (FAQ)
Why is my pagination navigation not displayed or displayed incorrectly?
The most common reason is that you did not includearchiveList(ortagDataList/commentListtags when callingtypethe parameter to"page". If set to"list", the tag will only return the specifiedlimitThe number of documents, without providing the data required for pagination. Please check yourarchiveListcall, make sure it is{% archiveList archives with type="page" ... %}. In addition, if the total number of query results is less thanlimitThe number of items displayed per page, may also not display pagination navigation, as there is no need for pagination.
How to change the number of articles displayed per page?
You can adjust byarchiveListin the labellimitParameters to control the number of documents displayed per page. For example, if you want to display 20 articles per page, you can setlimit="10"is modified tolimit="20".
Can I customize the URL structure of pagination links?
AnqiCMS defaults to automatically generating page links based on the static rules you set in the backend.In most cases, you do not need to manually modify the URL structure of the pagination links.But if you have special requirements,paginationTags provide aprefixParameters allow you to define custom URL patterns. For example,prefix="?p={page}"you can name the page number parameterp. However, this is usually an advanced feature, it is recommended to try modifying it after a deep understanding of AnqiCMS's routing and pseudo-static mechanism.