安企CMS (AnQiCMS) 作为一个高效、灵活的内容管理系统，在提供丰富内容展示能力的同时，也为用户互动提供了完善的评论功能。了解如何有效地显示评论列表，尤其是处理多层回复，对于提升网站的用户参与度和内容深度至关重要。

AnQiCMS 评论功能的实现基础

在 AnQiCMS 中，评论功能是网站内容互动的重要组成部分。系统不仅内置了对文章、产品等内容的评论支持，还提供了强大的后台管理界面，让网站运营者能够轻松审核、管理和响应用户评论。所有评论的显示都通过灵活的模板标签来实现，这意味着我们可以根据网站的设计需求，高度自定义评论区域的外观和交互方式。

核心：评论列表的调用与展示

要在网站页面上显示评论，AnQiCMS 提供了 commentList 模板标签。这个标签是评论功能的核心，它允许我们获取指定文章的评论数据，并控制其展示方式。

例如，在一个文章详情页，我们可以这样调用评论列表：

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

这里，comments 是一个自定义的变量名，用于存储获取到的评论数据。archiveId=archive.Id 参数是关键，它告诉系统我们想要获取当前页面文章（archive.Id 代表当前文章的ID）的所有评论。type="list" 则表示以列表形式获取评论，limit="6" 则限制了显示评论的数量。

通过 commentList 标签获取到的 comments 变量是一个数组，其中每个 item 都代表一条评论。这些 item 包含了评论的各种详细信息，例如：

  • Id: 评论的唯一标识符。
  • UserName: 评论者的用户名。
  • Content: 评论的实际内容。
  • CreatedTime: 评论发布的时间，通常需要通过格式化标签 (stampToDate) 转换为可读日期。
  • Status: 评论的审核状态，例如 Status = 1 表示审核通过，Status = 0 表示审核中。
  • VoteCount: 评论获得的点赞数量。

我们可以通过 for 循环遍历 comments 数组，将每一条评论以我们想要的形式展示出来。

实现评论回复层级：深度互动展示

AnQiCMS 的评论功能支持多层回复，这意味着用户不仅可以评论文章本身，还可以回复其他用户的评论，形成对话层级。要在前端正确显示这种回复关系，我们需要利用评论 item 中的 ParentId 和 Parent 字段。

ParentId 记录了当前评论所回复的父级评论的ID。而 Parent 字段则更方便，它直接包含了父级评论的完整 item 对象。我们可以通过检查 item.Parent 是否存在来判断当前评论是否是一个回复。

以下代码片段展示了如何判断并显示回复评论：

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
    <div class="comment-item">
        <div class="comment-header">
            <span>{{item.UserName}}</span>
            <span>于 {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}} 发布</span>
        </div>
        {% if item.Parent %}
        <div class="comment-reply-to">
            <blockquote class="blockquote-sm">
                回复 <span class="reply-user">{{item.Parent.UserName}}</span>:
                <p>{{item.Parent.Content|truncatechars:100}}</p> {# 截取父评论内容，避免过长 #}
            </blockquote>
        </div>
        {% endif %}
        <div class="comment-content">
            {% if item.Status != 1 %}
            <p class="text-muted">评论正在审核中...</p>
            {% else %}
            <p>{{item.Content}}</p>
            {% endif %}
        </div>
        <div class="comment-actions">
            <a class="praise-btn">赞 ({{item.VoteCount}})</a>
            <a class="reply-btn" data-parent-id="{{item.Id}}" data-reply-user="{{item.UserName}}">回复</a>
        </div>
    </div>
    {% endfor %}
{% endcommentList %}

在这个示例中：

  • 我们首先显示了当前评论者的用户名和发布时间。
  • {% if item.Parent %} 判断当前评论是否为回复。
  • 如果 item.Parent 存在，我们就渲染一个 blockquote 样式来突出显示它回复了哪位用户，以及父级评论的部分内容 (item.Parent.UserName, item.Parent.Content)。这里使用了 truncatechars:100 过滤器来防止父评论内容过长影响布局。
  • 接着，显示当前评论的内容，并根据 item.Status 判断是否处于审核中。
  • 最后，提供了点赞和回复的交互按钮。

通过这种方式，评论不仅呈现为一个扁平的列表，更像是一个有来有往的对话，极大地增强了用户体验。

评论列表的实用展示技巧

除了基本的评论和回复展示，AnQiCMS 还提供了其他实用的功能，以完善评论系统的用户体验：

  1. 带分页的评论列表： 如果评论数量较多，直接全部加载会影响页面性能。这时，可以将 commentList 标签的 type 参数设置为 "page"，并结合 pagination 标签来实现评论的分页显示，提升用户浏览体验。

    {% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# 评论内容 #}
{% endcommentList %}


{% pagination pages with show="5" %}
    {# 分页导航条 #}
{% endpagination %}

  2. 评论审核与用户友好提示： item.Status 字段允许我们对评论的显示进行灵活控制。对于 Status 不等于 1（即未通过审核）的评论，可以显示“评论正在审核中…”的提示信息，既告知用户评论已提交，又保持了网站内容的质量。

  3. 点赞功能集成： item.VoteCount 可以直接显示评论的点赞数量。结合前端 JavaScript 和 AnQiCMS 提供的评论点赞 API（/comment/praise），我们可以实现动态的点赞功能，增加评论的互动性。

  4. 评论表单与防垃圾评论： 评论提交通常通过表单完成，AnQiCMS 提供了 /comment/publish 接口接收评论数据。为了防止垃圾评论，系统也支持集成验证码功能。在评论表单中加入验证码字段，并配合 captcha 模板标签提供的接口，可以有效提升评论的安全性。

AnQiCMS 的评论功能，通过灵活的模板标签和详细的数据结构，为网站运营者提供了强大的自定义能力。无论是简单的评论展示，还是复杂的回复层级互动，都可以在模板层面轻松实现，从而构建一个活跃且用户友好的内容社区。

常见问题 (FAQ)

1. 如何防止评论区出现垃圾评论或恶意评论？ AnQiCMS 提供了后台评论审核功能，您可以设置评论发表后需要人工审核才能显示。同时，系统也支持集成图形验证码，您可以在评论表单中启用验证码，以有效拦截机器人和自动化提交的垃圾评论。

2. 评论列表的显示层级是否可以无限嵌套？ 通常情况下，为了保持评论区域的清晰度和用户体验，AnQiCMS 在显示回复层级时会有一个合理的深度限制。虽然技术上可以实现多层嵌套，但在前端展示时，建议不要设计过深的回复层级，以免页面过于复杂和冗长。您可以通过自定义 CSS 和 JavaScript 来控制回复的视觉嵌套深度。

3. 如果我想在评论列表旁边显示评论总数，应该如何获取？ 您可以在文章详情页使用 archiveDetail 标签获取当前文章的评论总数。例如：{% archiveDetail with name="CommentCount" %} 就可以直接输出当前文章的评论数量。