How to display the comment list and pagination on the article detail page with the `commentList` tag?

In Anqi CMS, the comment list on the article detail page is an important component for enhancing user interaction and content vitality. To present these comments naturally and smoothly, and to achieve a friendly pagination experience, we need to use clever techniques.commentListandpaginationThese two template tags. Let's take a look together on how to implement the display and pagination of comments on the article detail page.

I.commentListTags: The basic method to display comments

Of Security CMScommentListThe tag is specifically used to retrieve and display article comment data.In the article detail page, it can help us easily retrieve all comments of the current article, whether it is the latest comment or a reply comment, it can be handled through this tag.

The basic usage is:

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {# 在这里循环展示评论 #}
{% endcommentList %}

Among them,commentsThis is the variable name we define for the comment list data, you can name it according to your habit.

Explanation of several key parameters:

• archiveIdThis parameter is essential, it tellscommentListThe tag needs to retrieve the comments of which article. In the article detail page, we can obtain the current article ID byarchive.Id(provided byarchiveDetailthe tag or page context).
• typeThis parameter determines the display method of the comment list. When set totype="list"it will retrieve a specified number of comments; if set totype="page"it will enable pagination, usually in conjunction withpaginationlabel usage
• limit：Whentype="list"When, this parameter specifies the maximum number of comments to display. For example,limit="6"means only the latest 6 comments are displayed.
• order: can be used to control the sorting method of comments, such asorder="id desc"Indicates sorting comments by comment ID in reverse order (latest comments first).
• siteIdIf you manage multiple sites and need to call comments from other sites, you can specify the site ID through this parameter.

Common fields contained in comment data:

commentsEach comment generated by the variable (we usually name it as)item) contains some useful fields, such as:

• Id: The unique ID of the comment.
• UserName: The nickname of the reviewer.
• Content: The specific content of the comment.
• CreatedTime: The timestamp of the comment, it needs to bestampToDateformatted.
• Status: The review status of the comment,1indicating approved,0Pending review.
• ParentId: If this is a reply comment, it will point to the ID of the replied comment.
• Parent: An object containing the complete data of the replied comment, convenient for displaying the comment hierarchy.

Chapter 2: Hands-on Practice: Displaying Non-paginated Comment List

We start with the simplest comment list, assuming we want to display the latest few comments at the bottom of the article detail page without pagination.

{# 首先，确保你能获取到当前文章的ID。在文章详情页通常可以直接使用archive.Id #}
{# 如果页面上下文没有archive.Id，你可能需要先使用{% archiveDetail with name="Id" %}来获取 #}

<div class="comments-section">
    <h3>读者评论</h3>
    <ul class="comment-list">
        {% commentList comments with archiveId=archive.Id type="list" limit="5" order="id desc" %}
            {% for item in comments %}
                {# 检查评论状态，只显示已审核通过的评论，或给出审核中的提示 #}
                {% if item.Status == 1 %}
                    <li class="comment-item">
                        <div class="comment-meta">
                            <span class="comment-author">{{ item.UserName }}</span>
                            于
                            <span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                            说：
                        </div>
                        <div class="comment-content">
                            {% if item.Parent %}
                                <blockquote class="reply-to">
                                    回复 <span class="original-author">{{ item.Parent.UserName }}</span>:
                                    <p>{{ item.Parent.Content|truncatechars:100 }}</p> {# 截取部分内容，避免太长 #}
                                </blockquote>
                            {% endif %}
                            <p>{{ item.Content }}</p>
                        </div>
                        {# 这里可以添加点赞或回复按钮，具体功能需要JS和后台接口支持 #}
                        <div class="comment-actions">
                            <a href="javascript:;" class="btn-reply" data-id="{{ item.Id }}" data-user="{{ item.UserName }}">回复</a>
                        </div>
                    </li>
                {% else %}
                    <li class="comment-item pending-review">
                        <div class="comment-meta">
                            <span class="comment-author">{{ item.UserName }}</span>
                            于
                            <span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                            评论：
                        </div>
                        <div class="comment-content">
                            <p>您的评论正在审核中，请耐心等待。</p>
                        </div>
                    </li>
                {% endif %}
            {% empty %}
                <li class="no-comments">目前还没有评论，快来发表您的看法吧！</li>
            {% endfor %}
        {% endcommentList %}
    </ul>
</div>

Code analysis:

• We used a<ul>List to wrap comments, each comment is one<li>.
• item.StatusUsed to determine whether the comment has been reviewed. Unreviewed comments show a prompt and usetruncatecharsa filter to truncate content.
• item.ParentThe judgment is very important, it allows us to identify and display the reply relationship, making the comments look more organized. Whenitem.ParentWhen present, it indicates that this is a reply, and we can display the nickname and part of the content of the replied person.
• stampToDate(item.CreatedTime, "2006-01-02 15:04")Format the timestamp into a readable date and time format that we can understand.
• {% empty %}A block displays a friendly prompt when there are no comments.

3. Advanced Application: Comment Pagination Display

When there are many comments on the article, loading all comments at once can affect the page performance and user experience. At this point, we need to introduce pagination. In Anqi CMS, commentListcooperatepaginationTags can perfectly solve this problem.

The steps are as follows:

1. modifycommentListoftypeparameters for"page": This tells the system that we need paginated data.
2. addpaginationTag: This tag will generate pagination navigation links and information.

`twig

<h3>读者评论</h3>
<ul class="comment-list">
    {% commentList comments with archiveId=archive.Id type="page" limit="10" order="id desc" %}
        {% for item in comments %}
            {% if item.Status == 1 %}
                <li class="comment-item">
                    <div class="comment-meta">
                        <span class="comment-author">{{ item.UserName }}</span>
                        于
                        <span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                        说：
                    </div>
                    <div class="comment-content">
                        {% if item.Parent %}
                            <blockquote class="reply-to">
                                回复 <span class="original-author">{{ item.Parent.UserName }}</span>:
                                <p>{{ item.Parent.Content|truncatechars:100 }}</p>
                            </blockquote>
                        {% endif %}
                        <p>{{ item.Content }}</p>
                    </div>
                    <div class="comment-actions">
                        <a href="javascript:;" class="btn-reply" data-id="{{ item.Id }}" data-user="{{ item.UserName }}">回复</a>
                    </div>
                </li>
            {% else %}
                <li class="comment-item pending-review">
                    <div class="comment-meta">
                        <span class="comment-author">{{ item.UserName }}</span>
                        于
                        <span class="comment-time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                        评论：
                    </div>
                    <div class="comment-content">
                        <p>您的评论正在审核中，请耐心等待。</p>
                    </div>
                </li>
            {% endif %}
        {% empty %}
            <li class="no-comments">目前还没有评论，快来发表您的看法吧！</li>
        {% end