When managing website content, we often encounter such situations: there are a large number of articles, products, or news under a certain category. If all the content is piled on one page, it not only causes the page to load slowly and affects user experience, but also makes it difficult for visitors to find what they need in a sea of information.At this time, the introduction of pagination function becomes particularly important.Pagination can split a large amount of content into several small pages, allowing users to browse page by page, greatly enhancing the usability and access efficiency of the website.
In AnQiCMS, the implementation of a document list display with pagination is very intuitive and flexible, mainly due to its powerful template tag system. We will mainly use two core tags:archiveListandpagination.
核心要素：构建带分页的文档列表 (English)
To display a paginated list of documents on a page, we first need to retrieve the document data from the database and then add pagination navigation on this basis.
archiveListTags: the source of data
archiveListLabels are the core tags used to obtain document lists in AnQiCMS.It is very flexible and can be used to filter and sort the documents you want to display by various parameters.archiveListIt will be used to generate pagination lists.
Key parameters:type="page"
When you arearchiveListsetting in the labeltype="page"When, AnQiCMS will know that this list needs to be paginated.It not only returns the document data of the current page but also passes the complete page data (such as total number of pages, current page number, first page link, last page link, etc.) to the pagination tags for subsequent use.
Other commonly used parameters:
moduleIdSpecify which content model (such as articles, products) document to retrieve.moduleId="1"Represents the article model.categoryIdSpecify the category to retrieve documents. You can pass a single category ID, or use commas to separate multiple IDs, for example,categoryId="1,2,3"If you do not specify, AnQiCMS will try to read the category ID of the current page. If you do not want it to be read automatically, you can set it explicitly.categoryId="0".limit：Control the number of documents displayed per page, for examplelimit="10"Represents displaying 10 documents per page.order：定义文档的排序方式，常见的有id desc(Sorted by ID in reverse order, i.e., the most recent documents),views desc(Sorted by views in reverse order, i.e., popular documents).q：Used for search functionality, when the user submits keywords through the search box, this parameter can capture and be used to filter documents that contain the keyword in the title.
paginationTag: The helmsman of pagination.
paginationTags andarchiveListLabel closely cooperate, responsible for generating pagination navigation links at the bottom of the page. It will receivearchiveListPass the pagination information and render it into clickable previous page, next page, page number list, etc.
Key parameters:show
showThe parameter controls how many page links are displayed at the same time in the pagination navigation. For example,show="5"This indicates that a total of 5 page numbers are displayed, including 2 page numbers on each side of the current page.
可用信息：
pagination标签提供了一系列非常方便的变量，让您可以灵活构建分页导航：
pages.TotalItems: Total number of documents.pages.TotalPages: Total number of pages.pages.CurrentPage：Current page number.pages.FirstPage：Home object, includingName(如 “首页”) 和Link(首页URL) 以及IsCurrentproperties.pages.PrevPage：Previous page object, also includesNameandLink.pages.Pages：An array that contains the page number objects of the middle part, each object hasName/LinkandIsCurrentproperties.pages.NextPage：Next page object.pages.LastPage：End page object.
Using this information, you can easily build pagination navigation that matches the style of your website.
Actual operation: Combine them.
Now, let's look at an actual code example to see how to implement a document list with pagination in the AnQiCMS template.Assume we want to display articles under a certain category on a list page, with 10 articles per page and add pagination navigation.
<div class="document-list-container">
<ul class="document-list">
{% archiveList archives with type="page" categoryId="1" limit="10" order="id desc" %}
{% for item in archives %}
<li class="document-item">
<a href="{{item.Link}}" class="item-link">
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
<div class="item-meta">
<span class="category-name">分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span class="publish-date">发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span class="views">浏览量：{{item.Views}}</span>
</div>
</a>
{% if item.Thumb %}
<div class="item-thumb">
<img src="{{item.Thumb}}" alt="{{item.Title}}">
</div>
{% endif %}
</li>
{% empty %}
<li class="no-content">
抱歉，当前分类下没有任何文档。
</li>
{% endfor %}
{% endarchiveList %}
</ul>
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination-nav">
{# 首页链接 #}
<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>
<p class="pagination-info">
总计 {{pages.TotalItems}} 篇文章，共 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页。
</p>
{% endpagination %}
</div>
</div>
Code analysis:
archiveListPart:- We have defined a variable
archivesStore the obtained document list. type="page"Pagination mode is explicitly enabled.categoryId="1"Specify the retrieval of documents under the category with ID 1. You can replace it with your category ID as needed.limit="10"Set the display of 10 articles per page.order="id desc"Arrange by document ID in descending order, usually meaning the latest articles are at the top.{% for item in archives %}Loop through each document on the current page,itemThe variable contains various attributes of the document,Title/Link/Descriptionetc.{% categoryDetail with name="Title" id=item.CategoryId %}Used to display the name of the category it belongs to in the document list.{{stampToDate(item.CreatedTime, "2006-01-02")}}Format the timestamp of the document's creation timeYYYY-MM-DDFormat.{% empty %}Display a prompt message when the block has no documents to enhance user experience.
- We have defined a variable
paginationPart:- We have defined a variable
pagesto receivearchiveListPass the pagination data. show="5"Indicates that up to 5 page number links can be displayed at the same time in the pagination navigation (e.g., 1 2 [3] 4
- We have defined a variable