How to implement pagination for article lists, product lists, or Tag lists?

Managing website content, especially when the amount of content becomes increasingly large, how to allow visitors to quickly find the information they need while maintaining smooth page loading is an important issue.AnQiCMS was designed with this in mind from the beginning, it provides a set of intuitive and powerful pagination features that allow your article list, product list, and even Tag list to achieve elegant pagination display.

We all know that when there are many articles or products under a category, displaying them all on a single page not only slows down the loading speed but also makes users feel confused in the massive amount of information.The pagination feature exactly solves this problem, it splits a large amount of content into several small pages, with each page displaying only a portion of the content, thereby optimizing user experience and website performance.

Step 1: Prepare the content list and enable pagination mode

In Anqi CMS, to implement pagination for articles, products, or any other content model-based list, you first need to use the corresponding list tags to retrieve the data. For example, with an article list, we usually usearchiveListLabel. The function of this label is to obtain a list of document data under specified categories or specific conditions.

The key is that you need to explicitly tell the system that this list needs to be paginated. This is done byarchiveListSet in the labeltype="page"Parameters can be used to achieve this. At the same time, you canlimitParameters can be used to control how many items are displayed per page.

For example, if you want to display the latest 10 articles on a page and enable pagination, your template code might look like this:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h3>{{item.Title}}</h3>
            <p>{{item.Description}}</p>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </a>
    </li>
    {% empty %}
    <li>
        当前没有任何文章内容。
    </li>
    {% endfor %}
{% endarchiveList %}

In this code block,archivesIt is a variable defined by us, which will carry fromarchiveListThe data of the current page of articles obtained from the tag.type="page"Declared that the list needs pagination, whilelimit="10"It limited the display of 10 articles per page. When there is no content,{% empty %}the part will kindly prompt the visitor.

Second step: introduce pagination navigation tags

Only getting pagination data is not enough to provide a complete user experience. Visitors still need a pagination navigation to switch between different pages. At this time, the built-in of Anqi CMSpaginationTags come into play. This tag is specifically used to render pagination navigation links and states.

paginationTags are usually witharchiveListWhen used in conjunction with list tags, it automatically recognizes the pagination information of the current list and generates the corresponding navigation links. You canshowThe parameter controls how many page number buttons are displayed in the pagination navigation, for exampleshow="5"This means that up to 5 consecutive page numbers can be displayed.

A complete pagination navigation usually includes elements such as Home, Previous page, specific page numbers, Next page, and End page, etc., to provide comprehensive navigation capabilities. Below is an example of combining list content with pagination navigation:

<div>
    {# 文章列表内容区域 #}
    {% archiveList archives with type="page" limit="10" %}
        {% for item in archives %}
        <div class="article-item">
            <a href="{{item.Link}}">
                <h2>{{item.Title}}</h2>
                <p>{{item.Description}}</p>
                <div class="meta">
                    <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                    <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    <span>浏览量：{{item.Views}}</span>
                </div>
            </a>
            {% if item.Thumb %}
            <a href="{{item.Link}}">
                <img src="{{item.Thumb}}" alt="{{item.Title}}">
            </a>
            {% endif %}
        </div>
        {% empty %}
        <p>当前分类下暂时没有文章。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 分页导航区域 #}
    <div class="pagination-nav">
        {% pagination pages with show="5" %}
            {# 首页链接 #}
            <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>

            {# 上一页链接 #}
            {% if pages.PrevPage %}
            <a class="page-link" href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
            {% endif %}

            {# 中间页码链接 #}
            {% for item in pages.Pages %}
            <a class="page-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
            {% endfor %}

            {# 下一页链接 #}
            {% if pages.NextPage %}
            <a class="page-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
            {% endif %}

            {# 末页链接 #}
            <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>

            <span class="page-info">
                总计 {{pages.TotalItems}} 条，共 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页
            </span>
        {% endpagination %}
    </div>
</div>

This code first displays the list content, followed by the pagination navigation.pagesThe variable contains all the information needed for pagination, including the current page number, total number of pages, total number of entries, as well as links to the first page, last page, previous page, next page, and middle page numbers, and the current status. By traversingpages.PagesYou can flexibly render page number buttons.item.IsCurrentBoolean values can help you easily judge and highlight the current page.

Other pagination applications of list types

This pagination mechanism of AnQi CMS has high versatility.This means that, whether it is a product list, Tag list, or comment list, you can use the same logic to implement pagination.

• Product list pagination:If you want to paginate the product list, just need toarchiveListin the labelmoduleIdThe parameter is set to the ID corresponding to the product model (assuming the product model ID is 2), and other pagination parameters and logic remain unchanged.
• Tag list pagination:For documents under a specific Tag, you can usetagDataListtag, set as welltype="page"andlimitthe parameter and cooperatepaginationtags to display pagination.
• Comment list pagination:The comment list usescommentListtags, with the help ofarchiveId(The article/product ID of the comment) as welltype="page"andlimitto implement pagination.

The core idea is that as long as it supportstype="page"the list label of the parameter, it can be perfectly matched withpaginationthe tag.

Advanced Application: Pagination of Search Results

When your website provides a search function and the number of search results is large, pagination is also indispensable. The search result pagination function of Anqi CMS is very intelligent and convenient.

On the search page (usually the default path is/search)archiveListthe tag can automatically read the URL query parameters inq(search keyword), and filter the content according to this keyword. You do not need to inarchiveListSpecify manually in the tagqThe system will complete it for you.

Here is an example of a simple search form:

<form method="get" action="/search">
    <div class="search-box">
        <input type="text" name="q" placeholder="请输入搜索关键词" value="{{urlParams.q}}">
        <button type="submit">搜索</button>
    </div>
</form>

After submitting the form, the user will be taken to/search?q=您的关键词such a URL./searchIn the template, you can use it as shown in the article list abovearchiveListcooperatepaginationto display the search results of pagination.

**Practice and Precautions

1. URL static optimization:To enhance SEO effectiveness and user experience, it is recommended to configure pseudo-static rules for pagination URLs. The pseudo-static management function of AnQi CMS supports including variables in the rules.{page}For example,/{module}-{id}.htmlor `/ {catname}-{page