In a content management system, a functional pagination is crucial for enhancing user experience and the SEO performance of the website.When the amount of content on the website gradually increases, organizing and displaying the content list reasonably can make it easier for visitors to browse information and help 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 AnQiCMS templates, 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 set parameters to clearly tell the system that you want this list to support pagination.type="page"Parameters, make it clear to the system that you want this list to be paginated.limitThe parameter is used to define how many items are displayed per page.
For example, if you want to display 10 items per page in an article list, you can get 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:
archiveListIs used to obtain the document list tag.archivesIs a variable name defined by us, used to store the obtained article data, you canforin the loop byitemTo access the detailed information of each article.type="page"This is a critical setting for enabling pagination.limit="10"It specifies that 10 articles are displayed per page.
Step two: Add pagination navigation to the template.
After obtaining the content list with pagination support, the next step is to display the pagination navigation links at the bottom of the page or other appropriate positions. AnQiCMS provides a specialpaginationLabel. This label will be generated according toarchiveListThe label retrieves the pagination data, automatically generating "Home
What's most important is, you canshowParameters can be used to flexibly control the display quantity of 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 setshowset5.
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:
pagesIs a variable that contains all pagination information, it is bypaginationTags generated.show="5"Specified to display a maximum of 5 page number links in the middle part, excluding the home 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 links of home page, previous page, next page and end page, they all haveLink("link address"), andName(Display Name) property.pages.PagesIt is an array that contains the page number objects of the middle part, you can useforLoop through them. Each page object also hasLinkandNameproperties.item.IsCurrentorpages.FirstPage.IsCurrentboolean values that can be used to determine if the current page is selected, thus addingactivea class or other styles for easy identification by the user.
Integration 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 and then follow it with 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 the code mentioned aboveclass="article-item",class="pagination-nav"auto translation: Everything is just an example, you need to design these elements according to your website and beautify them through CSS to match your website style.
Advanced Techniques: Customize Pagination URL Pattern
In 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 provideprefixParameters, allowing you to customize the pagination URL pattern.
For example, if you want the pagination links to look like/articles/page-{page}.html, you can set it like this inpaginationtags:{% pagination pages with show="5" prefix="/articles/page-{page}.html" %}.