Hello! As an experienced website operation expert, I am more than happy to deeply analyze how to skillfully combine in AnQiCMScommentListandpaginationTags, for pagination of comment content, making user interaction more smooth and orderly.

In the era where content is king, user comments are not only a symbol of website vitality, but also an important manifestation of content value.However, if a popular article accumulates a massive number of comments, loading them all at once would undoubtedly impose a huge burden on the page, severely affecting user experience.At this moment, it is particularly important to paginate the comments display, as it keeps the page lightweight and ensures that users can browse historical comments as needed.

AnQiCMS as an efficient and flexible content management system provides powerful template tag functions, wherecommentListandpaginationtags are the golden partners for solving this problem.

Core partner one:commentListTag——The Hunter of Comment Data

Firstly, we need to usecommentListThis tag can obtain the comment data of specified documents. This tag is like a 'catcher' for comment data, which can retrieve relevant comment records from the database according to our needs.

When usingcommentListWhen, there are several key parameters that you need to pay attention to:

  1. archiveIdThis is the ID of the document (such as an article, product) to which the comment belongs. On an article detail page, we usually usearchiveDetailTag to get the current article ID, then pass this ID tocommentList. For example, if you have already{% archiveDetail archive %}to get the current document information, thenarchive.Idis the document ID you need.
  2. type="page"This is the implementation of pagination displaycoreWhen you are going totypeparameter settings"page"whencommentListtags will not only return comment data, but also automatically generate metadata related to pagination, for subsequentpaginationThe work of the label lays the foundation.
  3. limitThis parameter is used to control how many comments are displayed per page. For example,limit="10"means that 10 comments will be displayed per page.

WhencommentListlabels totype="page"is called, it returns an object containing a list of comments (comments), as well as the total number of pages and the current page number. Each item in the comment listitemAll comments include detailed information, such as the comment ID (Id), the username of the commenter (UserName), the comment content (Content), the publish time (CreatedTime) and the review status (Status）and so on. It is worth noting that in order to ensure the health of the website content, we usually only displayStatuscomments with a value of 1 (already reviewed and approved).

Core partner two:paginationTag - the helmsman of pagination navigation

HencecommentListReturns the comment data and pagination metadata,paginationThe tag can take the stage. It acts like a "helmsman of pagination navigation", able tocommentListThe provided pagination information automatically generates beautiful and functional pagination links.

paginationThe main parameters of the tag are:

  1. showThis parameter controls how many page number buttons are displayed continuously in the middle area of the pagination navigation, excluding 'Home', 'Previous', 'Next', and 'Last Page'. For example,show="5"Displays 5 page numbers in the middle.

paginationTags will return apagesobject that includes such asTotalItems(Total number of comments),TotalPages(Total number of pages),CurrentPage(Current page) andFirstPage(Home page),PrevPage(Previous page),NextPage(Next page),LastPage(Last page) and multiple page objects. Each page object (including the middle page number list)Pagesofitem）containsName(Display name, such as page number,）、Link(The URL of the corresponding page) andIsCurrent(Boolean value, indicating whether it is the current page, can be used to add CSS styles) and other properties.

Strong partnership: Steps to implement comment pagination display

Now, let's combine these two tags and see how to implement comment content pagination display in your template:

  1. Retrieve the current document IDThis is the anchor of the comment list. Usually, you can directly get the ID from the context in thearchiveobject.

    {% archiveDetail archive %} {# 获取当前文档对象，将其命名为 archive #}
{# 此时，archive.Id 就包含了当前文档的ID #}

  2. InvokecommentListRetrieve comment dataWe willarchive.IdPass tocommentListAnd settype="page"andlimit.

    {% 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>
            {% if item.Status == 1 %} {# 只显示审核通过的评论 #}
                <p>{{ item.Content|safe }}</p>
            {% else %}
                <p>评论正在审核中...</p>
            {% endif %}
            {# 如果评论有父评论（回复），可以显示父评论内容 #}
            {% if item.Parent %}
                <blockquote>回复 {{ item.Parent.UserName }}: {{ item.Parent.Content|truncatechars:50|safe }}</blockquote>
            {% endif %}
        </div>
    {% empty %}
        <p>目前还没有评论，快来发表您的看法吧！</p>
    {% endfor %}
{% endcommentList %}

  3. InvokepaginationGenerate pagination navigationFollowed bycommentListAfter,paginationTags will be automatically recognized and usedcommentListGenerated comment pagination data.

    <div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        <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>
    <p>共 {{ pages.TotalItems }} 条评论，{{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。</p>
    {% endpagination %}
</div>

Combine the above code snippet organically in your comment display area, and you will be able to implement a feature-rich and user-friendly comment pagination system.Remember that, when deploying in practice, you also need to beautify pagination and comment lists according to the overall style of your website through CSS.

Complete code example

To better understand, here is a complete code structure that you can refer to and adjust in your document detail template:

This is your article detail page, and the current document information has been obtained through routing.

<h1>{{ archive.Title }}</h1>
<div class="article-content">
    {{ archive.Content|safe }}
</div>

<section class="comments-section">
    <h2>用户评论</h2>

    {# 1. 调用 commentList 获取评论数据并标记为可分页 #}
    {% commentList comments with archiveId=archive.Id type="page" limit="10" %}
        <div class="comment-list">
            {% for item in comments %}
                {% if item.Status == 1 %} {# 确保只显示已审核通过的评论 #}
                    <div class="comment-item">
                        <