How to create pagination navigation for document lists, Tag lists, and other Anqi CMS features?
In website operation, providing clear and easy-to-use pagination navigation for content lists not only greatly enhances user experience, but also optimizes search engine crawling efficiency, helping content to be discovered better.AnQiCMS (AnQiCMS) knows this, and therefore provides powerful and flexible pagination tags in template design, allowing content operators to easily generate pagination navigation for document lists, tag lists, and so on.
Next, we will explore how to implement this feature in Anqi CMS templates, organizing your website content neatly.
Understand the core of pagination in AnQi CMS: data acquisition and navigation display
Implement the pagination function in AnQi CMS, mainly focusing on two core elements:
- Retrieve content list in a paginated formThis needs to use specific template tags to indicate to the system that you want to retrieve the content in batches, not all at once.
- Display pagination navigationOnce content is returned in a paginated form, a navigation component is needed to allow visitors to navigate between pages.
Next, let's look at the specific implementation of these steps one by one.
The first step: Get the list of paginated content
AnQi CMS providesarchiveListandtagDataListUsing these tags to get lists of content of different types. The key to enabling pagination is to add these tags.type="page"Parameters andlimitParameter.
type="page"It is a very important indicator, it tells AnQi CMS that you want the returned data to be a paginated result set.limitThe parameter is used to define how many items are displayed per page.
For example, if you want to display an article list on a category page and enable pagination, you can use it like thisarchiveListTags:
{# 假设我们正在一个分类页面，要获取该分类下的文章列表，每页显示10条 #}
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
<p>{{item.Description}}</p>
<span class="date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</div>
{% empty %}
<p>该分类下暂时没有文章。</p>
{% endfor %}
{% endarchiveList %}
In the above code:
archivesIs a variable name you define to store the article data after pagination.type="page"Specifically, this is a pagination query.limit="10"Then, 10 articles per page were set.
Similarly, if you want to display a document list under a specific tag and enable pagination, you can usetagDataListtags, its usage is similar toarchiveListsimilarly, it also requirestype="page"andlimitParameter.
Second step: Display pagination navigation
After obtaining the pagination content, the next step is to add the actual pagination navigation links. Anqi CMS provides a very convenientpaginationThe tag will automatically generate links such as 'Home', 'Previous Page', 'Next Page', and middle page numbers based on the pagination data of the current page.
paginationTags are usually withshowParameters are used together, this parameter is used to control the number of pages displayed in the middle page link. For example,show="5"Up to 5 page number links will be displayed near the current page, ensuring the simplicity of navigation.
While usingpaginationWhen labeling, you need to define a variable (for examplepages) to receive the pagination object, which contains all the information of the current pagination state:
pages.TotalItems: Total number of content items.pages.TotalPages: Total number of pages.pages.CurrentPage: The current page number.pages.FirstPageThe home page object includes:LinkandIsCurrentProperty).pages.LastPage: End object (including)LinkandIsCurrentProperty).pages.PrevPage: Previous page object (if exists).pages.NextPage: Next page object (if exists).pages.Pages: An array, containing middle page number objects (each object also has}Name/Link/IsCurrent)
The followingpaginationA typical usage example of a label:
<div class="pagination-nav">
{% pagination pages with show="5" %}
{# 可以显示一些分页概览信息 #}
<span class="page-info">共 {{pages.TotalItems}} 条内容，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</span>
{# 首页链接 #}
<a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
{# 上一页链接 - 仅当存在上一页时显示 #}
{% if pages.PrevPage %}
<a class="page-link" href="{{pages.PrevPage.Link}}">上一页</a>
{% endif %}
{# 中间页码链接 #}
{% for item in pages.Pages %}
<a class="page-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
{% endfor %}
{# 下一页链接 - 仅当存在下一页时显示 #}
{% if pages.NextPage %}
<a class="page-link" href="{{pages.NextPage.Link}}">下一页</a>
{% endif %}
{# 尾页链接 #}
<a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
{% endpagination %}
</div>
By flexible combinationpagesAn attribute in an object, you can build various styles and layout pagination navigation. For example, you can judgepages.FirstPage.IsCurrentAdd links to the current page.activeAdd a class to highlight through CSS.
Comprehensive example: add pagination to the document list.
Combining the above two steps, a complete document list page with pagination in the template might look like this:
"`twig {# /template/{modeltable}/list.html or /template/search/index.html #}
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<article class="article-card">
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p class="description">{{item.Description|truncatechars:150}}</p>
<div class="meta-info">
<span>发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{item.Views}}</span>
</div>
</article>
{% empty %}
<p class="no-content">抱歉，这里还没有相关内容。</p>
{% endfor %}
{% endarchiveList %}
{% pagination pages with show="5" %}
<nav aria-label="Page navigation">
<ul class="pagination-list">
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{pages.FirstPage.Link}}" aria-label="首页">首页</a>
</li>
{% if pages.Prev