如何集成评论提交表单并处理用户评论？

在现代网站运营中，用户评论是提升内容互动性和活跃度的重要方式。安企CMS（AnQiCMS）提供了强大而灵活的评论功能，让您可以轻松地在网站上集成评论提交表单，并对用户评论进行有效管理。接下来，我们将一起探索如何在AnQiCMS中实现这一目标。

一、评论功能的前期准备与后台概览

在着手集成评论表单之前，我们首先需要确认评论功能在后台是启用状态。安企CMS通常会将这类互动功能集中在“功能管理”模块。在这里，您可以找到“内容评论”选项，进行评论功能的整体开启与关闭，以及一些基础的评论规则设置。

此外，为了确保评论提交的安全性，避免垃圾评论的泛滥，强烈建议启用验证码功能。您可以在“后台设置”下的“内容设置”中，找到并开启评论的验证码选项。开启后，在模板中集成评论表单时，需要额外加入验证码相关的代码，以配合后台的设置。后台提供的“内容评论”管理页面，也是您未来审核、编辑、删除用户评论的主要阵地。

二、在模板中集成评论提交表单

将评论提交表单集成到网站的详情页面（如文章详情页或产品详情页）是用户发表评论的第一步。安企CMS的模板系统非常灵活，允许您通过简单的标签和HTML结构来构建表单。

通常，评论表单会放置在详情页模板文件内，例如{模型table}/detail.html。您需要构建一个标准的HTML <form> 元素，并指定其提交地址为/comment/publish。

表单的核心元素包括：

• 隐藏字段 archive_id：这是评论关联到具体内容的标识。您可以使用archiveDetail标签来动态获取当前页面的文档ID，例如{% archiveDetail with name="Id" %}，并将其作为archive_id的值。
• 隐藏字段 return：此字段用于指定后端返回的数据格式。通常设置为html或json。若希望页面直接刷新并显示成功信息，可使用html；若需通过JavaScript异步处理，则设为json。
• 用户昵称 user_name：这是一个文本输入框，供用户填写昵称。
• 评论内容 content：这是一个多行文本域（textarea），供用户输入评论内容。
• 父评论ID parent_id (可选)：当用户回复某个具体评论时，需要此字段来建立父子关系。它通常也是一个隐藏字段，通过JavaScript动态设置。

验证码的集成

如果后台启用了验证码，那么表单中必须包含验证码相关的字段。这通常包括一个隐藏的captcha_id字段、一个用于用户输入的captcha文本框，以及一个显示验证码图片的<img>标签。同时，需要一段JavaScript代码来请求验证码图片，并在用户点击时刷新图片。

例如，您可以在表单中添加如下代码：

<form method="post" action="/comment/publish">
  <input type="hidden" name="return" value="html">
  <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
  <input type="hidden" name="parent_id" value="0" id="comment-parent-id"> {# 默认为0，回复时动态修改 #}

  <div>
    <label for="user_name">您的昵称</label>
    <input type="text" name="user_name" id="user_name" required placeholder="请填写您的昵称">
  </div>

  <div>
    <label for="content">评论内容</label>
    <textarea name="content" id="content" required rows="5" placeholder="请留下您的宝贵评论"></textarea>
  </div>

  {# 验证码区域，如果后台启用 #}
  <div class="captcha-area">
    <input type="hidden" name="captcha_id" id="captcha_id">
    <input type="text" name="captcha" required placeholder="请填写验证码">
    <img src="" id="get-captcha" alt="验证码" title="点击刷新验证码">
    <script>
      // 推荐使用原生JS或您网站已引入的jQuery
      document.getElementById('get-captcha').addEventListener("click", function () {
        fetch('/api/captcha')
          .then(response => response.json())
          .then(res => {
            document.getElementById('captcha_id').value = res.data.captcha_id;
            document.getElementById('get-captcha').src = res.data.captcha;
          })
          .catch(err => console.error('获取验证码失败:', err));
      });
      document.getElementById('get-captcha').click(); // 页面加载时自动获取一次验证码
    </script>
  </div>

  <button type="submit">提交评论</button>
  <button type="reset">重置</button>
</form>

三、展示用户评论列表

提交表单之后，用户自然希望能看到已发布的评论。在详情页模板中，使用安企CMS提供的commentList标签，可以非常方便地获取并展示评论列表。

使用 {% commentList comments with archiveId=archive.Id type="page" limit="10" %} 这样的标签，您可以：

• 通过archiveId参数指定要获取哪个文档的评论。这里同样使用archive.Id来动态获取当前文档ID。
• type="page"表示您希望评论列表支持分页，这样就可以配合pagination标签展示分页导航。
• limit="10"则控制了每页显示的评论数量。

通过for循环遍历comments变量，您可以展示每条评论的详细信息，例如item.UserName（评论者昵称）、item.Content（评论内容）和item.CreatedTime（评论时间）。stampToDate过滤器可以将时间戳格式化为易读的日期时间格式。

对于回复功能，安企CMS提供了item.Parent字段，如果评论是回复其他评论，此字段将包含被回复评论的信息，方便您构建嵌套的评论显示样式。同时，item.Status字段可用于判断评论是否通过审核，您可以根据其值（Status = 1表示已审核）来决定是否显示或提示审核状态。

评论列表与分页示例：

”`html

{% for item in comments %}
  {% if item.Status == 1 %} {# 只显示已审核的评论 #}
    <div class="comment-item">
      <div class="comment-meta">
        <span>{{ item.UserName }}</span>
        <span>- {{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
      </div>
      {% if item.Parent %}
        <blockquote class="reply-to">
          回复 {{ item.Parent.UserName }}: {{ item.Parent.Content|truncatechars:50 }}
        </blockquote>
      {% endif %}
      <p>{{ item.Content }}</p>
      <div class="comment-actions">
        <a href="javascript:;" class="reply-btn" data-comment-id="{{item.Id}}" data-user-name="{{item.UserName}}">回复</a>
        <a href="javascript:;" class="like-btn" data-comment-id="{{item.Id}}">赞 (<span>{{item.VoteCount}}</span>)</a>
      </div>
    </div>
  {% else %}
    <div class="