在网站运营中，垃圾评论无疑是一个让人头疼的问题。它们不仅会影响网站的用户体验，稀释高质量的讨论内容，还可能在无形中损害网站的SEO表现，甚至占据宝贵的服务器资源。面对日益智能化的垃圾评论机器人，我们需要更有效的防御手段。幸运的是，AnQiCMS 提供了一个简单而强大的解决方案——为评论表单添加验证码功能，这能显著减少垃圾评论的侵扰。

这篇文章将详细带你了解如何在 AnQiCMS 评论表单中集成验证码，让你的评论区重回清净与秩序。

为什么评论区需要验证码？

想象一下，你的网站内容精心策划，访客互动热烈。突然，大量的广告、无关链接和乱码涌入评论区。这不仅让真正想交流的用户感到困惑，也会让搜索引擎对你的网站质量产生疑问。手动删除这些垃圾评论既耗时又费力，而且往往是按下葫芦浮起瓢。验证码，作为一种区分人类用户和自动化程序的有效工具，能够大大提高垃圾评论发布的门槛，从而解放你的运营精力，让评论区回归良性互动。

AnQiCMS 深知内容运营者的这些痛点，因此内置了评论验证码功能，让我们可以轻松应对挑战。

在 AnQiCMS 评论表单中添加验证码功能

要在 AnQiCMS 中启用评论验证码，主要分为两个核心步骤：首先是在后台开启验证码功能，然后是在前端模板中集成验证码显示和交互代码。

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

首先，我们需要在 AnQiCMS 的后台管理界面中，激活评论验证码选项。

  1. 登录你的 AnQiCMS 后台。
  2. 在左侧导航栏中找到并点击“全局设置”。
  3. 进入“内容设置”页面。
  4. 在这个页面上，你会看到一个名为“留言评论验证码功能”的选项。请将其切换为开启状态。
  5. 点击页面底部的“保存”按钮，确保设置生效。

完成这一步，AnQiCMS 系统就已准备好在服务器端处理验证码验证逻辑了。接下来，我们需要让用户在前台看到并输入验证码。

第二步：整合验证码到评论表单模板

接下来，我们需要修改网站的模板文件，将验证码的显示和交互元素添加到评论表单中。AnQiCMS 采用类似 Django 模板引擎的语法，这使得模板修改非常直观。

评论表单通常位于你的文章或产品详情页的底部，以及可能存在的专门的评论列表页面。具体的文件路径可能因你使用的模板而异，但通常会在 template/你的模板目录/ 下的 comment/list.html 或文章详情页 archive/detail.html 等文件中找到评论表单代码。

找到你的评论表单（通常是一个 <form> 标签），在其内部添加以下代码片段：

使用原生 JavaScript 的方式：

<div style="display: flex; clear: both">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
  <img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" />
  <script>
    document.getElementById('get-captcha').addEventListener("click", function (e) {
      fetch('/api/captcha')
              .then(response => {
                return response.json()
              })
              .then(res => {
                document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id)
                document.getElementById('get-captcha').setAttribute("src", res.data.captcha)
              }).catch(err =>{console.log(err)})
    });
    document.getElementById('get-captcha').click(); // 页面加载时自动获取一次验证码
  </script>
</div>

如果你网站使用了 jQuery，可以用更简洁的方式：

<div style="display: flex; clear: both">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
  <img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" />
  <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>
</div>

这段代码的作用是：

  • captcha_id (hidden input)：这是一个隐藏字段，用于存储每次生成的验证码的唯一标识符。当你提交评论时，这个ID会连同用户输入的验证码一起发送到服务器进行验证。
  • captcha (text input)：这是用户输入验证码的地方。
  • get-captcha (img tag)：这个 <img> 标签用于显示验证码图片。
  • <script> 部分：这段 JavaScript 代码负责与 AnQiCMS 后台的 /api/captcha 接口通信。
    • 当页面加载时，它会自动请求一张新的验证码图片并显示。
    • 当用户点击验证码图片时，它会再次请求一张新的验证码，实现刷新验证码的功能。

将这段代码插入到你的评论 form 标签内的合适位置，比如在评论内容输入框之后、提交按钮之前。保存模板文件后，刷新你的网站页面，评论表单上应该就能看到验证码图片及其输入框了。

测试和验证

完成上述步骤后，务必进行测试以确保验证码功能正常运行：

  1. 刷新页面： 检查评论表单是否显示了验证码图片和输入框。
  2. 点击图片： 尝试点击验证码图片，看是否能刷新出新的验证码。
  3. 提交评论：
    • 首先，尝试输入正确的验证码，并提交评论。检查评论是否成功发布。
    • 其次，尝试输入错误的验证码，并提交评论。系统应该提示验证码错误，阻止评论发布。
    • 最后，不输入验证码（如果设置了 required 属性则无法提交），或者留空提交，查看系统反应。

通过这些测试，你可以确认验证码是否有效地阻止了垃圾评论。

结语

为 AnQiCMS 评论表单添加验证码功能是一个简单而有效的网站维护措施。它不仅能帮助你净化评论环境，提升用户体验，还能减少你花费在内容审核上的时间，让你有更多精力投入到网站内容的创作和运营中。AnQiCMS 灵活的模板系统和强大的后台功能，让这一切变得触手可及。

常见问题解答 (FAQ)

1. 开启了后台“留言评论验证码功能”后，为什么前台评论表单还是没有显示验证码？ 答：后台开启功能只是激活了服务器端的验证逻辑，你还需要手动将验证码的显示代码（包括 <input type="hidden">、<input type="text"> 和 <img> 标签以及相应的 JavaScript 代码）添加到你网站的评论表单模板文件中。请参照文章中的“第二步：整合验证码到评论表单模板”进行操作。

2. AnQiCMS 是否支持 Google reCAPTCHA 或其他第三方验证码服务？ 答：根据目前的文档信息，AnQiCMS 内置的验证码功能是基于图片识别的简易验证码。如果需要集成 Google reCAPTCHA 或其他更复杂的第三方验证码服务，可能需要进行二次开发或寻找社区提供的插件解决方案。

3. 添加验证码后，会对我的网站性能造成影响吗？ 答：AnQiCMS 基于 Go 语言开发，具备高性能和高并发的特性。内置的图片验证码生成和验证过程非常轻量，对网站的整体性能影响微乎其微。通常情况下，你无需担心验证码会拖慢网站加载速度或响应时间。