As an experienced website operations expert, I fully understand the importance of an efficient and user-friendly content management system for the development of a company.The AnQiCMS (AnQiCMS) provides strong support for content operations with its high-performance architecture in Go language and flexible template mechanism.When building a content-rich website, good pagination navigation not only enhances user experience but is also a key factor in search engine optimization.

Today, let's delve into a very practical template feature of AnQiCMS: how to traverse cleverlypages.PagesAn array dynamically generates a set of clickable middle page number links that are both beautiful and practical. This is not just a technical implementation, but also an operation strategy to enhance the professionalism of the website and user stickiness.

EnglishCMS pagination magic: Create clickable page link for seamless reading experience

In the vast world of websites with abundant content, how can users efficiently find the information they need?In addition to accurate search and clear classification, a well-designed, responsive pagination navigation system is also instrumental.The auto CMS is well-versed in this, providing us with an intuitive and powerful pagination tag that makes dynamically generating page numbers a breeze.Farewell to the cumbersome manual maintenance of page numbers, allowing the system to intelligently guide users.

What we focus on is the template engine of EnglishCMSpaginationThe one returned by the labelpagesobject.pagesThe object is the intelligent center of the entire pagination mechanism, it not only contains an overview of the current pagination status, such as the total number of itemsTotalItems, the total number of pages)TotalPagesand current pageCurrentPage, but more importantly, it provides an array namedPages. ThisPagesThe array is the key to dynamically generating middle page number links.

Core: Traversalpages.PagesArray, dynamically generate page number links

Imagine when a user browses a list page, they would like to see a page number sequence like "1 2 3 … 7 8 9", and be able to directly click to jump to any page. The Anqi CMS'spages.PagesThe array is designed for this purpose. It internally stores a series of objects representing intermediate page numbers, each of which contains all the information needed to build clickable links.

Let's go through a specific template code example to analyze how to iterate through this array and render it in combination with the actual state of the page:

<div class="pagination-container">
    {% pagination pages with show="5" %}
        {# 渲染“首页”链接，如果存在且不是当前页 #}
        {% if pages.FirstPage and not pages.FirstPage.IsCurrent %}
            <a href="{{ pages.FirstPage.Link }}" class="page-link">{{ pages.FirstPage.Name }}</a>
        {% endif %}

        {# 渲染“上一页”链接，如果存在 #}
        {% if pages.PrevPage %}
            <a href="{{ pages.PrevPage.Link }}" class="page-link">{{ pages.PrevPage.Name }}</a>
        {% endif %}

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

        {# 渲染“下一页”链接，如果存在 #}
        {% if pages.NextPage %}
            <a href="{{ pages.NextPage.Link }}" class="page-link">{{ pages.NextPage.Name }}</a>
        {% endif %}

        {# 渲染“尾页”链接，如果存在且不是当前页 #}
        {% if pages.LastPage and not pages.LastPage.IsCurrent %}
            <a href="{{ pages.LastPage.Link }}" class="page-link">{{ pages.LastPage.Name }}</a>
        {% endif %}
    {% endpagination %}
</div>

In the above code, we first use{% pagination pages with show="5" %}Initialize pagination data with a tag. Here,show="5"It is a very practical parameter that determines how many middle page number links are displayed before and after the current page number (excluding “Home”, “Previous”, “Next”, and “End” pages).This setting can effectively control the length of pagination navigation, avoiding visual confusion caused by too many page numbers, which is particularly important on mobile views.

Then, we go through a series of{% if %}condition judgments to render the "Home" and "Previous Page" links.pages.FirstPageandpages.PrevPagewhich represent the detailed information of the "Home" and "Previous Page", including their links (Link) And Display Name (Name) And a Boolean ValueIsCurrentUsed to determine if it is the current page. We usually only display them when they are not the current page, ensuring the logic of navigation and user experience.

The real core lies in{% for item in pages.Pages %}loop. Here,pages.Pageseach element in the arrayitemThis represents an independent middle page number.item.LinkThis is the URL address corresponding to the page number.item.NameThis is the page number displayed on the page.item.IsCurrentBoolean values can help us add special styles (such as highlighting) to the current page number, making it clear to the user where they are currently located.

Finally, similarly, we through{% if %}Conditional judgment to render the “next page” and “end page” links, and complete the construction of the entire pagination navigation.

Integrate pagination into the actual content list

In order topaginationLabels can correctly retrieve and process pagination data, it is usually used witharchiveList/tagDataListor other content list labels. When using these list labels, be sure totypeparameter settings"page", and specifylimitControl the number of articles displayed per page, for example:

{% archiveList archives with type="page" limit="10" %}
    {# 这里是文章内容的循环渲染区域 #}
    {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <p>{{ item.Description }}</p>
        </div>
    {% endfor %}
    {% empty %}
        <p>抱歉，目前没有相关内容。</p>
{% endarchiveList %}

{# 在此下方放置我们之前定义的分页代码块 #}
<div class="pagination-container">
    {# ... 你的 pagination 标签和循环代码 ... #}
</div>

Through such combinations,archiveListResponsible for retrieving and preparing the current page's article data from the backend, and also passing all the necessary pagination context information.paginationLabel it so that it can accurately generate the corresponding page link.

Design aesthetics and user experience considerations

Dynamic page number generation is not just a functional implementation, but also a fine-tuning of user experience. We can useitem.IsCurrentThis attribute, combined with the front-end CSS style, gives the current page number unique visual effects, such as changing the background color, font color, or adding a border, allowing users to identify it at a glance.show="5"This parameter provides flexible control, allowing us to adjust the number of middle page numbers based on page layout and content density,