As an old veteran who has been deeply involved in website operation for many years, I know that every detail may affect the performance of the website, user experience, and even the depth of data analysis.AnQiCMS as a modern content management system developed based on the Go language, with its efficient, flexible and extensible features, provides strong support for our operation work.It has a unique Django template engine syntax, which makes even relatively complex customization needs achievable through concise code with elegance.

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

Understanding the pagination navigation tags of AnQiCMS

in AnQiCMS, the pagination feature is implemented through a powerfulpaginationTag to implement.This tag is designed to be very flexible, able to automatically generate a complete page navigation structure according to the content list of the current page, including the first page, previous page, middle page numbers, next page, and last page.

paginationTags are usually witharchiveListortagDataListand content list tags are used together, it accepts apagesVariable, which contains all the information required for pagination. For example, we may call the pagination tag in the template like this: 

<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, it contains each page number displayed in the middle (usually a number), each page number itemitem) hasName：(page number),Link(Page link), andIsCurrent(Is the current page) and other properties. Our goal is to use this information to add a uniquedata-idproperties.

Why do we need to adddata-idproperties?

At first glance, this may seem to be a trivial change, but in actual website operation, it can bring multiple benefits:

  1. Precise data tracking and analysisEnglish through 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 (such asdata-id="page-3"）to jump, rather than just knowing that 'a pagination button was clicked'.This is crucial for analyzing user behavior patterns in deep content browsing, and optimizing content organization and pagination strategies.

  2. Enhance front-end interaction and user experienceFront-end JavaScript can be easily accessed bydata-idSelect and operate specific page button properties. For example, when the user scrolls to the bottom of the page, we candata-idHighlight the adjacent pages 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 convenienceWhen performing 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.

Practice: Add pagination navigation for AnQiCMSdata-idProperty

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

Let us find the part in the previous example code 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, in addition to the middle page number, we also首页/上一页/下一页and尾页added the buttondata-id. For the page numbers, we useddata-id="page-{{item.Name}}"format, which makes each page number'sdata-idEach is unique, for example, “page-1”、“page-2”、“page-3”, and so on. For special function buttons like “Previous Page” and “Next Page”, we have assigned more descriptive text.data-id="page-prev"anddata-id="page-next"And 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 template file location Typically, the pagination navigation code exists in your template file, such as on the article list page,list.html, or on the category page.category.html，or a dedicated partial template file for pagination (e.g.)partial/pagination.html). You need to find the one your current website is using, which includespaginationtag template file.
  2. **Modify**