如何在前端展示用户评论列表，并支持审核状态显示？

用户评论是网站活力的重要体现，它们不仅能增加内容的互动性，还能为其他访问者提供有价值的参考。安企CMS深知评论管理的重要性，提供了简洁而强大的功能，让您能够在网站前端灵活地展示评论列表，并清晰地标识评论的审核状态。

在前端展示评论列表的核心：commentList 标签

要在您的网站前端页面上展示用户评论，您需要使用AnQiCMS提供的commentList模板标签。这个标签能帮助您轻松地获取与特定文章或产品相关的评论数据。

通常情况下，评论列表会与某个具体的文档（如文章详情页或产品详情页）关联。因此，在使用commentList标签时，我们通常会指定archiveId参数，该参数的值就是当前页面文档的唯一标识ID。您可以使用{% archiveDetail with name="Id" %}标签来获取当前文档的ID。

此外，为了更好地控制评论的显示方式，您可以通过type参数来选择列表类型。当您希望评论列表支持分页功能时，将type设置为"page"是一个不错的选择；如果只需要显示固定数量的评论而不分页，则可以设置为"list"并配合limit参数。

例如，在文章详情页中，您可以这样开始获取评论数据：

{% 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>

在这个示例中，comments变量将包含所有符合条件的评论数据。for循环会逐一处理每条评论，empty块则会在没有评论时显示一段提示信息。

清晰标识审核状态

AnQiCMS在评论管理方面充分考虑了内容审核的需求，因此每条评论数据都带有一个Status字段。这个字段是区分评论是否已通过审核的关键：

• 当Status为1时，表示评论已通过审核，可以在前端正常显示。
• 当Status为0时，则表示评论仍在审核中，此时我们通常不将其完全公开展示，而是给予用户一个“审核中”的提示。

利用if逻辑判断标签，我们可以轻松地根据item.Status的值来控制评论的显示内容。例如，我们可以只显示已通过审核的评论内容，而对于审核中的评论，则仅显示一个用户名和“审核中”的提示，甚至可以对其内容进行截断或隐藏。

下面是一个在评论列表中展示审核状态并处理回复的示例：

{% 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>

在上述代码中，我们使用了item.Parent来判断当前评论是否是对其他评论的回复，并以引用块的形式展示父级评论的部分内容。同时，stampToDate过滤器帮助我们将时间戳格式化为易读的日期时间。

评论提交表单与验证码

为了让用户能够在前端方便地提交评论，您还需要集成评论提交表单。AnQiCMS提供了一个统一的评论提交接口/comment/publish。表单中需要包含archive_id（评论所属文档ID）、user_name、content等基本信息，如果评论是对某条评论的回复，还需要提供parent_id。

为了有效防范恶意灌水或机器人评论，强烈建议您为评论表单添加验证码功能。AnQiCMS内置了验证码支持，您只需在后台开启相关设置，并在前端表单中加入特定的HTML结构和JavaScript代码即可。

”`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="