Typecho Joe主题增加简单的计算式验证码

序言

之前我写过这么一篇文章：
Typecho上Joe主题安装XCaptcha验证码防止垃圾评论
当时测试的时候是没有问题的，这东西因为都是靠云端验证的，需要服务商的API key。我用的是cf验证，只知道因为CF漂洋过海在我们中国大陆可能速度上不是很理想，其实也想找其它的替代的，耐何没找到中意的，就一直没管它。
直到今天有位老铁私下找我，说不能评论了，我测试了一下确实不行。不知道后来被我改了哪里，没办法提交评论。至于什么时候失效的，我也不知道了。
索性不管它了，决定手搓一个更简单的。

一、目标

宗旨是越简单越好，只要在提交评论前增加一个100以内的加减法即可，所以呢就需要做到修改的文件越少、修改的地方越少越好。最终经过实验，只需要改动一个文件的代码即可完美实现。

二、方法

1、第一段代码：

编写验证码盒子：
打开/joe/public/comment.php
定位到发送评论按钮这段代码：

<div class="foot">
  <div class="owo joe_owo__contain"></div>
  <div class="submit">
    <span class="cancle joe_comment__cancle">取消</span>
    <button type="submit">发送评论</button>

在<div class="owo joe_owo__contain"></div>和<div class="submit">中间也就是第2行和第3行之间插入验证码代码，最终代码如下：回复可见

这里我分段解释一下代码的意思：

<!-- 这是最外层的大盒子，负责把验证码 居中显示 -->
<div 
  style="margin: 10px 0;   <!-- 上下留10px空隙，美观 -->
         text-align: center; <!-- 让里面的内容 水平居中 -->
         width: 100%;"      <!-- 宽度占满整行，才能居中 -->
  id="verify_box"          <!-- 给这个盒子一个名字，方便JS控制 -->
>

<!-- 这是内层小盒子，负责把 题目 + 输入框 排在同一行 -->
<div 
  style="display: inline-flex;  <!-- 让内容横向排列（题目+输入框并排） -->
         align-items: center;   <!-- 垂直居中对齐，看起来整齐 -->
         gap: 8px;"            <!-- 题目和输入框之间留8px空隙 -->
>

<!-- 这是显示计算题目的文字，比如 15 + 23 = ? -->
<span 
  id="code_text" 
  style="font-size:14px;            <!-- 文字大小14px -->
         color: #00D800 !important; <!-- 文字颜色：绿色 -->
         font-weight: bold;"        <!-- 文字加粗 -->
></span>

<!-- 这是你用来输入答案的输入框 -->
<input 
  type="text"                <!-- 普通文本输入框 -->
  id="code_input"            <!-- 给输入框取名 -->
  name="verify_code"         <!-- 提交时用的名字 -->
  placeholder="输入答案"     <!-- 没输入时显示的灰色提示文字 -->

  style="background:transparent !important; <!-- 背景：透明 -->
         color: #00D800 !important;          <!-- 输入的文字：绿色 -->
         font-weight: bold;                 <!-- 输入的文字：加粗 -->
         padding:5px 8px;                   <!-- 内边距，让框变大好点 -->
         border:1px solid #ddd;             <!-- 边框：灰色细线 -->
         border-radius:4px;                 <!-- 边框圆角，更美观 -->
         width:70px;"                      <!-- 输入框宽度 -->
>

<!-- 隐藏的输入框，不用管，后台验证用的 -->
<input type="hidden" id="code_answer" name="verify_answer">

2、对验证码盒子进行控制：

在文件结尾直接添加如下代码即可：回复可见：

再分段解释一下代码的意思：

$(function() {
    // 验证码JS
    function refreshCode() {
        let num1 = Math.floor(Math.random()*41)+10; // 生成50以内的随机数
        let num2 = Math.floor(Math.random()*41)+10; // 第二个50以内的随机数
        // 注：如果你想把两个数改为10以内的个位数，则上面两个变量*41)+10改为*9)+1即可。
        window.answer = num1 + num2; // 把两个数相加
        $("#code_text").text(num1 + " + " + num2 + " = ?");
        $("#code_input").val('');
    }

<div 
style='
position:fixed;    /* 这个最关键：让提示框 固定在屏幕上，不随滚动条移动 */
top:50%;           /* 距离屏幕顶部 50% → 垂直方向中间 */
left:50%;          /* 距离屏幕左边 50% → 水平方向中间 */
transform:translate(-50%,-50%);  /* 让提示框自身真正居中，不偏移 */
background:#222;   /* 背景颜色：深灰色 */
color:#fff;        /* 文字颜色：白色 */
padding:15px 25px; /* 内边距：让文字和边框之间有空隙，看起来不拥挤 */
border-radius:4px; /* 圆角：让提示框四角变圆，更好看 */
z-index:9999;      /* 层级最高：确保提示框在最上面，不被其他内容挡住 */
'
>
请输入正确的答案！  <!-- 提示框里显示的文字 -->
</div>

最终成品展示：

技术有限，做得不好请见谅！