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 enhancing the search engine friendliness.In AnQiCMS, implementing pagination and flexibly controlling the number of displayed page numbers is a relatively direct and powerful process.

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

In your AnQiCMS website, when there is an increase in articles, products, or other list content, 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 moment, the pagination feature becomes particularly important.AnQiCMS provides intuitive template tags to help you easily implement content pagination and can flexibly adjust the display of page numbers as needed.

Prepare pagination data: enable pagination mode for the list

To use the pagination feature of AnQiCMS, first make sure that your data list tag (such asarchiveListused for article/product listcommentListused for comment listtagDataListThis is used to associate the article list with tags and is configured in pagination mode. This is achieved by addingtype="page"parameters.

For example, if you want to display an article list on a page and you 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 to be handled with pagination,limit="10"Then it specifies that 10 items are displayed per page. The system will store the query results inarchivesthe variable for you to loop through.

Display pagination links: Usepaginationtags

Once the data list is ready, you can proceed to use the features provided by AnQiCMSpaginationGenerate and display pagination navigation using tags.This label is very smart, it automatically generates a complete page navigation structure based on the current page context (such as the total number of items, the current page number, etc.).

paginationThe basic usage of tags is as follows:

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

In{% pagination %}tags, we have defined a namedpagesThis variable is used to receive all pagination information. Thispagesobject 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 being accessed.
  • FirstPage：Home object, containing links(Link) and names(Name), as well as whether it is the current page(IsCurrent).
  • LastPageThe end object, structure isFirstPagesimilar.
  • PrevPageThe previous page object, only exists when it's not the first page.
  • NextPageThe next page object, only exists when it's not the last page.
  • PagesAn array, containing all middle page objects, each object also hasLink/NameandIsCurrentproperties.

CombinearchiveListtags, 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 have constructed a complete pagination navigation including home page, previous page, middle page numbers, next page, and last page. Byitem.IsCurrentproperties, you can easily add to the current page numberactiveMake the class visually highlighted to enhance the user experience.

Control the number of pages displayed:showThe clever use of parameters

Flexibly control the number of page numbers displayed in pagination navigation, which is crucial for enhancing user experience and the simplicity of the page. It is a feature of AnQiCMS.paginationTagged throughshowParameter, allowing you to easily achieve this.

showThe value of the parameter 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 except for the current page, it will display... 2 3 4 [5] 6 7 8 ...such a page number structure, displaying a total of 3 page numbers before and after the current page.
  • show="5"The current page displays 5 page numbers before and after.
  • show="0"If you only want to display 'Previous page', 'Next page', 'Home', 'End page' and other navigation without showing specific page numbers, you can setshowset0.

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

Just modifypaginationthe tag inshowthe parameters:

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

Application and Precautions in Practice

  • Ensure that the data list is enabled with pagination:Emphasize again, only when your data list tag (such asarchiveList) is settype="page",paginationthe tag can function normally