When managing website content, we often encounter such situations: there are many articles, products, or news under a certain category. If all the content is piled on a single page, it not only slows down the page loading and affects the user experience, but also makes it difficult for visitors to find the information they need among a vast amount of information.At this point, introducing pagination is 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, implementing a document list display with pagination is very intuitive and flexible, mainly due to its powerful template tag system. We mainly use two core tags:archiveListandpagination.
Core Element: Build a paginated document list
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 top of that.
archiveListTag: Source of Data
archiveListThe tag is the core tag used in AnQiCMS to obtain the document list.It is very flexible, and can be filtered and sorted by various parameters to display the documents you want.The most critical point for a paginated list is that you need to explicitly tellarchiveListIt will be used to generate pagination lists.
Key parameters:type="page"
when you arearchiveListSet 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, home link, end link, etc.) to the pagination tags used later.
Other commonly used parameters:
moduleIdSpecify which content model (such as articles, products) document to retrieve. For example:moduleId="1"Represents the article model.categoryId: Specify the document to retrieve under a certain category. You can pass a single category ID, or separate multiple IDs with commas, for examplecategoryId="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 explicitly set it tocategoryId="0".limit: Controls the number of documents displayed per page, for examplelimit="10"Indicates that 10 documents are displayed per page.order: Defines the sorting method of the document, common ones includeid desc(Sorted by ID in descending order, i.e., the most recent publications),views desc(Sorted by views in descending order, i.e., popular documents).qThis parameter is used for search functionality, when the user submits a keyword through the search box, this parameter can capture and be used to filter documents containing the keyword in the title.
paginationTag: The pilot of pagination
paginationwith the tag andarchiveListThe tag works closely together, responsible for generating the pagination navigation links at the bottom of the page. It will receivearchiveListPass the pagination information and render it into clickable elements such as previous page, next page, page number list, etc.
Key parameters:show
showThe parameter controls how many page number links are displayed at the same time in the pagination navigation. For example,show="5"This means that up to 2 page numbers on either side of the current page are displayed, plus the current page, totaling 5.
Available information:
paginationTags provide a series of very convenient variables, allowing you to flexibly build pagination navigation:
pages.TotalItems: Total document count.pages.TotalPages: Total number of pages.pages.CurrentPage: Current page number.pages.FirstPage: Home object, includingName(such as “Home”) and:Link(Home page URL) as well asIsCurrentProperty.pages.PrevPage: The previous page object also includesNameandLink.pages.PagesAn array that contains page number objects in the middle part, each object hasName/LinkandIsCurrentProperty.pages.NextPage: Next page object.pages.LastPage: Last page object.
Using this information, you can easily build pagination navigation that matches the design 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.Suppose we want to display articles under a certain category on a list page, 10 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 defined a variable
archivesTo store the list of documents obtained. type="page"Page mode is explicitly enabled.categoryId="1"Specify the document under the category ID 1, you can replace it with your category ID as needed.limit="10"Set to display 10 articles per page.order="id desc"Sort by document ID in descending order, which usually means the latest articles are at the top.{% for item in archives %}Loop through each document on the current page,itemThe variable contains various properties of the document, such asTitle/Link/Descriptionetc.{% categoryDetail with name="Title" id=item.CategoryId %}Used to display the category name of the document in the document list.{{stampToDate(item.CreatedTime, "2006-01-02")}}Format the creation timestamp of the document.YYYY-MM-DDForm.{% empty %}Display a prompt when there are no documents, improving user experience.
- We defined a variable
paginationPart:- We 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 defined a variable