How to implement pagination functionality for article or product lists in AnQiCMS templates?
How to implement pagination functionality for article or product lists in AnQiCMS templates?
For any content management system, effective management and presentation of a large amount of content are core needs.When the number of articles or products on a website increases, if there is no reasonable pagination mechanism, users may feel tired while browsing, and the website's loading speed may also be affected.AnQiCMS as an efficient content management system provides concise and powerful template tags, helping us easily implement pagination for article or product lists, thereby greatly enhancing user experience and website performance.
In AnQiCMS, implementing pagination mainly involves the coordination of two core template tags: used to obtain list data:archiveList(or similar list tags like)categoryList/tagDataList）and dedicated to generating pagination navigationpagination. Understanding their working principles and parameter settings is the key to building a smooth pagination experience.
Step one: prepare the list data——usingarchiveListTag
Firstly, we need to call the corresponding list tags in the template to retrieve the article or product data. For example, using the most common article or product list, we will usearchiveListThe tag can not only query content but also inform the AnQiCMS system that we need to paginate this content through specific parameters.
While usingarchiveListTwo key parameters are essential for implementing pagination:
type="page"This is the most important parameter, it explicitly tells the system that the current list needs to be displayed with pagination. If this parameter is not present,archiveListThe tag will only retrieve a specified number of list data and will not provide any pagination information.limit: This parameter is used to set the number of articles or products to be displayed per page. For example,limit="10"It indicates that 10 items are displayed per page.
A basicarchiveListAn example of use might be as follows, it will retrieve the article model (assuming)moduleId="1") and paginate the content for 10 items per page:
{% archiveList archives with moduleId="1" type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
</a>
</li>
{% empty %}
<li>暂时没有更多内容。</li>
{% endfor %}
{% endarchiveList %}
In this code block,archivesIt is a custom variable name that will contain all the articles or product data on the current page. ThroughforLoop througharchives, we can sequentially display the title, link, and introduction information of each item.{% empty %}A block provides a friendly prompt, displayed when there is no content.
Step 2: Insert pagination navigation - usingpaginationTag
After obtaining the list data, the next step is to generate clickable pagination navigation links. AnQiCMS providespaginationTag to complete this task. This tag can automatically identifyarchiveListGenerate pagination data and render a navigation bar including home page, previous page, next page, and specific page numbers.
paginationLabels usually need to be paired withshowparameters to control how many page number buttons are displayed on the page. For example,show="5"this means that up to 5 page number buttons are displayed.
paginationThe tag will encapsulate all pagination-related information in a variable namedpages(The variable name can be customized, but it is customary to usepages)pagesThe object contains many useful properties, such as:
pages.TotalItemsTotal number of items.pages.TotalPagesTotal number of pages.pages.CurrentPageCurrent page number.pages.FirstPageInformation of the first page (including)NameandLink)pages.LastPageInformation of the last page (including)NameandLink)pages.PrevPage: Previous page information (includingNameandLink)pages.NextPage: Next page information (includingNameandLink)pages.Pages: An array containing intermediate page number information, each element also includesName(page number) andLink(link), as well asIsCurrent(Is the current page) Boolean value.
A standard pagination navigation structure example would usually look like this:
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination-list">
{# 首页链接 #}
<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>当前第 {{pages.CurrentPage}} 页 / 共 {{pages.TotalPages}} 页 (总共 {{pages.TotalItems}} 条)</p>
{% endpagination %}
</div>
By checkingIsCurrentProperties, we can add specific CSS styles for the current page number, for example,activeA class to provide visual feedback.
Step 3: Integrate into the actual template
toarchiveListandpaginationCombined together, we can integrate it into the actual template file (for example, the article category list page'sarticle/list.htmlor product list page'sproduct/list.html) Implement complete pagination functionality. Typically, list content is placed in the main area of the page, and pagination navigation is placed below the list.
<div class="content-list">
{# 第一步：文章或产品列表内容 #}
{% archiveList archives with moduleId="1" type="page" limit="10" %}
{% for item in archives %}
<div class="item">
<a href="{{item.Link}}">
<h2>{{item.Title}}</h2>
<p>{{item.Description}}</p>
<span class="meta">{{item.CreatedTime|stampToDate:"2006-01-02"}} - {{item.Views}} 浏览</span>
</a>
</div>
{% empty %}
<p class="no-content">抱歉，当前分类下还没有内容。</p>
{% endfor %}
{% endarchiveList %}
{# 第二步：分页导航 #}
<div class="pagination-area">
{% pagination pages with show="7" %}
<ul class="pagination-controls">
<li class="{% if pages.FirstPage.IsCurrent %}disabled{% endif %}">
<a href="{{pages.FirstPage.Link}}">首页</a>
</li>
{% if pages.PrevPage %}
<li>
<a href="{{pages.PrevPage.Link}}">上一页</a>
</li>
{% endif %}
{% for pageItem in pages.Pages %}
<li class="{% if pageItem.IsCurrent %}active{% endif %}">
<a href="{{pageItem.Link}}">{{pageItem.Name}}</a>
</li>
{% endfor %}
{% if pages.NextPage %}
<li>
<a href="{{pages.NextPage.Link}}">下一页</a>
</li>
{% endif %}
<li class="{% if pages.LastPage.IsCurrent %}disabled{% endif %}">
<a href="{{pages.LastPage.Link}}">尾页</a>
</li>
</ul>
<p class="pagination-info">当前第 {{pages.CurrentPage}} 页 / 共 {{pages.TotalPages}} 页 (总共 {{pages.TotalItems}} 条)</p>
{% endpagination %}
</div>
</div>
By following these steps, we not only achieved effective content display, but also provided users with convenient navigation. The pagination feature of AnQiCMS is designed very intuitively, as long as you mastertype="page"andpaginationThe usage of labels can easily handle the pagination needs of various lists.