在运营网站时，我们常常会遇到机器人（bot）提交大量的垃圾留言或评论，这不仅会影响网站内容质量，增加管理负担，还可能对网站的声誉造成负面影响。幸运的是，AnQiCMS 提供了一种内置的验证码机制，可以有效地帮助我们防止这类滥用行为。接下来，我们就一起看看如何在 AnQiCMS 中为用户留言或评论添加验证码。

第一步：在后台开启验证码功能

首先，我们需要登录 AnQiCMS 的后台管理界面，启用验证码的核心功能。这一步是让系统知道，在处理用户提交的留言或评论时，需要进行验证码校验。

你可以通过以下路径找到这个设置：

  1. 登录你的 AnQiCMS 后台。
  2. 在左侧导航栏中，找到并点击 “功能管理”。
  3. 在展开的功能列表中，选择 “网站留言管理” 或 “内容评论管理”。如果你想同时保护留言和评论，这两个区域可能都需要检查。
  4. 进入管理页面后，你会看到一个名为 “留言评论验证码功能” 的选项。通常，这是一个开关按钮或者复选框。只需将其状态切换为 “启用”，然后记得点击 “保存” 按钮，确保设置生效。

完成这一步后，AnQiCMS 的后台就做好了验证码校验的准备。但是，仅仅在后台启用是不够的，我们还需要在网站的前端页面上，将验证码的显示和输入字段添加进去。

第二步：修改前端模板，集成验证码表单

验证码需要一个地方来显示图片，并提供一个输入框让用户填写。这需要在你的网站前端模板中进行修改。通常，留言表单位于 guestbook/index.html 模板，而评论表单可能位于 comment/list.html 或文章详情页的模板中。

在你的留言或评论表单的合适位置（比如提交按钮上方，或在留言/评论内容输入框下方），你需要添加以下 HTML 代码片段：

<div style="display: flex; clear: both; margin-top: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1; margin-right: 10px;">
  <img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" alt="验证码图片" />
</div>

这里包含了三个关键元素：

  • 一个隐藏的输入框（captcha_id）：它用来存储当前验证码会话的唯一标识符，用户不需要填写，但系统会用它来匹配用户输入的验证码。
  • 一个文本输入框（captcha）：这是用户实际输入他们看到的验证码的地方。
  • 一个图片标签（get-captcha）：这个标签将用来显示动态生成的验证码图片。

第三步：编写 JavaScript 代码，动态加载验证码图片

由于验证码图片是动态生成的，每次加载页面或刷新验证码时都会不同，所以我们需要一段 JavaScript 代码来动态地获取并显示它。这段代码会在页面加载时自动获取第一个验证码，并在用户点击验证码图片时刷新。

将以下 JavaScript 代码添加到你网站模板中引入前端 JS 的地方，或者直接放在你修改的表单 HTML 片段下方（用 <script> 标签包裹起来）：

<script>
  // 监听验证码图片的点击事件，用于刷新验证码
  document.getElementById('get-captcha').addEventListener("click", function (e) {
    // 发送请求到后台 API 获取新的验证码
    fetch('/api/captcha')
      .then(response => {
        // 解析响应为 JSON 格式
        return response.json()
      })
      .then(res => {
        // 更新隐藏字段 captcha_id 的值
        document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
        // 更新验证码图片的 src 属性，显示新的验证码图片
        document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
      }).catch(err =>{
        console.error("获取验证码失败:", err); // 错误处理
      });
  });
  // 页面加载后自动触发一次点击事件，以显示初始验证码
  document.getElementById('get-captcha').click();
</script>

如果你习惯使用 jQuery，也可以采用以下更简洁的写法：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 如果你的网站还没有引入jQuery，请先引入 -->
<script>
  // jQuery 调用方式
  $('#get-captcha').on("click", function (e) {
    $.get('/api/captcha', function(res) {
      $('#captcha_id').attr("value", res.data.captcha_id);
      $('#get-captcha').attr("src", res.data.captcha);
    }, 'json');
  });
  // 页面加载后自动触发一次点击事件，以显示初始验证码
  $('#get-captcha').click();
</script>

这段 JavaScript 代码的核心逻辑是：当页面加载时，它会向 AnQiCMS 后台的 /api/captcha 接口发送请求，获取一个验证码图片URL和一个对应的 ID。然后，它会将这个图片显示在 <img> 标签中，并将 ID 存入隐藏的 captcha_id 输入框。用户点击图片时，这个过程会重复，生成新的验证码。

第四步：保存并测试

完成以上所有修改后，保存你的模板文件。现在，访问你的网站上包含留言或评论表单的页面。

你应该会看到表单下方多了一个验证码图片和一个输入框。尝试在输入框中填入图片中的字符，然后提交留言或评论。如果验证码输入正确，你的内容就会正常发布；如果输入错误，系统会提示验证码不正确。这表明验证码功能已经成功运行，可以有效阻止自动化机器人的骚扰了。

通过以上简单的几个步骤，你的 AnQiCMS 网站就能有效地利用验证码机制，大大减少垃圾信息，让网站的内容环境更加健康和有序。

常见问题 (FAQ)

1. 为什么我在 AnQiCMS 后台开启了“留言评论验证码功能”，但前台表单仍然看不到验证码？

这通常是因为你只在后台开启了功能，但没有在前台模板中添加显示验证码所需的 HTML 元素和 JavaScript 代码。后台的设置只是启用了验证码的校验逻辑，而验证码的呈现（图片显示和输入框）需要手动集成到你的网站模板中。请确保你已按照本文的第二和第三步，在留言或评论的模板文件中添加了相应的 HTML 和 JavaScript 代码。

2. AnQiCMS 提供的验证码是什么类型的？我能自定义它的样式或更换为其他类型的验证码吗？

目前 AnQiCMS 提供的验证码是一种内置的图片验证码机制。它主要通过显示随机生成的图片字符供用户识别和输入。关于样式自定义，你可以通过修改前端 CSS 来调整验证码图片容器的大小、边框等显示效果，但图片本身的字体、颜色等通常由系统后台生成，直接自定义的选项可能有限。如果需要更换为其他类型的验证码（如滑动验证、行为验证等），则可能需要进行更深入的二次开发或等待未来版本的功能更新。

3. 验证码图片无法加载或点击刷新时没有任何反应，该如何排查？

如果验证码图片不显示或无法刷新，可能是以下原因：

  • 网络问题或 API 路径错误： 检查浏览器的开发者工具（F12），查看网络请求，确认 /api/captcha 接口是否被正确调用，是否有返回数据，以及状态码是否为 200。
  • JavaScript 错误： 在开发者工具的 Console（控制台）中检查