How to create a customizable pagination component for the document list in Anqi CMS template?
It is crucial to display and manage document lists efficiently when building a content-rich website.Especially for sites with a large amount of content, a well-designed and functional pagination component can not only greatly improve user experience, but also optimize the website's SEO performance, helping search engines better crawl and index content.AnQiCMS (AnQiCMS) with its flexible template engine and powerful tag features, allows us to easily create highly customizable pagination components for document lists.
The AnqiCMS template system adopts a syntax similar to Django template engine, through{% 标签 %}to handle logic,{{ 变量 }}to output content. When implementing pagination, we mainly use two core tags:archiveList(Document list tag) andpagination(Pagination tags). These tags work together, the former is responsible for fetching document data from the database by page, and the latter generates operable page navigation based on this data.
First step: Prepare pagination data source - UsearchiveListTag
To create a paged document list, you first need to tell Anqi CMS that you want to retrieve data in the form of pagination. This is done byarchiveListlabel'stype="page"To implement the parameter. Whentypeis set topagethen,archiveListIt is no longer simply a list of all qualified documents, but will retrieve data according to the current page number and the set number of documents per page, and at the same time forpaginationLabel the necessary pagination information.
For example, if we want to get the list of articles under a certain category and want to display 10 articles per page, the template code might look like this:
{% archiveList archives with type="page" categoryId="1" limit="10" %}
{% for item in archives %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
<p>{{ item.Description }}</p>
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</li>
{% empty %}
<li>暂无内容</li>
{% endfor %}
{% endarchiveList %}
In this code block,archivesThe variable contains the document data of the current page, we can traverse it like a normal list.categoryId="1"Specified the category ID,limit="10"Then set to display 10 articles per page.
Step two: Build the pagination navigation component - DeeplypaginationTag
InarchiveListAfter the tag generates the pagination data, you can use it immediatelypaginationThe tag can be used to build the actual page number navigation.paginationThe tag will automatically obtain byarchiveListThe pagination context information provided by (or other pagination data source tags) allows us to finely control the display of page numbers.
paginationThe usage of tags is typically to wrap them in a container element and it provides an object namedpagesthis object, itpagesAn object contains all the detailed information related to pagination, such as:
TotalItemsTotal number of documents:TotalPagesTotal number of pages:CurrentPageCurrent page:FirstPageThe home page object includes:NameandLink)LastPageThe end page object includesNameandLink)PrevPageThe previous page object includesNameandLink)NextPageThe next page object includesNameandLink)PagesAn array of middle page number objects, each withName(page number),Link(link address) andIsCurrent(whether it is the current page) attribute.
paginationThe tag supports a very practical parameter:show.showThe parameter is used to control how many page number links are displayed at the same time in page navigation, for exampleshow="5"This means that up to 5 consecutive page numbers can be displayed.
Now, let's look at a complete, customizable pagination component example:
<div class="pagination-container">
{% archiveList archives with type="page" categoryId="1" limit="10" %}
<ul class="document-list">
{% for item in archives %}
<li>
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
<div class="meta">
<span>发布于：{{ stampToDate(item.CreatedTime, "2006年01月02日") }}</span>
<span>阅读量：{{ item.Views }}</span>
</div>
</li>
{% empty %}
<li class="no-content">当前分类暂无文档。</li>
{% endfor %}
</ul>
{% pagination pages with show="7" %}
<nav class="page-numbers">
<ul>
{# 显示首页链接 #}
<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 %}current{% 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>
<div class="page-info">
<span>总计 {{ pages.TotalItems }} 篇文档，共 {{ pages.TotalPages }} 页</span>
<span>当前第 {{ pages.CurrentPage }} 页</span>
</div>
</nav>
{% endpagination %}
</div>
Code analysis:
archiveListLabel:The outer layer is used firstarchiveListGet the documents that need pagination.type="page"Is the key, it activates the pagination mode.pagination pages with show="7":Following it,paginationThe tag is called, and the pagination data is assigned topagesVariable.show="7"It means that in addition to the first page, last page, previous page, and next page, at most 7 consecutive page numbers can be displayed.- Home, Last Page, Previous Page, Next Page:By
pages.FirstPage/pages.LastPage/pages.PrevPageandpages.NextPageObjects, we can easily build these navigation links.{% if %}Ensure that the link is rendered only when these pages exist (for example, not on the first page), otherwise the previous page is displayed. - Middle page number:
{% for item in pages.Pages %}