How to correctly display user comments and their review status in the AnQiCMS comment list?

In AnQiCMS, managing and displaying user comments, especially their review status, is a very practical feature in content operation.It not only helps us maintain community order, but also allows for flexible control over the presentation of website content, ensuring the quality and compliance of published content.Next, let's take a detailed look at how to properly display user comments and their review status in your website comment list.

Core Feature: Comment List Invocation

To display user comments on the website page, we need to rely on the powerful template tag system of AnQiCMS. Among them,commentListTags are specifically designed for this purpose. Typically, we add a comment area at the bottom of the document details page (for example, article, product page).

UsecommentListWhen labeling, you first need to specify the document ID associated with the comment. This ID is usually obtained through the current document information on the page (for example, on the article detail page, we can obtain it througharchive.IdPass (）to transfer. At the same time, you can choose the display type of the comment list, for exampletype="list"Used to display a fixed number of comments at one time, ortype="page"Used for pagination display, which can effectively improve page loading speed and user experience when there are many comments.limitThe parameter allows you to control the number of comments loaded per page or each time.

Here is a basiccommentListexample of tag usage, it will retrieve the comment list of the current document:

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div class="comment-item">
        <span class="comment-user">{{item.UserName}}</span>
        <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
        <p class="comment-content">{{item.Content}}</p>
    </div>
    {% endfor %}
{% else %}
    <p>暂无评论，快来发表你的看法吧！</p>
{% endcommentList %}

In this example,archive.Idrepresents the document ID of the current page.commentsThis is the variable name defined for the comment list data, you can accessforthrough the loopitemto access the specific information of each comment.stampToDateLabels can help us format timestamps into readable dates and times.

Control comment status: Display review information correctly.

The review status is a key link in content management. AnQiCMS providesStatusfield, whose value is1indicating that the comment has been reviewed and can be displayed normally, while0It indicates that the comment is under review. Through this field, we can flexibly handle the display of pending review comments on the front-end page.

In general, we do not display the full content of comments under review directly, but provide a prompt information, such as 'The content is being reviewed.'For reply-type comments, we also need to consider the review status of the parent comment.

The following is an improvement on the previous example code, adding handling for comment review status and reply comments.

`twig {% commentList comments with archiveId=archive.Id type=“list” limit=“6” %}

{% for item in comments %}
<div class="comment-item">
    <div class="comment-meta">
        <span class="comment-user">
            {% if item.Status != 1 %}
                <!-- 评论待审核时，用户名可截断或显示为匿名 -->
                审核中：{{item.UserName|truncatechars:6}}
            {% else %}
                {{item.UserName}}
            {% endif %}
        </span>
        {% if item.Parent %}
            <span class="reply-indicator">回复</span>
            <span class="comment-parent-user">
                {% if item.Parent.Status != 1 %}
                    <!-- 父级评论待审核时，同样给出提示 -->
                    审核中：{{item.Parent.UserName|truncatechars:6}}
                {% else %}
                    {{item.Parent.UserName}}
                {% endif %}
            </span>
        {% endif %}
        <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
    </div>
    <div class="comment-body">
        {% if item.Parent %}
            <blockquote class="reply-quote">
                {% if item.Parent.Status != 1 %}
                    <p class="pending-quote-message">该内容正在审核中：{{item.Parent.Content|truncatechars:15}}</p>
                {% else %}
                    <p>{{item.Parent.Content|truncatechars:100}}</p>
                {% endif %}
            </blockquote>
        {% endif %}
        {% if item.Status != 1 %}
            <p class="pending-message">该内容正在审核中：{{item.Content|truncatechars:15}}</p>
        {% else %}
            <p>{{item.Content}}</p>
        {% endif %}
    </div>
    <div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
        <a class="action-item vote-comment">赞