English translation: As an experienced website operation expert, I know that implementing pagination for article lists in AnQiCMS not only improves user experience and makes content browsing smoother, but also helps with search engine optimization, ensuring that the website content is better indexed.Next, I will combine the template mechanism of AnQiCMS and explain in detail how to easily achieve this feature.
In AnQiCMS template, implement the pagination display function of article lists
In today's content-rich websites, how to effectively display a large number of articles and ensure that users can browse conveniently is a challenge that every website operator needs to face.AnQiCMS as an enterprise-level content management system, provides powerful and flexible template functions, making it simple and intuitive to implement pagination for article lists.Through the reasonable use of built-in tags, you can easily add pagination navigation to your article list, thus optimizing the user experience and enhancing the overall professionalism of the website.
Understand the template mechanism of AnQiCMS
AnQiCMS's template system adopts syntax similar to the Django template engine, making template writing both powerful and easy to get started. In the template files, we mainly operate data and control logic through two methods:
- 变量（Variable）: Use double curly braces
{{变量名}}来输出数据。 - Label (Tag)：Use single curly braces and percentage signs
{% 标签名 参数 %}来执行逻辑操作，如循环、条件判断以及调用特定功能。
All template files are stored in:/templatedirectory, and named with.html结尾。对于文章列表页，通常会使用如{模型table}/list.htmlor{模型table}/list-{分类id}.htmlSuch naming rules. Understanding these basic rules will help us to implement the pagination function more effectively.
核心功能：文章列表标签（archiveList）与分页标签（pagination）
AnQiCMS provides two key template tags to build article lists and pagination functionality:
archiveListtagsThis tag is used to retrieve the article list from the database. To implement pagination, we need to pay special attention to its two parameters:type="page"This is the core of enabling pagination:typeset"page"whenarchiveListThis will not only return the article data of the current page, but also prepare all the necessary information for pagination,paginationUse the label.limitThis parameter is used to specify the number of articles to be displayed per page, for example,limit="10"This means 10 articles are displayed per page.
paginationtags： This tag is used to generate pagination navigation links on the front end. It receives a pagination object prepared by the tag (usually namedarchiveList标签准备好的分页对象（通常命名为pages)，and generate 'Previous page', 'Next page', and page number navigation elements according to the data.paginationThe label supports an important parameter:showThis parameter controls the number of page numbers displayed in the pagination navigation, for example.show="5"Indicates that up to 5 consecutive page number links are displayed.
Gradually implements the pagination function.
Now, let's implement the pagination display of article lists in the AnQiCMS template step by step through specific code examples.
Suppose we want toarticle/list.htmlIn the list page (or any article list page) display the article list and add pagination.
Step 1: Get the article list data
Firstly, we need to use the templatearchiveListTag to get article list. Remember, to enable pagination,typeThe parameter must be set to ."page".
{# 在模板文件的适当位置，通常是内容区域的顶部或中间 #}
{% archiveList archives with type="page" limit="10" %}
{# 使用for循环遍历每一篇文章 #}
{% for item in archives %}
<div class="article-item">
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p class="description">{{item.Description}}</p>
<div class="meta">
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量：{{item.Views}}</span>
</div>
{% if item.Thumb %}
<a href="{{item.Link}}">
<img class="thumbnail" alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
{% endif %}
</div>
{% empty %}
<p>抱歉，当前分类下还没有任何文章。</p>
{% endfor %}
{% endarchiveList %}
In this code block:
- We go through
{% archiveList archives with type="page" limit="10" %}Get article data, and name itarchives, showing 10 articles per page. {% for item in archives %}Iterate over the obtained articles and display information such as the article title, description, category, publication date, and views.{% empty %}The block will bearchivesThis is a prompt message displayed when empty, which is a good user experience practice.{{stampToDate(item.CreatedTime, "2006-01-02")}}Demonstrates how to usestampToDateThe tag formats the Unix timestamp of the article into a readable date.
第二步：添加分页导航
文章列表渲染完成后，紧接着我们就需要添加分页导航了。在archiveListTags{% endarchiveList %}之后，紧接着使用paginationLabel.
{# 紧接着上面的 archiveList 标签之后 #}
{% archiveList archives with type="page" limit="10" %}
{# ... 文章列表渲染代码 ... #}
{% endarchiveList %}
{# 分页导航区域 #}
<div class="pagination-nav">
{% pagination pages with show="5" %}
<ul>
{# 显示总条数和页数等信息，可选 #}
<li>总计：{{pages.TotalItems}}篇文章，共{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
{# 首页链接 #}
<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>
{% endpagination %}
</div>
In this code block:
- We use
{% pagination pages with show="5" %}来生成分页导航。pagesYesarchiveListThe pagination data object passed internally,show="5"Indicates that up to 5 page numbers are displayed. pagesThe object provides rich properties such asTotalItems(total number of articles),TotalPages(Total number of pages),CurrentPage(Current page number), andFirstPage/PrevPage/NextPage/LastPageand page objects, each page object containsLink(link) andName(display name).pages.Pagesis an array that includes all visible page numbers, and we traverse it to display specific page numbers.forWe traverse it to display specific page numbers.item.IsCurrentIs a boolean value used to determine if the current page number is the active page, making it convenient for you to add a highlight style through CSS.
Merge these two sections of code into your article list template, and a complete, user-friendly pagination article list will appear.
Precautions
- Location of template fileMake sure your list template file (for example
article/list.htmlEnglish located in the correct position of AnQiCMS template directory. type="page"indispensableIf you forget toarchiveListsetting in the labeltype="page",paginationThe label will not be able to obtain the correct pagination data, resulting in pagination navigation not being displayed or displayed incorrectly.- CSS styleThe above code only provides the HTML structure. To make the pagination navigation look beautiful, you need to add the corresponding CSS styles according to your website design.
.pagination-navand.page-itemAdd the corresponding CSS styles for elements like these. - Custom QuantityYou can adjust according to your actual needs.
archiveListoflimitParameters (number of articles per page) andpaginationofshowParameters (number of pages displayed)