How to display a user comment list on the front end and support review status display?

User comments are an important manifestation of a website's vitality, they can not only increase the interactivity of the content, but also provide valuable references for other visitors.The Anqi CMS understands the importance of comment management, providing simple yet powerful features, allowing you to flexibly display comment lists on the website front-end and clearly identify the review status of comments.

The core of displaying the comment list on the front-end:commentListTag

You need to use the AnQiCMS provided to display user comments on your website front pagecommentListTemplate tag. This tag helps you easily retrieve comment data related to a specific article or product.

In most cases, the comment list is associated with a specific document (such as an article detail page or a product detail page). Therefore, when usingcommentListtags, we usually specifyarchiveIdThe value of this parameter is the unique identifier ID of the current page document. You can use{% archiveDetail with name="Id" %}tags to get the ID of the current document.

Moreover, to better control the display of comments, you cantypeselect the list type through parameters. When you want the comment list to support pagination, you willtypeis set to"page"It is a good choice; if you only need to display a fixed number of comments without pagination, you can set it to"list"coordinate withlimitParameter.

For example, on the article detail page, you can start fetching comment data like this

{% archiveDetail archiveId with name="Id" %} {# 获取当前文档的ID，并赋值给archiveId变量 #}

<div class="comments-section">
    <h3>用户评论 ({{ archive.CommentCount }}条)</h3>
    {% commentList comments with archiveId=archiveId type="page" limit="10" %}
        {# 遍历获取到的评论列表 #}
        {% for item in comments %}
            {# 这里是每条评论的展示内容 #}
        {% empty %}
            <p>目前还没有评论，快来抢沙发吧！</p>
        {% endfor %}
    {% endcommentList %}
</div>

In this example,commentsThe variable will contain all comments that meet the criteria.forThe loop will process each comment one by one,emptyThe block will display a prompt when there are no comments.

Clearly identify the review status

AnQiCMS has fully considered the needs of content review in comment management, so each comment data has aStatusThe field is the key to distinguishing whether the comment has passed the review.

• WhenStatusWith1Means the comment has passed the review and can be displayed normally on the front end.
• WhenStatusWith0When, it means that the comment is still under review, at this time we usually do not display it completely, but give the user a "under review" prompt.

UtilizeifLogical judgment tag, we can easily baseitem.StatusThe value to control the display content of comments. For example, we can only display approved comment content, and for comments under review, we can only display a username and a "under review" prompt, and even truncate or hide the content.

Here is an example of displaying the review status in a comment list and handling replies.

{% archiveDetail archiveId with name="Id" %}

<div class="comments-section">
    <h3>用户评论 ({{ archive.CommentCount }}条)</h3>
    {% commentList comments with archiveId=archiveId type="page" limit="10" %}
        {% for item in comments %}
            <div class="comment-item {% if item.Status != 1 %}comment-pending{% endif %}">
                <div class="comment-header">
                    <span class="comment-username">
                        {% if item.Status != 1 %}
                            <i class="icon-pending"></i> 审核中用户：{{item.UserName|truncatechars:6}}
                        {% else %}
                            {{item.UserName}}
                        {% endif %}
                    </span>
                    {% if item.Parent %}
                        <span class="reply-indicator">回复</span>
                        <span class="comment-parent-username">
                            {% 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-content">
                    {% if item.Status != 1 %}
                        <blockquote class="pending-message">该评论正在审核中，请耐心等待。</blockquote>
                        {# 如果您希望在审核中也显示部分内容，可以这样处理： #}
                        {# <p class="pending-content">{{item.Content|truncatechars:30}}...</p> #}
                    {% else %}
                        {% if item.Parent %}
                            <blockquote class="reply-quote">
                                {% if item.Parent.Status != 1 %}
                                    <span class="text-muted">原评论正在审核中...</span>
                                {% else %}
                                    {{item.Parent.Content|truncatechars:100}}
                                {% endif %}
                            </blockquote>
                        {% endif %}
                        <p>{{item.Content}}</p>
                    {% endif %}
                </div>
                <div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
                    {% if item.Status == 1 %}
                        <a class="action-btn praise-btn" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
                        <a class="action-btn reply-btn" data-id="reply">回复</a>
                    {% endif %}
                </div>
            </div>
        {% empty %}
            <p>目前还没有评论，快来抢沙发吧！</p>
        {% endfor %}

        {# 评论分页 #}
        {% pagination pages with show="5" %}
            <div class="pagination-nav">
                <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
                {% if pages.PrevPage %}<a class="page-link" href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
                {% for pageItem in pages.Pages %}
                    <a class="page-link {% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
                {% endfor %}
                {% if pages.NextPage %}<a class="page-link" href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
                <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
            </div>
        {% endpagination %}

    {% endcommentList %}
</div>

In the above code, we useditem.ParentTo determine whether the current comment is a reply to another comment, and to display a portion of the parent comment in a block quote format. At the same time,stampToDateThe filter helps us format timestamps into readable date and time.

Comment submission form with captcha

In order for users to easily submit comments on the front end, you also need to integrate a comment submission form. AnQiCMS provides a unified comment submission interface/comment/publish. The form must includearchive_id(Document ID of the comment),user_name/contentand other basic information. If the comment is a reply to a specific comment, additional information is also required.parent_id.

To effectively prevent malicious flooding or robot comments, it is strongly recommended that you add a captcha function to the comment form.AnQiCMS has built-in captcha support, you just need to enable the relevant settings in the background and add the specific HTML structure and JavaScript code to the front-end form.

`twig

<h3>发表评论</h3>
<form method="post" action="/comment/publish">
    <input type="hidden" name="return" value="html"> {# 提交后返回html内容，或json #}
    <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
    <input type="hidden" name="parent_id" value="" id="comment-parent-id"> {# 用于回复评论时填充 #}

    <div class="form-group">
        <label for="comment-username">您的昵称</label>
        <input type="text" id="comment-username" name="user_name" required placeholder="请填写您的昵称" autocomplete="off">
    </div>

    <div class="form-group">
        <label for="comment-content">评论内容</label>
        <textarea id="comment-content" name="content" required placeholder="