In website operations, how to allow users to easily browse a large amount of content and find information that interests them is a crucial topic.Especially on pages like article lists and product displays, reasonable pagination navigation not only improves user experience but is also an indispensable part of search engine optimization (SEO).AnQiCMS (AnQiCMS) fully understands this and therefore provides powerful and flexiblepaginationTags, help us easily generate professional and user-friendly pagination navigation for website content.
Let's delve deeper into how to utilize it in AnQi CMS.paginationTag, to create a smooth pagination experience for website content.
UnderstandingpaginationThe core role of tags
First, it needs to be clear.paginationThe tag itself is not used to retrieve articles or product data, it is more like a 'page navigation generator'. Its main responsibility is to generate page navigation based on the context of the current page (for example, byarchiveListortagDataListThe list data obtained by the tag, calculate and render a pagination navigation structure containing home page, previous page, specific page number, next page, and end page. This means that when usingpaginationBefore the label, we must first call the corresponding list label in the template and clearly indicate that pagination is required.
Under normal circumstances, we would cooperatearchiveListlabel (ortagDataList/commentListTags that support pagination can be usedpaginationWhen you arearchiveListsettype="page"Specify the parameter and specifylimitWhen the number of items displayed per page is set, AnQi CMS will automatically prepare all the data required for pagination, and this data will be used aspaginationLabel input.
paginationthe parameters and internal structure of the tag
paginationThe tag accepts a main parametershowIt is used to control the maximum number of page buttons displayed in pagination navigation. For example, setshow="5"It will display up to five page numbers near the current page (excluding the first page, last page, previous page, and next page).This parameter is very useful, it can help us avoid the pagination navigation becoming too long when there are too many page numbers.
When you use{% pagination pages with show="5" %}This way when calling the tag,pagesThe variable will carry all the details about pagination. Thispagesobject contains a series of useful properties, such as:
TotalItemsTotal number of entries in the list.TotalPages: Total number of pages.CurrentPage: Which page is currently being accessed.FirstPageA object that contains the home page name and link, usually used for the 'Home' button.LastPageA object that contains the end page name and link, usually used for the 'End' button.PrevPageA object that contains the name and link of the previous page, available when it is not the first page.NextPageAn object that contains the name and link of the next page, available when it is not the last page.Pages: This is an array that contains all the middle page number objects, each of which also includesName(page number),Link(Page link) andIsCurrent(Whether the current page, a boolean value that can be used to highlight the current page style).
With these rich properties, we can flexibly build various layouts and styles of pagination navigation.
Practical exercise: Build a pagination navigation that conforms to user habits.
Imagine that we are building a list page of articles for a news website, hoping to display 10 articles per page and have a pagination navigation that can intelligently display the 5 page numbers around the current page. Here is a complete template code example:
{# 首先，我们调用 archiveList 标签获取文章列表数据，并指明分页类型为 "page" #}
<div>
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<article class="article-item">
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p>{{item.Description}}</p>
<footer>
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{item.Views}}</span>
</footer>
</article>
{% empty %}
<p>暂时没有文章内容。</p>
{% endfor %}
{% endarchiveList %}
{# 紧接着，在 archiveList 标签的下方，我们就可以使用 pagination 标签来生成分页导航了 #}
<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 %}
{# 中间页码列表，遍历 Pages 数组 #}
{% 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 class="summary">总共 {{pages.TotalItems}} 条内容，分 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页。</p>
{% endpagination %}
</div>
</div>
In this code, we first usearchiveListTag to get article data. Notice thattype="page"andlimit="10"settings, which tell the Anqi CMS that we want to display by page, 10 items per page. Then, after the list content is displayed, we callpaginationLabel and assign its result topagesVariable, and pass throughshow="5"Control the number of pages displayed.
InpaginationWe make use of it within the tagpagesThe properties of the variable are constructed in order to build pagination navigation. For example,pages.FirstPage.LinkProvided the link to the home page,pages.PrevPageIt exists only when the current page is not the first page, which makes the 'Previous page' button smartly display or hide. The core is to traversepages.Pagesthe array to generate specific page number buttons, and to utilizeitem.IsCurrentAdd to the current pageactiveclass, which is convenient for highlighting through CSS. Finally, we also demonstrated how to utilizeTotalItems/TotalPagesandCurrentPageto display the summary information of the current pagination.
Advanced techniques and precautions
- SEO optimization and pseudo-static:SafeCMS is very friendly to SEO, after configuring the URL rules under "Function Management" and "URL Rules" in the background (for example, using
{module}-{id}.htmlor{catname}-{page}.htmlthis kind of pattern),paginationThe generated links will automatically follow these rules. This means that your pagination links will be static, making them easier for search engines to crawl and index, thereby improving your website's SEO performance. - Dynamic filtering and pagination of search results:Whether the user filters through categories, tags, or enters keywords in the search box,
paginationLabels can intelligently read the query parameters of the current URL and automatically add these parameters when generating pagination links. You