When building a website with AnQiCMS, it is particularly important to have reasonable pagination navigation when we need to display a large amount of content, such as article lists, product lists, etc.It not only improves user experience, making it easier for visitors to browse and find content, but also helps search engines better crawl the website.The Auto CMS provides a very intuitive and powerful pagination tag, making it easy to display content lists in pagination.
Step 1: Prepare content list data
To implement the pagination of content lists, first you need to usearchiveListTag to get data.This tag is the core used in the AnQi CMS to call various types of document lists.The key is that we need to clearly inform the system that this list needs to be paginated, rather than loaded all at once.
For this, when usingarchiveListthe tag, you need totypeparameter settings"page"Also, bylimitParameter to specify how many items to display per page. For example, if you want to display 10 articles per page under the current category, you can set it like this:
{% archiveList archives with type="page" limit="10" %}
{# 循环显示文章内容 #}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<p>{{item.Description}}</p>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</a>
</li>
{% endfor %}
{% endarchiveList %}
Here,archivesIt is a variable name we define, which includes all the article data on the current page. The nextforThe loop will traverse these data, displaying the title, link, introduction, and publish date of each article.
Step 2: Introduce pagination tags, build navigation
InarchiveListLabels are obtained and displayed after the current page content, and then the pagination tags of Safe CMS can be introduced.paginationto generate the pagination navigation. This tag is usually placed inarchiveListthe closing tag of the tag.
paginationThe label needs a variable to store pagination information, usually we would name itpagesIn addition,showThis parameter is very useful, it determines how many page number buttons are displayed at the same time in the pagination navigation, for exampleshow="5"Indicates that up to 5 page numbers are displayed.
The pagination label will provide a series of built-in objects and properties to help us build a complete navigation structure, including:
pages.TotalItems: Total number of contents.pages.TotalPages: Total number of pages.pages.CurrentPageCurrent page number.pages.FirstPage/pages.LastPage: Objects pointing to the first page and the last page.pages.PrevPage/pages.NextPage：指向上一页和下一页的对象。pages.Pages：一个包含所有中间页码信息的数组，可以通过fora loop to iterate and display.
每个页码对象（例如pages.FirstPageorpages.Pagesofitem）containsName（页码显示名称）、Link(Page link), andIsCurrent(Whether it is the current page, used for highlighting display) and other properties.
Here is a general example of building pagination navigation:
<div>
{% 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>
Through the above code, you will get a fully functional pagination navigation, including the first page, previous page, next page, last page, and page number links in the middle, and the current page will be highlightedactiveThe style class for highlighting.
Complete example: article list and pagination navigation
Combine the above two steps, and you can easily implement pagination navigation display of content lists in the Safe CMS.
<div class="article-list-container">
{# 第一步：获取需要分页的文章列表数据 #}
{% 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>
<small>发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</small>
</a>
</div>
{% empty %}
<p>该分类下暂时没有文章。</p>
{% endfor %}
{% endarchiveList %}
{# 第二步：生成分页导航 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination-nav">
<li class="pagination-info">总计：{{pages.TotalItems}}条，共{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
<li class="page-link-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{% if pages.PrevPage %}
<li class="page-link-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
{% endif %}
{% for item in pages.Pages %}
<li class="page-link-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{item.Link}}">{{item.Name}}</a>
</li>
{% endfor %}
{% if pages.NextPage %}
<li class="page-link-item"><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
{% endif %}
<li class="page-link-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
{% endpagination %}
</div>
</div>
Through these simple tag combinations, Anqi CMS can help you quickly add pagination features to your website content, whether it's articles, products, or other custom content models, making it easy to implement and greatly enhancing the practicality and user experience of the website.
Common Questions (FAQ)
1. Why is the pagination navigation not displayed on my content list page?
This is usually because when usingarchiveListortagDataListand other content list tags, you have not settypeparameter settings"page"Only whentype="page"When, the CMS will calculate pagination information and provide it topaginationtags are used. Also, checklimitwhether the parameters are set properly, if the total number of contents is less than or equal tolimitThe system will not display pagination navigation either
2. How to adjust the number of items displayed per page?
To adjust the number of items displayed per page, just modifyarchiveListthe tag inlimitthe parameter value. For example,limit="10"tolimit="20"This parameter directly determines the number of pages and the density of content per page, allowing each page to display 20 items.
3. How is the URL format of pagination links generated? Can I customize it?
The pagination link URL format of AnQi CMS is automatically generated based on the "pseudo-static rules" you configure in the background. For example, if you choose the numeric mode, the link may look like/archive/page-2.htmlThis; if it is a model naming pattern, it may contain the model name. Usually, the default pseudo-static rules can meet most needs. If you need a high degree of customization, you canpaginationthe label useprefixParameters to redefine URL patterns, but this feature is quite advanced and requires inclusion.{page}Placeholders to indicate the page number location, and it must ensure that it matches the routing rules of your website.