告别垃圾信息：如何在AnQiCMS评论表单中启用验证码？

在网站运营的日常工作中，垃圾评论常常是一个令人头疼的问题。这些由机器人或恶意用户发布的评论不仅会充斥您的评论区，拉低网站内容的整体质量，还可能包含恶意链接，影响用户体验，甚至对网站的SEO表现造成负面影响。为了有效遏制这种现象，为评论表单启用验证码验证机制显得尤为重要。

AnQiCMS，作为一款功能强大且注重安全的企业级内容管理系统，充分考虑到了网站运营者在内容管理和安全防护方面的需求。它内置了灵活的验证码机制，可以帮助您轻松抵御垃圾评论的侵扰。接下来，我将详细介绍如何在AnQiCMS中为评论表单启用验证码，让您的网站评论区重归清朗。

为什么评论表单需要验证码？

想象一下，如果您的网站没有验证码保护，自动化脚本可以轻而易举地批量提交评论，这些评论往往与文章内容无关，或是赤裸裸的广告，甚至包含病毒链接。这不仅让真实的用户感到沮丧，因为他们的评论可能被淹没，也让网站管理员不得不投入大量时间和精力去审核和删除这些无用信息。

验证码（Captcha）作为一种区分计算机和人类的挑战-响应测试，能够有效阻止绝大多数自动化脚本的提交行为。它通过要求用户完成一个简单的任务（例如识别图片中的文字、进行简单的数学计算等），确保评论提交者是真实的人，从而过滤掉大量的垃圾信息。

AnQiCMS的验证码机制概览

AnQiCMS提供了一个简洁高效的验证码解决方案，其启用过程主要分为两个步骤：首先在后台开启全局验证码功能，然后将验证码的显示和交互逻辑集成到前端的评论模板中。这种设计既保证了核心功能的开启，又赋予了模板开发者高度的自由度，可以根据网站的实际设计风格来定制验证码的呈现方式。

第一步：在AnQiCMS后台启用评论验证码功能

启用AnQiCMS的评论验证码功能非常直接。您需要以管理员身份登录您的AnQiCMS后台。

  1. 登录后台后，请找到左侧导航菜单中的“后台设置”选项，并点击进入。
  2. 在“后台设置”页面中，通常会有“内容设置”子菜单，这里集中了网站内容的各项配置。
  3. 点击“内容设置”后，您会看到一个名为“留言评论验证码”的选项。默认情况下，这个选项可能是关闭的。
  4. 您只需将其状态切换为启用，然后保存设置。

完成这一步，AnQiCMS的后端就已经准备好为评论表单提供验证码服务了。接下来，我们需要在前台模板中调用并显示它。

第二步：在评论表单中集成验证码代码

虽然后台已启用功能，但验证码的实际显示和交互需要在网站的前端模板文件中实现。这为您提供了根据网站风格自由定制验证码外观的机会。

通常，评论表单会出现在文章详情页的底部，因此您需要编辑与评论表单相关的模板文件。根据AnQiCMS的模板设计约定，这可能位于您的模板目录下的{模型table}/detail.html（如archive/detail.html）或comment/list.html文件中，具体取决于您的模板如何组织。

找到您评论表单的HTML代码，在表单中添加以下HTML结构和JavaScript代码片段，以引入验证码：

<div style="display: flex; clear: both; margin-bottom: 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; border: 1px solid #e6e6e6;" alt="验证码" title="点击刷新验证码"/>
</div>

<script>
  // 该函数用于从AnQiCMS后端获取验证码图片及ID
  function fetchCaptcha() {
    fetch('/api/captcha') // 访问AnQiCMS提供的验证码API接口
      .then(response => {
        return response.json(); // 解析返回的JSON数据
      })
      .then(res => {
        // 将获取到的验证码ID设置到隐藏字段中，用于表单提交时后端验证
        document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
        // 将获取到的验证码图片URL设置给<img>标签的src属性，使其显示出来
        document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
      })
      .catch(err => {
        console.error('获取验证码失败:', err);
      });
  }

  // 页面加载完成后立即获取一次验证码
  document.addEventListener('DOMContentLoaded', fetchCaptcha);

  // 为验证码图片添加点击事件，点击时刷新验证码
  document.getElementById('get-captcha').addEventListener("click", fetchCaptcha);
</script>

代码解析：

  • captcha_id 隐藏字段：这是一个非常关键的字段。它存储了AnQiCMS后端为当前验证码图片生成的一个唯一标识符。在用户提交评论时，这个ID会与用户输入的验证码内容一同发送到服务器，以便后端进行配对验证。
  • captcha 文本输入框：这是用户输入他们所看到验证码内容的区域。
  • get-captcha 图片标签：这个<img>标签是用来显示验证码图片的。它的src属性会通过JavaScript动态更新。
  • JavaScript代码：
    • fetchCaptcha() 函数负责发起网络请求到AnQiCMS的/api/captcha接口。这个接口会返回一个JSON对象，其中包含captcha_id（验证码的唯一标识）和captcha（验证码图片的Base64编码或URL）。
    • 当页面加载完成后，fetchCaptcha()会被立即调用一次，以显示初始验证码。
    • <img>标签被添加了一个点击事件监听器，每次点击图片，都会再次调用fetchCaptcha()，从而刷新验证码图片，方便用户在看不清时更换。

如果您在网站中使用了jQuery库，可以采用更简洁的写法：

<script>
  // jQuery 调用方式
  function fetchCaptchaWithJquery() {
    $.get('/api/captcha', function(res) {
      $('#captcha_id').attr("value", res.data.captcha_id);
      $('#get-captcha').attr("src", res.data.captcha);
    }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
      console.error('获取验证码失败:', textStatus, errorThrown);
    });
  }

  $(document).ready(fetchCaptchaWithJquery); // 页面加载完成后获取验证码
  $('#get-captcha').on("click", fetchCaptchaWithJquery); // 点击图片刷新验证码
</script>

请确保将这段代码放置在您的评论表单</form>标签之前，或者放置在页面底部</body>标签之前，确保DOM元素已加载。

效果验证与测试

完成上述配置后，保存您的模板文件并刷新网站页面。访问任意一篇带有评论功能的文章，您应该会在评论表单中看到一个验证码图片和一个对应的输入框。

尝试提交一条评论：

  1. 正常提交：输入正确的验证码，评论应该能成功提交。
  2. 输入错误验证码：提交时，系统应提示验证码错误，评论无法提交。
  3. 不输入验证码：提交时，应提示验证码为必填项。
  4. 点击验证码图片：图片应该能刷新，显示新的验证码。

如果一切正常，恭喜您！您的AnQiCMS评论表单现在已经受到了验证码的保护，能够有效过滤大部分垃圾信息。

总结

通过AnQiCMS提供的内置验证码