在运营网站时，垃圾评论和恶意留言总是让人头疼的问题，它们不仅影响用户体验，还可能损害网站的专业形象。幸运的是，安企CMS提供了一种简单有效的方式来解决这个问题——那就是在评论或留言表单中添加验证码。这能大大提升网站的安全性，过滤掉大部分自动化垃圾信息。

下面，我们来详细了解如何在安企CMS中，为你的评论和留言表单添加验证码。这个过程可以分为两步，非常直观且易于操作。

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

首先，我们需要告诉安企CMS系统，我们希望在某些表单中启用验证码。

  1. 进入后台管理界面：登录你的安企CMS后台。
  2. 导航到功能设置：在左侧导航栏中，找到并点击“功能管理”模块。
  3. 选择表单类型：根据你需要添加验证码的表单类型，点击“网站留言管理”或“内容评论管理”进入相应的设置页面。
  4. 启用验证码：在这个设置页面中，你会看到一个关于启用验证码的选项。只需勾选它并保存，就完成了后台的配置。这就像在后台点亮一个开关，告诉系统：‘好的，我需要验证码了！’

完成这一步后，安企CMS的后端服务就已经准备好生成和验证验证码了。

第二步：在模板中集成验证码显示

尽管后台已经开启了验证码功能，但为了让用户在前台实际看到并输入验证码，我们还需要对网站的模板文件进行一些小调整。

安企CMS采用Django模板引擎语法，这使得修改模板变得非常灵活。通常，评论表单可能位于 template/你的模板目录名/comment/list.html，而留言表单则在 template/你的模板目录名/guestbook/index.html。你需要编辑对应文件的 <form> 标签内部。

请在你的评论或留言表单的 <form> 标签内部，找到你想要显示验证码的位置，然后插入以下代码片段：

使用原生JavaScript (推荐)

<div style="display: flex; clear: both; align-items: center; margin-bottom: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id" value="">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="你的表单样式类" style="flex: 1; height: 50px; padding: 0 10px; border: 1px solid #ccc; border-radius: 4px;">
  <img src="" id="get-captcha" style="width: 150px; height: 50px; cursor: pointer; margin-left: 10px; border: 1px solid #ccc; border-radius: 4px;" alt="验证码" title="点击刷新验证码"/>
  <script>
    document.getElementById('get-captcha').addEventListener("click", function (e) {
      fetch('/api/captcha')
              .then(response => {
                // 检查响应是否成功
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
              })
              .then(res => {
                if (res.code === 0 && res.data) {
                    document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
                    document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
                } else {
                    console.error('获取验证码失败:', res.msg);
                }
              })
              .catch(err => {
                console.error('请求验证码出错:', err);
              });
    });
    // 页面加载时自动获取一次验证码
    document.getElementById('get-captcha').click();
  </script>
</div>

如果你网站使用了 jQuery 库，也可以采用以下更简洁的写法：

<div style="display: flex; clear: both; align-items: center; margin-bottom: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id" value="">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="你的表单样式类" style="flex: 1; height: 50px; padding: 0 10px; border: 1px solid #ccc; border-radius: 4px;">
  <img src="" id="get-captcha" style="width: 150px; height: 50px; cursor: pointer; margin-left: 10px; border: 1px solid #ccc; border-radius: 4px;" alt="验证码" title="点击刷新验证码"/>
  <script>
    // jQuery 调用方式
    $('#get-captcha').on("click", function (e) {
      $.get('/api/captcha', function(res) {
        if (res.code === 0 && res.data) {
          $('#captcha_id').attr("value", res.data.captcha_id);
          $('#get-captcha').attr("src", res.data.captcha);
        } else {
          console.error('获取验证码失败:', res.msg);
        }
      }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
        console.error('请求验证码出错:', textStatus, errorThrown);
      });
    });
    // 页面加载时自动获取一次验证码
    $('#get-captcha').click();
  </script>
</div>

代码解释：

  • 隐藏输入框 (captcha_id)：用于存储每次验证码请求生成的唯一ID，这个ID会随表单一起提交到后端进行验证。
  • 文本输入框 (captcha)：供用户输入图片中显示的验证码字符。
  • 图片标签 (<img>)：用来显示验证码图片。
  • JavaScript代码：
    • 通过 fetch 或 $.get 向 /api/captcha 接口发起请求，获取新的验证码图片URL和对应的 captcha_id。
    • 当用户点击验证码图片时，会触发这段JS代码，刷新验证码。
    • document.getElementById('get-captcha').click(); (或 $('#get-captcha').click();) 这一行非常关键，它确保在页面加载后立即获取并显示第一个验证码，让用户无需点击就能看到。
    • 样式部分 (style="...") 是为了让验证码输入框和图片能更好地融合到你的表单中，你可以根据自己网站的实际情况调整这些样式。
    • alt 和 title 属性的添加，提升了用户体验和可访问性。

集成要点：

  • 确保这段代码被放置在你的评论或留言表单的 <form> 标签内部。
  • class="你的表单样式类" 这一部分，请替换为你网站实际使用的表单输入框的CSS类名，以便样式统一。
  • 请务必保留 name="captcha_id" 和 name="captcha" 这两个字段，它们是后端验证码功能识别的必要参数。

保存你修改的模板文件，并刷新前台页面，你现在应该能在评论或留言表单中看到一个验证码图片和对应的输入框了。

通过这两步简单的操作，你的安企CMS网站就能有效抵御大部分自动化的垃圾信息，为用户提供一个更清爽、更安全的交流环境。

常见问题 (FAQ)

Q1：为什么我按照步骤操作了，但验证码图片不显示？

A1：这可能有几个原因。首先，请确保你在后台的“功能管理”中，针对“网站留言管理”或“内容评论管理”确实勾选了启用验证码的选项并保存。其次，检查浏览器控制台（通常按 F12 键打开）是否有JavaScript错误或网络请求失败的提示，这可能表明 /api/captcha 接口没有正确响应，或者你的模板代码有语法错误。最后，确认你修改的模板文件已正确保存并上传到服务器，并且缓存已更新。

Q2：我可以自定义验证码图片的样式吗？

A2：当然可以。验证