搜索到
2
篇与
验证码
的结果
-
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>最终成品展示：技术有限，做得不好请见谅！ -
Typecho上Joe主题安装XCaptcha验证码防止垃圾评论 1、序言这么些年被垃圾评论给搞怕了，之前我在管理自己的网站的时候，安全第一，一般都是设置的评论需要我人工审核才可以通过。这个带来的不好的体验就是经常有访客不能及时浏览到回复可见的内容而导致网站体验不佳。今天我在github上看到有这么一个typecho插件，瞬间来了心致，分分钟布署到自己的网站上，一番使用下来，体验感极佳。 github地址 XCaptcha 因为我使用了Joe主题+胖蒜TePass插件，故而这个验证码插件还需要做一些设置。2、布署过程①、将插件下载并上传到网站，这个就不说了②、后台启动插件并设置这个插件有多种验证方式，刚好我的域名是在CF管理的，所以我就选择了CF的验证方式，需要到CF后台进行一下设置③、cloudflare验证设置在cf后台左侧菜单栏找到应用程序安全并点击Turnstile再点击添加小组件名称--任意主机--你的域名（rongyan.cc）模式--托管预先许可--否然后点击创建接下来把申请到的密钥在插件后台对应填写进去。④ 在需要增加验证码的位置添加相关代码，2处（登陆页+评论按钮处）添加的验证码代码如下：<?php if (array_key_exists('XCaptcha', Typecho_Plugin::export()['activated'])) : XCaptcha_Plugin::showCaptcha(); endif; ?>因为我使用了胖蒜TePass插件，故而登陆页在目录TePass/theme/ucenter下，打开signin.php文件，找到登陆按钮处，在前面增加如下代码：评论按钮处在Joe主题/joe/public目录下的comment.php文件里这些操作完成后重新刷新一下网页就可以了2026-02-05补充： 经过几天的实测，好家伙，这么多机器人，验证结果：
