精细掌控浏览节奏：AnQiCMS 分页标签的页码范围设置解析

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, is well-versed in this field and provides us with flexible and powerful pagination functions.Today, let's delve into one of the core capabilities of AnQiCMS pagination tags: how to finely set the display range of page numbers, such as showing only a few 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 content volume of a website is large, with pagination numbering in the hundreds or even thousands of pages, listing all page numbers at once not only occupies a large amount of page space, but is also likely to make users feel dizzy and confused.The ideal pagination state is often one that allows users to know their current position and easily jump to adjacent pages or specific page numbers while maintaining a clean interface.AnQiCMS's pagination tag is born for this, it cleverly solves this pain point through an intuitive parameter.

分页标签的精髓：Englishshowingenious use of parameters

AnQiCMS's template system uses syntax similar to Django's template engine, its pagination feature is by{% pagination %}Labels can carry information. 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 setshowset5and if the current user is browsing page 10, the pagination navigation is likely to smartly display something similar... 8 9 10 11 12 ...such page number sequence. This means it will expand around the current page, both to the left and right(show - 1) / 2pages, withshowControls how many intermediate page numbers are displayed in total, ensuring that users always see a reasonable and meaningful page number window and avoid an endless list of page numbers.

In-depth analysis:pagesRich information of the object

{% pagination %}Tags will return apagesObject (you can name this variable according to your preference), this object encapsulates all the information related to pagination and provides extremely detailed data support for our front-end rendering.It is not just a simple list of page numbers, but also an integrated overview, status, 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 in total, providing users with information about the breadth of the content.
  • CurrentPage：The current page number being browsed by the user, which is the core of positioning user experience.
  • FirstPage：The home page object, which includes the name and link of the home page, making it convenient for users to return quickly.
  • LastPage：End page object, which includes the name and link of the end page for easy user navigation to the end of the content.
  • PrevPage：Previous page object, which provides the name and link when there is a previous page.
  • NextPage：Next page object, provides the name and link when there is a next page.
  • Pages：This is a crucial array object, it contains all the elements 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 an array.item(i.e., a page object) all haveName(page number or name),Link(Page link), andIsCurrentThese properties (Boolean value, indicating whether it is the current page). ThroughIsCurrentproperties, we can easily add special styles to the current page number to highlight.

实战演练：构建一个清晰的分页导航

Understoodshowparameters withpagesThe structure of the object, and we can start building a practical and beautiful pagination navigation. Here is a typical AnQiCMS pagination rendering code snippet that fully utilizes the aforementioned 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>

Through this code, AnQiCMS will generate the middle page list intelligently according toshow. For example, whenshow="5"and the total number of pages is large, if the current page is the 10th page,pages.PagesArray may contain[8, 9, 10, 11, 12]such page numbers, and if the current page is the 1st page, it may contain[1, 2, 3, 4, 5](or fewer, if the total number of pages is not enough). 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) 或commentList(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.

Concluding remarks

AnQiCMS's pagination tags are simpleshowParameters, providing the website operator with fine-grained control over the page display range.This not only makes the website's pagination navigation more intelligent and friendly, effectively improving the user's browsing experience, but also indirectly optimizes the page loading speed, avoiding unnecessary DOM element rendering.For websites that pursue efficiency, beauty, and powerful features, AnQiCMS undoubtedly provides a reliable and easy-to-customize solution.

Common Questions (FAQ)

  1. Question: Why did I setshowparameters, but the pagination navigation still shows all page numbers, or does not show pagination?Answer: AnQiCMS'spaginationLabel needs to be used with the data list label (such asarchiveListorcommentList) together, and these data list labels must be explicitly specifiedtype="page"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, resulting in the inability to render pagination normally, or displaying as the default behavior.

  2. 问：AnQiCMS 分页标签是否支持显示“跳转到第 N 页”的输入框功能？答：根据目前的文档信息，paginationThe label mainly provides navigation functions such as home page, previous page, middle page number list, next page, and last page, but does not directly integrate the input component for 'jump to page N'.If this feature is needed, the operator can implement it extra with frontend JavaScript, by listening to the submit event of the input box, and constructing and jumping to the URL of the target page.

  3. 问：Can I customize the URL format of pagination links? For example,/page/2to/p-2.html?Answer: AnQiCMS'spagination标签 have aprefixparameter, allowing you to customize the URL pattern of the page number part,prefix="?page={page}".But the more commonly used and recommended method is to use the "pseudo-static rule" management feature of the AnQiCMS backend.You can flexibly set the entire website's URL structure in the background, including the naming pattern for pagination URLs.paginationThe label will be automatically generated with links that comply with the new rules, no manual modification is requiredprefixParameters. For more detailed information, please refer to the 'Faked Static Rule Usage Help' in the document.