用户评论是网站活力的重要体现,它们不仅能增加内容的互动性,还能为其他访问者提供有价值的参考。安企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字段。这个字段是区分评论是否已通过审核的关键:

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

利用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_namecontent等基本信息,如果评论是对某条评论的回复,还需要提供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="