As an experienced CMS website operation personnel in security, I fully understand that effectively displaying content is the key to attracting and retaining users when building and maintaining a website.In particular, for pages such as document lists that may contain a large amount of information, 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 AnqiCMS templates to implement pagination of document lists.
Understanding the pagination mechanism in AnqiCMS
In AnqiCMS, the pagination display of document lists mainly relies on the collaboration of two core template tags:archiveList(or other content list tags, such astagDataList/commentListetc. andpagination.archiveListThe tag is responsible for retrieving document data from the database under specified conditions, andpaginationthe tag is responsible for generating pagination navigation on the user interface, allowing users to browse documents on different page numbers.
To enable pagination, first make sure that the content list tag (such asarchiveList) oftypeThe parameter has been set to"page"). Whentype="page"whenarchiveListthe tag will not load all matching documents at once, but based onlimitThe parameter specifies the number of documents to display per page and provides necessary pagination information for the entire document collection.
archiveListRetrieving tags and pagination data
archiveListTags are the core to retrieve 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 fromarchiveListGet the current page document array obtained.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.
archiveListTags also support other parameters, such asmoduleId(Model ID),categoryId(Category ID),order(Sort method) etc., you can combine them as needed to precisely control the range and order of documents to be displayed.
paginationTags are used to implement pagination navigation display.
InarchiveListTagstype="page"In mode, the system will automatically calculate all the necessary information for pagination. This information can be obtained throughpaginationtags and rendered 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:
pagesIt is a variable name that contains all the data and links required for pagination.show="5"The parameter indicates that the pagination navigation displays up to 5 page number links (excluding the home page, last page, previous page, and next page buttons).This helps to maintain the simplicity of pagination navigation, especially when there are many pages.pagesThe variable contains multiple sub-objects and properties used to build the complete navigation:TotalItems: Total number of documents.TotalPagesTotal number of pages.CurrentPageCurrent page number.FirstPageLink information of the home page (Nameis "Home",Linkis the link address,IsCurrentDetermine whether the current page is selected).LastPage: Link information at the end of the page.PrevPage: Link information at the previous page. This object may be empty if there is no previous page.NextPage【en】：Next page link information. If there is no next page, this object may be empty.Pages【en】：An array containing links to middle page numbers, each element includesName【en】：(page number),Link[Link address],IsCurrent.
By these fields, you can flexibly build pagination navigation that matches the design style of your website. Please make sure to according toIsCurrentAdd this attribute to the current pageactiveClasses to provide clear user feedback.
Integration example: complete document list pagination template structure.
To make the document list and pagination navigation work and display at the same time, they are usually placed in the same template file, for example, the category list page ({模型table}/list.html) or search results page (search/index.html).
This is a combinedarchiveListandpaginationcomplete 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 example code demonstrates how to retrieve the document list and pagination navigation on the same page, and use simple inline styles to visually differentiate them.In practical applications, you would integrate it into more complex website layouts and use external CSS files for styling control.
Common Questions (FAQ)
Why is my pagination navigation not displayed, or displayed incorrectly?
The most common reason is that you are callingarchiveList(or}tagDataList/commentListWhen a tag is specified withouttypeparameter settings"page". If set to"list", the tag will only return the specifiedlimitnumber of documents, and will not provide the data required for pagination. Please check yourarchiveListcall, and ensure it is{% archiveList archives with type="page" ... %}Moreover, if the total number of query results is less thanlimitthe set number of items to display per page, pagination navigation may also not be displayed, as pagination is not needed.
How to modify the number of articles displayed per page?
You can adjust byarchiveListthe tag inlimitto control the number of documents displayed per page. For example, if you want to display 20 articles per page, you can setlimit="10"Change tolimit="20".
Can I customize the URL structure of pagination links?
AnqiCMS will automatically generate pagination links according to the pseudo-static rules you set in the background.In most cases, you do not need to manually modify the URL structure of the pagination links.paginationTags provide aprefixThe parameter allows you to define a custom URL pattern. For example,prefix="?p={page}"You can name the page number parameter aspHowever, this is usually an advanced feature, and it is recommended to modify the AnqiCMS routing and pseudo-static mechanism after a deep understanding.