In website operation, efficiently managing and displaying a large amount of content is the key to improving user experience.When the content list is too long, a reasonable pagination mechanism not only makes it easier for users to browse but also optimizes the page loading speed, indirectly improving the search engine friendliness.In AnQiCMS, implementing pagination functionality and flexibly controlling the display quantity of page numbers is a relatively direct and powerful process.

Elegantly display pagination links and flexibly control the number of page numbers in AnQiCMS

On your AnQiCMS website, when the number of articles, products, or other list items increases, you will find that stacking all the content on a single page is not conducive to user browsing and may also affect the page loading speed.At this time, the pagination feature is particularly important. AnQiCMS provides intuitive template tags to help you easily implement the pagination display of content, and can flexibly adjust the display style of page numbers according to your needs.

Prepare pagination data: Enable pagination mode for the list

To use the pagination feature of AnQiCMS, first make sure that your data list tags (such asarchiveListused for article/product lists,commentListused for comment lists,tagDataListThis is used to configure pagination for the list of articles associated with tags. This is done by adding in the tagtype="page"Parameter to achieve.

For example, if you want to display a list of articles on a page and want it to support pagination, you can write it like thisarchiveListTags:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <p>{{item.Description}}</p>
            </a>
        </li>
    {% empty %}
        <li>当前列表没有任何内容。</li>
    {% endfor %}
{% endarchiveList %}

Here, type="page"Tell the system that this list needs pagination processing, andlimit="10"It specified that 10 items are displayed per page. The system will store the query results inarchivesthe variable for you to loop through.

To display pagination links: usepaginationTag

Once the data list is ready, the next step is to use the AnQiCMS providedpaginationThe tag generates and displays pagination navigation. This tag is very intelligent, as it automatically generates a complete page number navigation structure based on the context of the current page (such as the total number of items, the current page number, etc.)

paginationThe basic usage of the tag is as follows:

{% pagination pages with show="5" %}
    {# 在这里放置您的分页链接HTML结构 #}
{% endpagination %}

In{% pagination %}tags, we define a variable namedpagesto receive all pagination information. ThispagesAn object contains all the data needed to build pagination navigation, such as:

  • TotalItems: Total number of content items.
  • TotalPages: Total number of pages.
  • CurrentPage: The current page number.
  • FirstPage: Home object, including links (Link) and names (Name), and whether it is the current page (IsCurrent)
  • LastPage: End page object, structure andFirstPageSimilar.
  • PrevPageThe previous page object exists only when it is not the first page.
  • NextPageThe next page object exists only when it is not the last page.
  • PagesAn array containing all the middle page number objects, each object also hasLink/NameandIsCurrentProperty.

CombinearchiveListTag, here is a complete pagination navigation code example:

{# 假设这里是您的内容列表（与上文 archiveList 示例代码相同） #}
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <p>{{item.Description}}</p>
            </a>
        </li>
    {% empty %}
        <li>当前列表没有任何内容。</li>
    {% endfor %}
{% endarchiveList %}

{# 分页导航区域 #}
<div class="pagination">
    {% 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 %}

        {# 中间页码链接，循环 pages.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>
    {% endpagination %}
</div>

In this example, we usepagesAn object's various properties build a complete pagination navigation that includes home page, previous page, middle page numbers, next page, and last page. Byitem.IsCurrentproperties, you can easily add the current page number toactiveMake the class highlight visually to enhance user experience.

Control the number of pages displayed:showThe magic of parameters

Flexibly control the number of page numbers displayed in pagination navigation, which is the key to improving user experience and page simplicity. AnQiCMSpaginationTag throughshowparameters, allowing you to easily achieve this.

showThe value is an integer that specifies how many page numbers to display before and after the current page. For example:

  • show="3": If the current page is the 5th page, it will display, in addition to the current page... 2 3 4 [5] 6 7 8 ...Such page number structure, a total of displaying 3 page numbers before and after the current page.
  • show="5": Displaying 5 page numbers before and after the current page.
  • show="0"If you only want to display navigation such as 'Previous page', 'Next page', 'Home', 'End page', etc., and do not need to display specific page numbers, you canshowis set to0.

You can adjust according to the design style of the website and the user's habitsshowThe value. For example, websites with a large amount of content and the need for quick navigation can be appropriately increasedshowThe value, while a website with a flat content structure can maintain a smallershowvalue to keep the page tidy.

Just modifypaginationin the labelshowJust set the parameters:

{# 显示当前页码前后各2个页码 #}
{% pagination pages with show="2" %}
    {# ... 您的分页链接HTML结构 ... #}
{% endpagination %}

Practical application and precautions

  • Ensure that the data list enables pagination:Again emphasize, only when your data list tag (such asarchiveList) is settype="page",paginationthe tag can be normal