How to make it easy for users to browse a large amount of content on the website and find the information they are interested in is a crucial issue.Especially on pages such as article lists and product displays, reasonable pagination navigation not only enhances user experience but is also an indispensable part of search engine optimization (SEO).paginationTags, helping us easily generate professional and user-friendly pagination navigation for website content.

Let's delve deeper into how to make use of Anqi CMSpaginationTags, creating a smooth pagination experience for website content.

UnderstandingpaginationThe core function of the tag

Firstly, it needs to be clarified.paginationThe label itself is not used to retrieve article 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, througharchiveListortagDataListObtained list data with tags, calculate and render a pagination navigation structure consisting of home page, previous page, specific page number, next page, and last 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.

In most cases, we will cooperate witharchiveListlabel (ortagDataList/commentListSupport pagination list labels (）to usepaginationwhen you are inarchiveListSet intype="page"parameter and specifylimitWhen set to (number of items per page), Anqi CMS will automatically prepare all the necessary data for pagination for you, and this data will be used aspaginationinput for tags.

paginationThe parameters and internal structure of tags

paginationTags accept a main parameter.showIt is used to control how many page buttons are displayed in pagination navigation. For example, settingshow="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 practical and can help us avoid the pagination navigation becoming too long and cumbersome 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 includes a series of useful properties such as:

  • TotalItems: Total number of items in the list.
  • TotalPages: Total number of pages.
  • CurrentPageThe current page number is being accessed.
  • FirstPageAn object that includes the name and link of the homepage, usually used for the 'Home' button.
  • LastPageAn object that contains the name and link of the last page, typically used for the 'Last Page' button.
  • PrevPageAn 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.
  • PagesAn array that contains objects for all the middle page numbers, with each object includingName【en】：(page number),Link(Page link), andIsCurrent(Whether the current page, a boolean value, can be used to highlight the current page style).

Through these rich properties, we can flexibly build various layouts and styles of pagination navigation.

Practice Exercise: Building a Pagination Navigation that conforms to user habits

Imagine that we are building a list page for a news website, hoping to display 10 articles per page, and the pagination navigation should intelligently display the 5 page numbers around the current page. Below 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 tells the security CMS that we want to display items per page, with 10 items per page. Then, after the list content is displayed, we callpaginationLabel it and assign its result topagesvariable, and throughshow="5"Control the number of pages displayed.

InpaginationWithin the tag, we utilizepagesthe various attributes of the variable, and construct the pagination navigation in order. For example,pages.FirstPage.LinkProvided the link to the homepage,pages.PrevPageExists only when the current page is not the first page, which makes the 'Previous Page' button intelligently display or hide. The core is to traversepages.PagesGenerate specific page button arrays and utilizeitem.IsCurrentto add buttons for the current pageactiveclass for highlighting with CSS. Finally, we also demonstrated how to utilizeTotalItems/TotalPagesandCurrentPageShow the summary information of the current page.

Advanced techniques and precautions.

  • SEO optimization and pseudo-static:The Anqi CMS is very friendly to SEO, after configuring the URL rules under the "Function Management" section of the background "Static Rule" (for example, using{module}-{id}.htmlor{catname}-{page}.htmlsuch a pattern),paginationThe link generated by the tag will automatically follow these rules.This means that your pagination links will be static, making them easier to be crawled and indexed by search engines, thereby improving the website's SEO performance.
  • Dynamic filtering and search result pagination:Whether the user filters through categories, tags, or searches by entering keywords in the search box,paginationLabels can intelligently read the query parameters from the current URL and automatically include these parameters when generating pagination links.