How to dynamically generate clickable middle page number links by traversing the `pages.Pages` array?

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

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

Page magic of AnQi CMS: Creating clickable page number links for seamless reading experience

In the vast world of websites, how can users efficiently find the information they need?In addition to precise search and clear classification, a well-designed and responsive pagination navigation system is also indispensable.AnQi CMS is well-versed in this, providing us with a set of intuitive and powerful pagination tags, making it easy to dynamically generate page numbers.Say goodbye to the麻烦 of manually maintaining page numbers, allowing the system to intelligently guide users.

The core we focus on is the AnQi CMS template engine,paginationthe tag returns thepagesobject. thispagesThe 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 entriesTotalItems, total number of pagesTotalPages, and the current pageCurrentPagebut more importantly, it provides a namedPagesarray. ThisPagesThe array is the key to dynamically generating the middle page link.

Core: Traversepages.PagesArray, dynamically generate page links

Imagine when a user is browsing a list page, they hope to see a page number sequence similar to "1 2 3 ... 7 8 9", allowing them to directly click and jump to any page. Anqi CMS'spages.PagesThe array is born for this. It internally stores a series of objects representing the middle page numbers, each of which contains all the information needed to build clickable links.

Let us 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" %}Tag to initialize pagination data. Here is theshow="5"It is a very practical parameter, which determines how many intermediate page number links are displayed before and after the current page number (excluding "Home", "Previous", "Next", "End").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 end views.

Next, 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 (LinkAnd display name (NameAnd 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 and user experience of navigation.

The real core lies in{% for item in pages.Pages %}loop. Here,pages.PagesarrayitemRepresents an independent middle page number.item.LinkIs the URL address corresponding to the page number,item.NameWhich is the page number displayed on the page.item.IsCurrentBoolean values can help us add special styles to the current page number (such as highlighting), thus clearly telling users where they are.

Finally, similarly, we pass through{% if %}render the "next page" and "last page" links by conditional judgment, completing the construction of the entire pagination navigation.

Integrate pagination into the actual content list

In order topaginationLabels can correctly retrieve and process pagination data, which is usually used witharchiveList/tagDataListor other content list labels. When using these list labels, be sure totypethe parameter to"page"And specifylimitTo control 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 a combination,archiveListResponsible for fetching and preparing the article data for the current page from the backend, and will also pass all the necessary context information for pagination.paginationTag, so that it can accurately generate the corresponding page number links.

Consideration of design aesthetics and user experience

Dynamic page number generation is not just a functional implementation, but also a fine-tuning of user experience. We can utilizeitem.IsCurrentThis property, in conjunction with the front-end CSS style, gives the current page number a unique visual effect, such as changing the background color, font color, or adding a border, so that users can identify it at a glance. At the same time,show="5"This parameter provides flexible control, allowing us to adjust the number of middle page numbers according to the page layout and content density,