In website operation, providing clear and easy-to-use pagination navigation for content lists can not only greatly enhance user experience, but also optimize the efficiency of search engine crawling, helping content to be discovered better.AnQiCMS (AnQiCMS) fully understands this point, 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 discuss together how to implement this feature in the Anqi CMS template, making your website content organized.
Understanding the pagination core of AnQi CMS: Data acquisition and navigation display
Implementing pagination in AnQi CMS primarily revolves around two core elements:
- Obtaining content list in a pagination formatThis requires specific template tags to indicate to the system that the content you want to retrieve is in batches, rather than all at once.
- Display pagination navigationOnce content is returned in a paginated form, a navigation component is required to allow visitors to navigate between pages.
Next, let's look at the specific implementation of these steps one by one.
第一步：Get the list of pagination content
AnQi CMS providesarchiveListandtagDataListtags to get different types of content lists. To enable pagination, the key is to add these tags.type="page"parameters withlimitParameter.
type="page"is a very important indicator, it tells the security CMS that you want to return a paged result set.limitis 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, used to store article data after pagination.type="page"Explicitly specified that this is a pagination query.limit="10"Then set to display 10 articles per page.
Similarly, if you want to display a document list under a specific tag and enable pagination, you can usetagDataListtags, whose usage is similar toarchiveListsimilar, and it also needstype="page"andlimitParameter.
Step 2: Display pagination navigation
After obtaining the pagination content, the next step is to add the actual pagination navigation links. Anqi CMS provides a very convenientpaginationThis tag will automatically generate links such as 'Home', 'Previous Page', 'Next Page', and page numbers in the middle according to the pagination data of the current page.
paginationLabels are usually used withshowParameters are used together, this parameter is used to control the number of page numbers displayed in the middle page link. For example,show="5"up to 5 page number links will be displayed around the current page, ensuring the simplicity of navigation.
When 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.TotalPagesTotal number of pages.pages.CurrentPageCurrent page number.pages.FirstPage: The home page object (includingLinkandIsCurrentproperties).pages.LastPage：End object (contains)LinkandIsCurrentproperties).pages.PrevPage：Previous page object (if exists).pages.NextPage：Next page object (if exists).pages.Pages：An array, containing objects for the middle page numbers (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 combinationpagesProperties in an object, you can build various styles and layout pagination navigation. For example, you can judgepages.FirstPage.IsCurrentto add links for the current page.activeClasses, so that they can be highlighted with CSS.
Comprehensive example: Add pagination to the document list.
Combine the above two steps, a complete document list page with pagination in the template may look like this:
{% 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