How to add a unique `data-id` attribute to each page number button in AnQiCMS pagination?

As an old soldier in the field of website operation for many years, I know that every detail can affect the performance of the website, user experience, and even the depth of data analysis.AnQiCMS is a modern content management system developed based on the Go programming language, which provides strong support for our operational work with its high efficiency, flexibility, and ease of expansion.It has a unique Django template engine syntax that allows even relatively complex customization needs to be elegantly implemented through concise code.

Today, let's explore a very practical little trick in daily operations and data analysis: how to add unique buttons for each page number in the AnQiCMS pagination navigationdata-idProperties. This not only helps us track user behavior more accurately, but also brings more possibilities to front-end interaction.

Understand the pagination navigation tags of AnQiCMS.

In AnQiCMS, the pagination feature is supported by powerfulpaginationThe tag can be used to implement. This tag is very flexible, able to automatically generate a complete page navigation structure based on the content list of the current page, including home page, previous page, middle page numbers, next page, and end page.

paginationTags are usually witharchiveListortagDataListcontent list tags to work together, it receives apagesA variable that contains all the information needed for pagination. For example, we might call the pagination tag like this in the template:

<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 %}
        {% 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 structure,pages.Pagesis an array object that contains each page number displayed in the middle (usually a number), each page number itemitemhasName(page number),Link(Page link) andIsCurrent(Is the current page) and other properties. Our goal is to use this information to add a unique identifier to each page linkdata-idProperty.

Why do we need to add to the page buttondata-id?

At first glance, this may seem like a trivial change, but in actual website operations, it can bring many benefits:

1. Precise data tracking and analysisThrough adding a uniquedata-idWe can configure event tracking more accurately. For example, when using Google Analytics, Baidu Statistics, or any other behavioral analysis tool, we can capture which specific page the user clicked on, such asdata-id="page-3") to navigate, rather than just knowing that a pagination button was clicked.This is crucial for analyzing user behavior patterns in deep content browsing, optimizing content organization and pagination strategies.

2. Enhance front-end interaction and user experience: Front-end JavaScript can easily pass throughdata-idProperties to select and operate specific page number buttons. For example, when the user scrolls to the bottom of the page, we can according todata-idHighlight the adjacent page numbers of the current page, or add dynamic effects to specific page number buttons. This allows developers to build richer and smarter user interfaces.

3. Improve maintainability and test convenienceDuring automated testing or debugging,data-idIt provides a stable and unique selector. Compared to relying on CSS class names or HTML structure,data-idIt is less likely to fail due to UI adjustments, thus simplifying the writing and maintenance of test scripts.

Practical: Adding pagination navigation for AnQiCMSdata-idproperty

To implement adding a unique attribute to each page number buttondata-idwe mainly need to modifypaginationthe loop inside the tagpages.Pagessection.

Let us find the part of the example code mentioned above that renders the middle page number list:

{% for item in pages.Pages %}
    <li class="page-item {% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}

here,item.NameIt is the current page number, which is inherently a good unique identifier. We can use it directly asdata-idthe value.

We make the following modifications to the above code:

<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        {# 首页按钮 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.FirstPage.Link}}" data-id="page-{{pages.FirstPage.Name}}">{{pages.FirstPage.Name}}</a>
        </li>
        {# 上一页按钮 #}
        {% if pages.PrevPage %}
            <li class="page-item">
                <a href="{{pages.PrevPage.Link}}" data-id="page-prev">{{pages.PrevPage.Name}}</a>
            </li>
        {% endif %}
        {# 中间页码按钮 #}
        {% for item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{item.Link}}" data-id="page-{{item.Name}}">{{item.Name}}</a>
            </li>
        {% endfor %}
        {# 下一页按钮 #}
        {% if pages.NextPage %}
            <li class="page-item">
                <a href="{{pages.NextPage.Link}}" data-id="page-next">{{pages.NextPage.Name}}</a>
            </li>
        {% endif %}
        {# 尾页按钮 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}" data-id="page-{{pages.LastPage.Name}}">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    {% endpagination %}
</div>

Please note that in addition to the middle page number, we also added首页/上一页/下一页and尾页the button as welldata-id. For the page numbers, we useddata-id="page-{{item.Name}}"the format, which makes each page number'sdata-idEach is unique, for example, "page-1", "page-2", "page-3", etc. For special function buttons such as "Previous page" and "Next page", we have assigned more descriptive ones.data-id="page-prev"anddata-id="page-next"While the first page and last page are directly identified by their page numbers.

Deployment and verification

After completing the modification of the template code, the next step is to deploy it to your AnQiCMS website.

1. Confirm the location of the template file: Typically, pagination navigation code exists in your template files, such as the article list page'slist.html, category page'scategory.html, or a dedicated partial template file for pagination (such aspartial/pagination.htmlYou need to find the one currently in use on your website, includingpaginationthe template file for the tags.
2. **Modify