安企CMS如何显示网站访客的评论列表及其回复关系？

在构建和维护一个活跃的网站时，访客互动是至关重要的一环。评论系统不仅能提升网站内容的讨论热度，增强用户粘性，还能为网站带来新的内容并对搜索引擎优化（SEO）产生积极影响。安企CMS（AnQiCMS）深知这一点，因此其内置的评论功能，无论是显示评论列表、处理回复关系，还是进行评论管理，都提供了强大而灵活的支持。

核心功能概览：安企CMS 的评论机制

安企CMS的评论功能旨在为内容提供一个直接的用户反馈渠道。在后台管理系统中，您可以找到专门的“内容评论管理”模块，对所有评论进行统一查看、审核和回复操作。这确保了评论内容的质量和合规性，为网站运营者提供了极大的便利。

当访客在您的网站文章、产品或其他内容页下提交评论后，这些评论会根据您的设置进入审核流程。一旦通过审核，它们就可以在前台页面显示出来，与其他评论共同构成一个互动的交流空间。

在前端展示评论列表：commentList 标签的魔法

要在网站前端页面展示访客评论，我们主要依赖安企CMS强大的模板标签体系中的 commentList 标签。这个标签是评论列表展示的核心，它允许我们灵活地获取和渲染指定文章或内容的评论数据。

使用 commentList 标签非常直观。您需要指定评论所属的内容ID（通常是文章ID），以及您希望的展示方式。例如，要在一个文章详情页显示该文章的评论列表，您可以使用类似这样的代码片段：

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
        <!-- 这里是单条评论的显示逻辑 -->
    {% endfor %}
{% endcommentList %}

在这段代码中：

• archiveId=archive.Id 指定了要获取当前文章（archive）的评论，archive.Id 是当前文章的唯一标识。
• type="list" 表示以列表形式获取评论，而不是分页形式。如果需要分页，可以使用 type="page"，并结合 pagination 标签。
• limit="6" 则限制了每次显示最新评论的数量，您可以根据页面布局调整此数值。

comments 变量是一个包含多条评论信息的数组对象，我们通过 for 循环遍历 comments 中的每个 item，即可逐一展示每条评论的详细信息。每条评论 item 包含 Id、UserName、Content、CreatedTime 等字段，足够您构建丰富多彩的评论展示界面。

深度解析回复关系：父子评论的巧妙呈现

评论系统的一大魅力在于其能够形成对话式的回复链，安企CMS对这种回复关系的处理也相当精妙。在每条评论的 item 对象中，有一个特殊的字段叫做 Parent。这个 Parent 字段本身也是一个评论对象，它存储了当前评论所回复的那条父级评论的完整信息。

利用 item.Parent 字段，我们可以轻松地在模板中实现评论的嵌套显示，从而清晰地展现回复关系。一个常见的做法是，当检测到 item.Parent 存在时，将当前评论的内容进行缩进，并引用父级评论的部分内容，形成视觉上的层级感，就像这样：

    {% for item in comments %}
    <div class="comment-item">
      <div class="comment-header">
        <span>{{item.UserName}}</span>
        {% if item.Parent %}
        <span>回复</span>
        <span class="reply-to-user">{{item.Parent.UserName}}</span>
        {% endif %}
        <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
      </div>
      <div class="comment-content">
        {% if item.Parent %}
        <blockquote class="reply-blockquote">
          {{item.Parent.Content|truncatechars:100}} <!-- 引用父级评论，并截断显示 -->
        </blockquote>
        {% endif %}
        {{item.Content}}
      </div>
      <!-- 评论点赞和回复按钮等互动元素 -->
      <div class="comment-control" data-id="{{item.Id}}" data-user="{{item.UserName}}">
        <a class="item" data-action="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
        <a class="item" data-action="reply">回复</a>
      </div>
    </div>
    {% endfor %}

通过这样的结构，访客可以一目了然地看到谁回复了谁，极大地提升了阅读体验和互动氛围。

评论状态与用户体验：审核机制的考量

为了维护评论区的健康环境，安企CMS内置了评论审核机制。每条评论 item 都有一个 Status 字段：Status = 1 表示评论已通过审核并可以公开显示；Status = 0 则表示评论正在等待审核。

在前端展示时，您可以根据这个状态字段，选择性地显示评论。例如，您可以对未审核的评论显示“审核中”的提示，或仅在评论通过审核后才完全展示其内容，以保障网站内容的质量。

      <div class="comment-content">
        {% if item.Status != 1 %}
          <p class="pending-review">该评论正在审核中，请耐心等待。</p>
          {% if item.Parent %}<blockquote class="reply-blockquote">{{item.Parent.Content|truncatechars:100}}</blockquote>{% endif %}
          <p>{{item.Content|truncatechars:30}}</p> <!-- 未审核评论可选择部分显示或不显示 -->
        {% else %}
          {% if item.Parent %}<blockquote class="reply-blockquote">{{item.Parent.Content|truncatechars:100}}</blockquote>{% endif %}
          <p>{{item.Content}}</p>
        {% endif %}
      </div>

构建评论提交表单：互动从这里开始

访客能够提交评论是评论系统发挥作用的基础。安企CMS提供了标准的评论提交接口 /comment/publish。构建一个简单的HTML表单，并确保包含以下关键字段，即可实现评论提交功能：

• archive_id：当前评论所属内容的ID，这是必填项。
• user_name：评论者的昵称，也是必填项。
• content：评论的具体内容，必填。
• parent_id：如果这是一条回复评论，需要带上父级评论的ID。默认为0表示主评论。
• return：可选参数，用于指定提交后后端返回的数据格式，可以是 html 或 json。

表单示例：

<form method="post" action="/comment/publish">
  <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
  <input type="hidden" name="parent_id" value="0" id="parent-comment-id"> <!-- 默认0，用于回复时JS修改 -->
  <div>
    <label for="comment-username">您的昵称</label>
    <input type="text" id="comment-username" name="user_name" required placeholder="请输入您的昵称">
  </div>
  <div>
    <label for="comment-content">评论内容</label>
    <textarea id="comment-content" name="content" required rows="5" placeholder="发表您的看法..."></textarea>
  </div>
  <!-- 验证码区域，如果开启了验证码功能 -->
  <div id="captcha-area">
    <!-- 引入 tag-/anqiapi-other/167.html 中提供的验证码代码 -->
  </div>
  <button type="submit">提交评论</button>
</form>

请注意，parent_id 字段通常会在前端通过JavaScript动态修改，当用户点击某条评论的“回复”按钮时，将该评论的ID填入此隐藏字段，以实现对特定评论的回复。

增强互动：评论点赞与验证码

安企CMS还提供了额外的互动和安全机制：

• 评论点赞：通过向 /comment/praise 接口发送 POST 请求，并携带评论 id 即可为评论点赞。这通常需要通过JavaScript实现异步提交，