In a content management system, a valid pagination feature is crucial for enhancing user experience and the website's SEO performance.When the amount of content on a website gradually increases, organizing and displaying the content list reasonably allows visitors to browse information more easily and helps search engines better crawl and index the pages.AnQiCMS as an efficient content management system provides flexible and easy-to-use template tags, allowing you to easily implement pagination in templates and customize the display of page numbers as needed.
To implement pagination in the AnQiCMS template, it mainly involves two core steps: first, inform the system that you need to obtain a list of content that can be paginated, and second, render the pagination navigation links on the page.
First step: Get the list of content to be paginated
In your AnQiCMS template file (such as the article list pagearchive/list.htmlor custom category list pagearticle/list.html) you need to usearchiveListOr other content list tags to get articles, products, and other data. The key is that you need to settype="page"parameters to clearly tell the system that you want this list to support pagination. At the same time,limitParameters are used to define how many items are displayed per page.
For example, if you want to display 10 items per page in a list of articles, you can retrieve the data in this way:
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
<span class="date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</a>
</div>
{% empty %}
<p>抱歉，当前分类暂无文章内容。</p>
{% endfor %}
{% endarchiveList %}
In this code block:
archiveListIt is used to get the tags of the document list.archivesIt is a variable name defined by us, used to store the article data obtained, you canforthrough the loopitemto access the details of each article.type="page"This is a key setting to enable pagination.limit="10"specifies that 10 articles are displayed per page.
The second step: Add pagination navigation to the template
After obtaining the content list that supports pagination, the next step is to display the pagination navigation links at the bottom of the page or in other appropriate positions. AnQiCMS provides a specialpaginationLabel. This label will be based onarchiveListThe pagination data obtained by the label, automatically generating "Home", "Previous page", "Next page", "End page" and the page number links in the middle.
The most important thing is that you canshowParameters can be used to flexibly control the display quantity of the middle page number links. For example, if you want the pagination navigation to only display 5 page number links around the current page, you can setshowis set to5.
The following is a complete pagination navigation example code:
<div class="pagination-nav">
{% pagination pages with show="5" %}
<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 循环逐个显示 #}
{% 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.TotalItems}} 条记录，分为 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页。</p>
{% endpagination %}
</div>
In this code block:
pagesIt is a variable that contains all pagination information, it is generated bypaginationtags.show="5"Specified that the middle part can display a maximum of 5 page number links, excluding the first page, previous page, next page, and last page.For example, if the current page is 10, it may display page numbers like '8 9 10 11 12'.pages.FirstPage/pages.PrevPage/pages.NextPage/pages.LastPageRepresent the link objects for home page, previous page, next page and end page, they all haveLink(link address) andName(Display Name) attribute.pages.Pagesis an array that contains the page number objects in the middle part, you can access them viaforLoop through them. Each page object also hasLinkandNameProperty.item.IsCurrentorpages.FirstPage.IsCurrentBoolean values can be used to determine if the current page is selected, thereby addingactiveclasses or other styles for easy identification.
Integrate example: complete article list and pagination code
Combine the above two parts of code, and a basic article list page with pagination is completed.Generally, you would place the content list in one section, followed by pagination navigation.
{# 您的文章列表页模板文件 (例如: template/default/archive/list.html) #}
{# 引入公共头部文件，通常包含网站标题、SEO元信息等 #}
{% include "partial/header.html" %}
<main class="container">
<section class="article-list">
<h2>最新文章</h2>
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
<span class="date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span class="views">{{item.Views}} 阅读</span>
</a>
</div>
{% empty %}
<p>抱歉，当前分类暂无文章内容。</p>
{% endfor %}
{% endarchiveList %}
</section>
{# 分页导航区域 #}
<nav class="pagination-nav">
{% pagination pages with show="7" %} {# 这里我们自定义显示7个页码链接 #}
<ul class="pagination-ul">
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{pages.FirstPage.Link}}" title="首页">{{pages.FirstPage.Name}}</a>
</li>
{% if pages.PrevPage %}
<li class="page-item">
<a href="{{pages.PrevPage.Link}}" title="上一页">{{pages.PrevPage.Name}}</a>
</li>
{% endif %}
{% for item in pages.Pages %}
<li class="page-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{item.Link}}" title="第{{item.Name}}页">{{item.Name}}</a>
</li>
{% endfor %}
{% if pages.NextPage %}
<li class="page-item">
<a href="{{pages.NextPage.Link}}" title="下一页">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}" title="尾页">{{pages.LastPage.Name}}</a>
</li>
</ul>
<p class="pagination-info">总共 {{pages.TotalItems}} 条记录，当前显示第 {{pages.CurrentPage}} / {{pages.TotalPages}} 页。</p>
{% endpagination %}
</nav>
</main>
{# 引入公共底部文件 #}
{% include "partial/footer.html" %}
Remember, in the above codeclass="article-item",class="pagination-nav"This is just an example, you need to beautify these elements according to your website design, making them conform to your website style.
Advanced技巧：Customize pagination URL pattern
Under certain specific requirements, you may need to control the URL structure of pagination links more finely, for example, for SEO purposes or to maintain consistency with existing URL rules. AnQiCMS'spaginationTags providedprefixThe parameter allows you to customize the pagination URL pattern.
For example, if you want the pagination links to look like/articles/page-{page}.html, you can in thepaginationSet it like this in the tag:{% pagination pages with show="5" prefix="/articles/page-{page}.html" %}.