Fine control of browsing rhythm: AnQiCMS pagination tag page number range setting analysis

In the world of content management and website operations, an efficient and user-friendly pagination system is crucial for enhancing user experience and optimizing search engine crawling efficiency.AnQiCMS, as an enterprise-level content management system developed based on the Go language, deeply understands this, and provides us with flexible and powerful pagination features.Today, let's delve deeply into one of the core capabilities of AnQiCMS pagination tags: how to finely set the display range of page numbers, such as only displaying a certain number of pages before and after the current page, thereby presenting users with a simpler and more focused browsing interface.

Many website operators have pondered this question: When the volume of website content is large, with pagination numbers often reaching hundreds or even thousands of pages, listing all page numbers at once not only occupies a lot of page space but may also make users feel confused and at a loss.An ideal pagination state is often one that allows users to know their current position and easily navigate to adjacent pages or specific page numbers while maintaining a clean interface.AnQiCMS's pagination tag is born for this purpose, it cleverly solves this pain point through an intuitive parameter.

The essence of pagination tag:showThe clever use of parameters

AnQiCMS's template system adopts syntax similar to the Django template engine, its pagination function is by{% pagination %}Label to carry. When we need to apply this feature in document lists, comment lists, or any content that requires pagination display, we usually use it like this: 

{% pagination pages with show="5" %}
    {# 这里是分页链接的渲染代码 #}
{% endpagination %}

Hereshow="5"ofshowThe parameter is the key to controlling the display range of page numbers. It determines how many adjacent page number links will be displayed before and after the current page number. For example, if we setshowis set to5And if the current user is browsing the 10th page, the pagination navigation is likely to intelligently display similar... 8 9 10 11 12 ...Such a page number sequence. This means it will expand on both sides of the current page.(show - 1) / 2pages, withshowValue controls the total number of middle page numbers displayed, ensuring that users can always see a reasonable and meaningful page number window, avoiding an endless list of page numbers.

In-depth analysis:pagesRich information of the object

{% pagination %}The tag will return apagesThe object (you can name this variable according to your preference), this object encapsulates all the information related to pagination, providing extremely detailed data support for our front-end rendering.It is not just a simple list of page numbers, but also a comprehensive one that includes overviews, statuses, and navigation links.

To be specific,pagesThe object includes:

  • TotalItems: How many data items in total, which allows us to clearly understand the overall scale of the content.
  • TotalPages: How many pages of content in total, providing users with breadth information about the content.
  • CurrentPage: The current page being browsed by the user, which is the core of positioning user experience.
  • FirstPage: The home object, which includes the name and link of the homepage, making it convenient for users to return quickly.
  • LastPageThe end page object, which also includes the name and link of the end page, for easy user navigation to the end of the content.
  • PrevPageThe previous page object, which provides the name and link when there is a previous page.
  • NextPage: The next page object, providing its name and link when the next page exists.
  • Pages: This is a crucial array object, containing all the items that need to be displayed in the pagination navigation.Middle page number.showThe parameter settings directly affect thisPagesThe number of elements in the array and the specific page number value.

EachPagesin the array,item(which is a page object) all haveName(page number or name),Link(Page link) andIsCurrent(Boolean value indicating whether it is the current page) these properties. ByIsCurrentproperties, we can easily add special styles to the current page number to highlight it.

Practice: Build a clear pagination navigation

UnderstoodshowParameters andpagesThe structure of the object, we can start to build a practical and beautiful pagination navigation. Here is a typical AnQiCMS pagination rendering code snippet, which fully utilizes the above features:

<div class="pagination">
    {% pagination pages with show="5" %} {# 设定中间页码显示范围为5个 #}
    <ul>
        {# 显示总数、总页码数、当前页信息 #}
        <li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>

        {# 首页链接：如果当前是首页，则添加active样式 #}
        <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 %}

        {# 中间页码区域：这里是 show 参数作用的核心 #}
        {% 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 %}

        {# 末页链接：如果当前是末页，则添加active样式 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    {% endpagination %}
</div>

By this code, AnQiCMS will generate the middle page number list according toshowparameters intelligently. For example, whenshow="5"and the total number of pages is very large, if the current page is the 10th page,pages.PagesThe array may contain[8, 9, 10, 11, 12]such page numbers, and if the current page is the first page, it may contain[1, 2, 3, 4, 5](or fewer if the total number of pages is insufficient). This dynamic adjustment mechanism greatly enhances the practicality and aesthetics of pagination navigation.

It is worth mentioning that the powerful modular design concept of AnQiCMS is also reflected here. ThispaginationThe tag itself does not query data, it needs to be combined with likearchiveList(Document list label) orcommentList(Comment list label) etc. data query tags, and these query tags must be specifiedtype="page"so thatpaginationthe label can obtain the correct pagination context data.

Conclusion

AnQiCMS's pagination tag is simple in itsshowThe parameter provides website operators with fine-grained control over the page display range.This not only makes the website pagination navigation more intelligent and friendly, effectively improving the user browsing experience, but also indirectly optimizes the page loading speed, avoiding unnecessary DOM element rendering.For websites that pursue efficiency, beauty, and powerful functions, AnQiCMS undoubtedly provides a reliable and customizable solution.

Frequently Asked Questions (FAQ)

  1. Ask: Why did I setshowparameters, but the pagination navigation still shows all page numbers, or does not show pagination?Answer: AnQiCMS'paginationThe label needs to be used with the data list label (such asarchiveListorcommentList) together, and these data list labels must be explicitly specifiedtype="page"Parameters. For example:{% archiveList archives with type="page" limit="10" %}. If this is missingtype="page",paginationThe label may not be able to retrieve the correct total number of pages and current page information, causing pagination to fail to render normally, or to display as the default behavior.

  2. Ask: Does AnQiCMS pagination tag support the input box function to jump to page N?Answer: According to the current document information,paginationThe tag primarily provides navigation functions such as home page, previous page, middle page number list, next page, and last page, and does not directly integrate the input component for jumping to the Nth page.If this feature is needed, the operator can combine it with additional frontend JavaScript implementation, by listening to the submit event of the input box, constructing, and jumping to the target page URL.

  3. Ask: Can I customize the URL format of the pagination links? For example,/page/2changed to/p-2.html?Answer: AnQiCMS'paginationThe tag has aprefixParameters allow you to customize the URL pattern of the page number part, for example,prefix="?page={page}"But the more common and recommended way is to use the 'pseudo-static rules' management function of the AnQiCMS backend.You can flexibly set the URL structure of the entire website in the background, including the naming pattern of pagination URLs.Once the background configuration of the pseudo-static rules is complete,paginationLabels are automatically generated to match the new rules and do not require manual modificationprefixParameters. For more detailed information, please refer to the 'Static Rules Usage Help' in the document.