In AnQiCMS, how can the `commentList` tag implement pagination for comment data?

As an experienced website operations expert, I am well aware that in a content management system, the comment function not only increases user interaction but also brings activity and richness to the website.AnQiCMS (AnQiCMS) is an efficient content management system developed based on the Go language, which provides powerful comment functions while also considering the flexibility of template creation.Today, let's delve into how to usecommentListLabel elegantly implements the pagination of comment data.

In AnQiCMS,commentListHow does the label implement the pagination of comment data?

The importance of User Generated Content (UGC) in today's internet environment is self-evident.Comments are an important form of interaction between users and website content, which can significantly enhance the community feeling and user stickiness of the website.However, when the number of comments is large, if not managed and displayed reasonably, the page loading speed, user experience, and even server performance will be affected.For this, AnQiCMS providescommentListtags, with the help ofpaginationTags, can efficiently and flexibly implement pagination of comment data, ensuring that even with a large number of comments, the website can maintain a smooth browsing experience.

commentListTag: The core of comment data acquisition.

commentListThe tag is the starting point for obtaining comment data in the AnQiCMS template.It can not only pull the comment content, but more importantly, it can obtain data in "pagination mode", which lays a foundation for subsequent pagination display.

To enable pagination function,commentListthe tag needs to be set with two critical parameters:

1. archiveIdThis parameter specifies the ID of the document (article, product, etc.) you want to retrieve comments for. Usually, on the document detail page, we willarchiveDetailLabel to get the current document ID and then pass it tocommentListFor example,archiveId=archive.IdRepresents getting comments for the current page document.
2. type="page": This is the core to enable pagination mode. Whentypeis set to"page"then,commentListThe tag will intelligently split the comment data according to the current page number and the number of comments per page, and generate the necessary pagination information forpaginationlabel usage
3. limit: is used to set the number of comments displayed per page. For example,limit="10"Displays 10 comments per page.

WhencommentListtags totype="page"When the mode runs, it will store the comment data in a variable that you can customize (for example, we often name itcommentsThis variable is an array containing comment objects, each of which includes the comment ID, username, content, posting time, review status, and whether it is a reply or not.

At the same time, it silently prepares a global "pagination object", which contains the total number of comments, total pages, current page number, first page, previous page, next page, last page, and links to all middle page numbers, which we will use laterpaginationaccess it by tag.

Let's take a look first.commentListThe basic structure of tags:

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {% for item in comments %}
        {# 在这里渲染每一条评论的具体内容 #}
        <div>
            <span>{{ item.UserName }}</span> 于
            <span>{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span> 评论道：
            <p>{{ item.Content|safe }}</p>
            {% if item.Parent %}
                <blockquote>回复 {{ item.Parent.UserName }}：{{ item.Parent.Content|truncatechars:50|safe }}</blockquote>
            {% endif %}
            {% if item.Status != 1 %}
                <p style="color: gray;">（评论正在审核中...）</p>
            {% endif %}
            <div class="comment-actions">
                <a href="javascript:;" data-id="{{ item.Id }}" class="reply-btn">回复</a>
                <a href="javascript:;" data-id="{{ item.Id }}" class="like-btn">点赞 ({{ item.VoteCount }})</a>
            </div>
        </div>
    {% empty %}
        <p>暂无评论，快来发表您的真知灼见吧！</p>
    {% endfor %}
{% endcommentList %}

In the above code,archive.IdIt is usually through the document detail page that wearchiveDetailTags such as{% archiveDetail archive with name="Id" %}）get the current document ID. We also usedstampToDateThe filter to format time,|safeThe filter to ensure that HTML tags in the comment content can be rendered correctly, as well as|truncatecharsTo truncate the reply content, improve readability.{% empty %}Blocks elegantly handles the case where there are no comments.

paginationTag: Build user-friendly pagination navigation

It is not enough to just get the comment data, users also need an intuitive pagination navigation to browse comments on different pages. At this point,paginationthe tag comes into play.paginationTags are specifically used to generate navigation links such as "Home", "Previous Page", "Next Page",

paginationThe common parameters of the tag include:

1. show: Controls the number of page numbers displayed in the pagination navigation. For example,show="5"it indicates that 5 page number digits are displayed before and after the current page number.

paginationThe tag creates a namedpagesThe object (you can define a variable name), thispagesThe object is very rich, containing all the status and links related to pagination:

• TotalItems: Total number of comments.
• TotalPages: Total number of pages.
• CurrentPage: Current page number.
• FirstPage/PrevPage/NextPage/LastPageThese are objects, each containingName(such as "Home") andLinkcorresponding URL).
• PagesThis is an array that contains all the intermediate page number objects that need to be displayed, each object also hasName/LinkandIsCurrent(Indicates whether it is the current page).

Next ispaginationwith the tag andcommentListComplete example of using the tag with cooperation:

”`twig {# Assume that the archiveDetail tag has already retrieved the archive.Id of the current document #} {# For example: {% archiveDetail archive with name=“Id” %}{% set archiveId = archive %}{% endarchiveDetail %} #}

<h3>用户评论</h3>

{# 第一部分：评论列表显示 #}
{% commentList comments with archiveId=archive.Id type="page" limit="5" %}
    {% for item in comments %}
        <div class="comment-item">
            <div class="comment-meta">
                <strong>{{ item.UserName }}</strong> 于
                <span>{{ stampToDate(item.CreatedTime, "2006年01月02日 15:04") }}</span> 发布
                {% if item.Status != 1 %}
                    <span style="color: #999;">（待审核）</span>
                {% endif %}
            </div>
            {% if item.Parent %}
                <div class="comment-parent-quote">
                    引用 @{{ item.Parent.UserName }} 的评论：
                    <p>{{ item.Parent.Content|truncatechars:80|safe }}</p>
                </div>
            {% endif %}
            <div class="comment-content">
                {{ item.Content|safe }}
            </div>
            <div class="comment-actions">
                <a href="#comment-form" onclick="replyComment({{ item.Id }}, '{{ item.UserName }}')">回复</a>
                <span class="like-count">点赞: {{ item.VoteCount }}</span>
            </div>
        </div>
    {% empty %}
        <p>暂无评论，快来抢沙发吧！</p>
    {% endfor %}
{% endcommentList %}

{# 第二部分：分页