How to transform the traditional pagination navigation in AnQiCMS into 'Load More' or 'Infinite Scrolling' effect?

As an experienced website operations expert, I know that in today's rapidly changing Internet environment, user experience has become one of the key elements of website success.The traditional pagination navigation, although clear in function, often causes unnecessary sense of disconnection and waiting time when users browse content.While the 'Load More' or 'Infinite Scrolling' effect can greatly enhance the continuous reading experience of user content, reduce the bounce rate, and increase user stickiness.

Today, let's delve into how to cleverly transform the traditional pagination navigation that requires page refresh in the efficient and flexible AnQiCMS content management system into a more modern and smooth 'load more' or 'infinite scrolling' effect.

The challenge of traditional pagination and the opportunity of modern interaction

We all know that the traditional pagination mode usually means that when the user clicks "next page", the browser will initiate a new page request and load the entire new page.This not only interrupts the user's reading flow, but may also cause a brief blank wait due to network latency.For websites that focus on content, especially in scenarios such as news information, blogs, and product lists, this kind of experience 'break point' is undoubtedly a potential risk of loss.

AnQiCMS is a modern content management system developed based on the Go language, with its high performance, modularization, and flexible template mechanism, providing a solid foundation for transforming this traditional interaction mode.It supports Django template engine syntax, allowing front-end developers to easily build highly customized pages.By cleverly utilizing the template tags provided by AnQiCMS and some front-end JavaScript techniques, we can make content loading seamless and efficient.

AnQiCMS template mechanism: the foundation of transformation

In AnQiCMS, all content display cannot do without its powerful template system. When we talk about the content of list pages, we mainly use two core tags: archiveListandpagination.

archiveListLabels are used to retrieve document lists. For example, on the article list page, we will use it to retrieve the article data on the current page:

{% archiveList archives with type="page" limit="10" %}
    {# 循环输出当前页的文档内容 #}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <div>{{item.Description}}</div>
            </a>
        </li>
    {% endfor %}
{% endarchiveList %}

here,type="page"The parameter tells the system that we need a paginated list,limit="10"which defines displaying 10 items per page.

AndpaginationLabel, as the name implies, is used to generate page navigation.It provides the current page, total number of pages, next page link, and other key information, which is an indispensable part of our dynamic loading implementation.

<div class="pagination">
    {% pagination pages with show="5" %}
        {# 输出首页、上一页、中间页码、下一页、尾页等链接 #}
        <ul>
            <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
            {% if pages.PrevPage %}
                <li><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
            {% endif %}
            {% for item in pages.Pages %}
                <li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
            {% endfor %}
            {% if pages.NextPage %}
                <li><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
            {% endif %}
            <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
        </ul>
    {% endpagination %}
</div>

The key to the transformation lies in how to no longer make the user click these page number links to trigger page jumps, but rather to asynchronously obtain through JavaScriptpaginationThe "next page" data provided by the label.

The core idea of transformation: from static pagination to dynamic loading

The traditional page loading process is “User clicks -> Server renders the entire page HTML -> Browser receives and displays”. The process for “load more” or “infinite scrolling” is “User browses initial content -> Trigger loading mechanism (click button or scroll to the bottom of the page) -> Browser sends asynchronous request (AJAX) to the server to retrieveNext PartData -> JavaScript appends new data to the current page content rather than refreshing the entire page。”“

It is not difficult to find that, although AnQiCMS is a backend content management system, the pages it generates are essentially complete HTML.This means that when we make an AJAX request for the "next page" data, the server still returns a complete HTML document.

1. Initiate a request for the link to the next page.
2. Extract the required list item content accurately from the returned HTML document and then append it to the current page.

In order to achieve this goal, we need to adjust the template a bit.

Gradually implement the "load more" effect

Step one: Adjust the initial list template structure

Firstly, we need to do some work on the HTML structure of the content list and pagination area so that JavaScript can better identify and operate on them.

We wrap the list content in a container with a specific ID, for exampleid="content-list-container"Then, we will add a "Load More" button and use a hidden input box or data attribute to store the URL of the next page.

`twig {# List content container #}

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="list-