How to combine the `commentList` tag with the `pagination` tag to implement pagination of comment content?

Hello! As an experienced website operations expert, I am very willing to deeply analyze how to skillfully combine in AnQiCMScommentListandpaginationLabel, implement pagination of comment content to make user interaction more smooth and orderly.

In the era where content is king, user comments are not only a symbol of the vitality of the website, 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 place a huge burden on the page, severely affecting user experience.At this time, it is particularly important to display comments in pages, as it can keep the page lightweight and ensure that users can browse historical comments as needed.

AnQiCMS as an efficient and flexible content management system provides powerful template tag functions, among whichcommentListandpaginationthe tag is the golden partner to solve this problem.

Core partner one:commentListTag - Comment Data Hunter

First, we need to usecommentListThe tag is used to retrieve comments for a specified document. This tag acts like a 'hunter' of comment data, able to fetch relevant comment records according to our needs.

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

1. archiveId: This is the ID of the document specified by the comment (such as an article, product). In an article detail page, we would usually go througharchiveDetailTag to get the current article ID and then pass this ID tocommentList. For example, if you have already{% archiveDetail archive %}obtained the information of the current document, thenarchive.Idis the document ID you need.
2. type="page"This is to implement pagination display.Core. When you are going totypethe parameter to"page"then,commentListThe tag will not only return comment data, but also automatically generate metadata related to pagination, for subsequent.paginationThe work of the tag lays the foundation.
3. limitThis parameter is used to control how many comments are displayed per page. For example,limit="10"it means 10 comments will be displayed per page.

WhencommentListtags totype="page"is called in the form, it will return a list containing commentscommentsAn object containing information such as the total number of pages and the current page number. Each item in the comment listitemincludes detailed information about the comments, such as the comment ID (Id), the username of the commentor (UserName）、comment content（Content），release time（CreatedTime）and review status（Status）etc. It is worth noting that in order to ensure the health of the website content, we usually only displayStatuscomments with status 1 (approved).

Core partner two：paginationTag——Paging Navigation Captain

NowcommentListTag returns comment data and pagination metadata,paginationTag can take the stage. It is like a “Paging Navigation Captain”, able to according tocommentListThe provided pagination information automatically generates a beautiful and functional pagination link.

paginationThe main parameters of the tag are:

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

paginationThe tag will return apagesAn object that includes such asTotalItems(Total number of comments),TotalPages(Total number of pages),CurrentPage(Current page number) as well asFirstPage(Home page),PrevPage(Previous page),NextPage(Next page),LastPage(End page) and multiple page objects. Each page object (including the middle page number listPagesofitem) all containName(Display name, such as page number),Link(Corresponding page URL) andIsCurrent(Boolean value indicating whether it is the current page, which can be used to add CSS styles) and other properties.

Strong combination: steps to implement comment pagination display.

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

1. Get the current document ID: This is the anchor of the comment list. Usually on the document detail page, you can directly obtain the ID from the context ofarchivethe object.

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

2. InvokecommentListGet comment data: We willarchive.Idpass tocommentList, and 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 navigation: Followed 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 can implement a fully functional and user-friendly comment pagination system.Remember that when deploying in practice, you also need to beautify the pagination and comment list according to the overall style of your website using CSS.

Complete code example

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

`twig {# Assuming this is your article detail page, and the information of the current document 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">
                        <