In AnQi CMS, as the content on our website becomes increasingly rich, how to efficiently organize and present this information so that visitors can easily find what they need in a vast amount of content has become a key issue.Outstanding content list navigation, especially the pagination feature, not only enhances user experience but is also an indispensable part of search engine optimization (SEO).The Auto CMS provides a powerful and flexible pagination tag, allowing you to easily configure user-friendly content list navigation.
The foundation of content list: configure content retrieval tags
In the Auto CMS, all content lists, whether articles, products, or other custom models, cannot do without similararchiveListThis list label. These labels are responsible for fetching the content you specify from the database. When we need to enable pagination for these lists,archiveListthe tag intypeThe parameter is particularly important, we need to set it.'page'.
For example, if you want to display the 10 latest articles released and provide pagination navigation for them,archiveListThe label may be configured as follows:
{% 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>
{% empty %}
<li>该列表暂时没有任何内容。</li>
{% endfor %}
{% endarchiveList %}
Here,archivesThe variable will contain the document list of the current page, and all the information required for pagination navigation will be automatically encapsulated by the system into thearchiveListlabel associated withpagesIn the variable, waiting for our next call.
The core of pagination navigation:paginationThe clever application of tags
After getting the content list, the next step is to utilizepaginationThe pagination tag is used to build visible navigation elements.paginationThe tag does not exist independently, it is related to thearchiveListtags work together througharchiveListinternally generatedpagesvariables to obtain all pagination information.
The basic usage is like this:
{% pagination pages with show="5" %}
{# 这里将是您分页导航的具体HTML结构 #}
{% endpagination %}
Here,pagesis what we get fromarchiveListor other list labels (such astagDataList/commentListetc.) that contain pagination information. andshow="5"This parameter is very useful, it determines the maximum number of page link entries to display in pagination navigation. For example,show="5"This means it will display the current page number as well as the two pages before and after it, totaling 5 page number links, which allows the pagination bar to be neither too long nor too short, while still providing sufficient navigation options.
pagesThe variable internally contains all the information you need to build pagination navigation, such as total number of items (TotalItems), total number of pages (TotalPages), current page (CurrentPage) and a link to the home page (FirstPage)、末页 (English)LastPage)、上一页 (English)PrevPage)、下一页 (English)NextPage) of the complete object. Most importantly, it also hasPagesArray that contains all the detailed information of the intermediate page numbers.
We can throughpagesVarious fields in the variable, flexibly building a complete and interactive pagination navigation:
pages.TotalItems: Displays the total number of contents.pages.TotalPages：Displays the total number of pages.pages.CurrentPage：Displays which page is currently being viewed.pages.FirstPage.Nameandpages.FirstPage.Link：Used to build the “Home” link.FirstPage.IsCurrentCan determine whether it is the first page.pages.PrevPage.Nameandpages.PrevPage.Link：Used to build the “Previous Page” link. It is necessary to check.pages.PrevPageDoes it exist, if it is the first page, there will be no previous page.pages.Pages: This is an array that contains all visible page numbers (byshowParameters control). We can iterate over this array to generate the intermediate page number links. Eachitem(page item) hasitem.Name：(page number),item.Link(Page link), anditem.IsCurrent(determine if it is the current page, used to add styles).pages.NextPage.Nameandpages.NextPage.Link：Used to build the 'next page' link. Also need to checkpages.NextPagewhether it exists.pages.LastPage.Nameandpages.LastPage.Link：Used to build the 'last page' link.LastPage.IsCurrentCan determine whether it is the last page.
The following is a commonly used pagination navigation code example, which shows how to use this information to build a complete pagination bar:
<div class="pagination-container">
{% pagination pages with show="5" %}
<p>
共 <span>{{pages.TotalItems}}</span> 条内容，
总 <span>{{pages.TotalPages}}</span> 页，
当前第 <span>{{pages.CurrentPage}}</span> 页
</p>
<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>
{% endpagination %}
</div>
A complete example combining the content list with pagination navigation
toarchiveListWithpaginationCombine tags, and you can implement the complete function of obtaining pagination navigation from content in a single template file.
<h1>最新文章</h1>
<ul class="article-items">
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li class="article-item">
<a href="{{item.Link}}" class="article-link">
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}}" class="article-thumb">
{% endif %}
<div class="article-info">
<h2 class="article-title">{{item.Title}}</h2>
<p class="article-description">{{item.Description}}</p>
<div class="article-meta">
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{item.Views}}</span>
</div>
</div>
</a>
</li>
{% empty %}
<li class="no-content">当前分类下暂时没有文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
{# 分页导航区域 #}
<div class="pagination-