Joe主题增加验证码(非插件方式)
侧边栏壁纸
  • 累计撰写 29 篇文章
  • 累计收到 106 条评论

Joe主题增加验证码(非插件方式)

vian
2022-08-01 / 35 评论 / 517 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年08月05日,已超过602天没有更新,若内容或图片失效,请留言反馈。

转载自 农学网

当前版本

  • Typecho 1.2
  • Joe 7.3.7

目标

  • 非插件方式,简单实现原生支持验证码,过滤机器人灌水。

涉及文件

/Joe/core/function.php (必须)

  • 目的: 增加需要用到的函数
  • 增加如下3个函数(可加在最后)
#生成验证码
function comment_protection_code(){
    $num1=rand(1,9);
    $num2=rand(1,9);
    $rand=rand(1,100)%3;
    switch($rand){
        case 0:
            $ret=$num1 + $num2;
            $symbol='+';
        break;
        case 1:
            $ret=$num1 - $num2;
            $symbol='-';
        break;
        case 2:
            $ret=$num1 * $num2;
            $symbol='×';
        break;
    }
    @session_start();
    $_SESSION['verify']=$ret;
    $_SESSION['verify_md5']=md5($num1.$num2);
    @session_write_close();
    echo "<input type=\"text\" autocomplete=\"off\" name=\"sum\" placeholder=\"$num1 $symbol $num2 = ?\" />";
    echo "<input type=\"hidden\" name=\"num1\" value=\"$num1\">\n";
    echo "<input type=\"hidden\" name=\"num2\" value=\"$num2\">";
}
#验证
function comment_protection_do(){
    /* 已登录,不检测验证码 */
    Typecho_Widget::widget('Widget_User')->to($current_user);
    if($current_user->hasLogin()){
        return 0;
    }
    @session_start();
    $case1=md5($_SESSION['verify']) != md5($_POST['sum']);
    $case2=$_SESSION['verify_md5'] != md5($_POST['num1'].$_POST['num2']);
    $debug=$_SESSION['verify'].$_SESSION['verify_md5'].$case1. $case2;
    @session_write_close();
    if($case1 || $case2){
        throw new Typecho_Widget_Exception(_t('验证码错误,建议先复制评论,然后刷新重试!','评论失败'), 200);
    }
    return 0;
}
#判断路由用到
function endsWith($haystack, $needle){
    return $needle === '' || substr_compare($haystack, $needle, -strlen($needle)) === 0;
}

/Joe/core/core.php (必须)

  • 目的: 挂载验证函数
  • 搜索函数 themeInit ,将如下代码粘贴到函数内
#仅在提交评论时生效
if(endsWith($self->request->getPathInfo(), '/comment')){
    $comment = comment_protection_do($comment, $post, $result);
}

/Joe/public/comment.php (必须)

  • 目的: 增加验证码输入框
  • 搜索 输入网址 ,在它的下方增加一个兄弟节点,用来输入验证码
...
<div class="list">
    <input type="text" autocomplete="off" name="url" placeholder="请输入网址(非必填)..." />
</div>
#上方为原始代码
#下方为新增
<!-- @苏苏修改 增加验证码输入框-->
<div class="list">
    <?php comment_protection_code();?>
</div>

/Joe/assets/js/joe.global.js (必须)

  • 目的: 在提交评论时,增加验证码校验参数
  • 打开未压缩版js文件,搜索 激活评论提交 ,用下方代码替换
    /* 激活评论提交 已修改 */
    {
        if ($('.joe_comment').length) {
            let isSubmit = false;
            $('.joe_comment__respond-form').on('submit', function (e) {
                e.preventDefault();
                const action = $('.joe_comment__respond-form').attr('action') + '?time=' + +new Date();
                const type = $('.joe_comment__respond-form').attr('data-type');
                const parent = $('.joe_comment__respond-form').attr('data-coid');
                const author = $(".joe_comment__respond-form .head input[name='author']").val();
                const _ = $(".joe_comment__respond-form input[name='_']").val();
                const mail = $(".joe_comment__respond-form .head input[name='mail']").val();
                const url = $(".joe_comment__respond-form .head input[name='url']").val();
                const sum = $(".joe_comment__respond-form .head input[name='sum']").val();
                const num1 = $(".joe_comment__respond-form .head input[name='num1']").val();
                const num2 = $(".joe_comment__respond-form .head input[name='num2']").val();
                let text = $(".joe_comment__respond-form .body textarea[name='text']").val();
                if (sum === '') return Qmsg.info('请输入验证信息!');
                if (author.trim() === '') return Qmsg.info('请输入昵称!');
                if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(mail)) return Qmsg.info('请输入正确的邮箱!');
                if (type === 'text' && text.trim() === '') return Qmsg.info('请输入评论内容!');
                if (type === 'draw') {
                    const txt = $('#joe_comment_draw')[0].toDataURL('image/webp', 0.1);
                    text = '{!{' + txt + '}!} ';
                }
                if (isSubmit) return;
                isSubmit = true;
                $('.joe_comment__respond-form .foot .submit button').html('发送中...');
                $.ajax({
                    url: action,
                    type: 'POST',
                    data: { author, mail, text, parent, url, num1, num2, sum, _ },
                    dataType: 'text',
                    success(res) {
                        let arr = [],
                            str = '';
                        arr = $(res).contents();
                        Array.from(arr).forEach(_ => {
                            if (_.parentNode.className === 'container') str = _;
                        });
                        if (!/Joe/.test(res)) {
                            Qmsg.warning(str.textContent.trim() || '');
                            isSubmit = false;
                            $('.joe_comment__respond-form .foot .submit button').html('发表评论');
                        } else {
                            window.location.reload();
                        }
                    },
                    error(res) {
                        isSubmit = false;
                        $('.joe_comment__respond-form .foot .submit button').html('发表评论');
                        Qmsg.warning('发送失败!请刷新重试!');
                    }
                });
            });
        }
    }

压缩上一步代码粘贴到同文件夹的joe.global.min.js中,替换对应代码

  • 如果压缩失败,请删除最外层的大括号后再压缩
if($(".joe_comment").length){let e=!1;$(".joe_comment__respond-form").on("submit",function(o){o.preventDefault();const t=$(".joe_comment__respond-form").attr("action")+"?time="+ +new Date,m=$(".joe_comment__respond-form").attr("data-type"),n=$(".joe_comment__respond-form").attr("data-coid"),r=$(".joe_comment__respond-form .head input[name='author']").val(),a=$(".joe_comment__respond-form input[name='_']").val(),_=$(".joe_comment__respond-form .head input[name='mail']").val(),i=$(".joe_comment__respond-form .head input[name='url']").val(),s=$(".joe_comment__respond-form .head input[name='sum']").val(),d=$(".joe_comment__respond-form .head input[name='num1']").val(),f=$(".joe_comment__respond-form .head input[name='num2']").val();let u=$(".joe_comment__respond-form .body textarea[name='text']").val();if(""===s)return Qmsg.info("请输入验证信息!");if(""===r.trim())return Qmsg.info("请输入昵称!");if(!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(_))return Qmsg.info("请输入正确的邮箱!");if("text"===m&&""===u.trim())return Qmsg.info("请输入评论内容!");if("draw"===m){u="{!{"+$("#joe_comment_draw")[0].toDataURL("image/webp",.1)+"}!} "}e||(e=!0,$(".joe_comment__respond-form .foot .submit button").html("发送中..."),$.ajax({url:t,type:"POST",data:{author:r,mail:_,text:u,parent:n,url:i,num1:d,num2:f,sum:s,_:a},dataType:"text",success(o){let t=[],m="";t=$(o).contents(),Array.from(t).forEach(e=>{"container"===e.parentNode.className&&(m=e)}),/Joe/.test(o)?window.location.reload():(Qmsg.warning(m.textContent.trim()||""),e=!1,$(".joe_comment__respond-form .foot .submit button").html("发表评论"))},error(o){e=!1,$(".joe_comment__respond-form .foot .submit button").html("发表评论"),Qmsg.warning("发送失败!请刷新重试!")}}))})}

自定义css(可选)

  • 目的: 在输入框左侧增加竖形分割线,统一外观
  • 添加方式:Joe主题设置->全局设置->自定义CSS,粘贴下面的代码
/*验证码处css*/
@media (min-width: 768px){.joe_comment__respond-form .head .list:nth-child(4){position:relative}.joe_comment__respond-form .head .list:nth-child(4)::before{content:'';position:absolute;top:50%;transform:translateY(-50%);width:1px;height:15px;background:var(--classA)}.joe_comment__respond-form .head .list:nth-child(4)::before{left:0}}
本文共 449 个字数,平均阅读时长 ≈ 2分钟
2
四川省南充市

评论 (35)

取消
  1. 头像
    曈曈too
    四川省南充市 Windows 10 · Google Chrome
    沙发


    请问博主图上的功能是怎么实现的呢?表情

    回复 删除 垃圾
    1. 头像
      vian 作者
      河南省周口市 Windows 10 · Google Chrome
      @ 曈曈too

      在所述文件的特定位置添加以上代码

      回复 删除 垃圾
    2. 头像
      曈曈too
      四川省南充市 Windows 10 · Google Chrome
      @ 曈曈too

      求问

      回复 删除 垃圾
  2. 头像
    小胖哥
    江苏省南京市 Windows 10 · QQ Browser
    板凳

    不知道怎么回事 在本地测试了下 总是提示验证码不对

    回复 删除 垃圾
    1. 头像
      vian 作者
      广东省深圳市 Android · Google Chrome
      @ 小胖哥

      可能我复制的时候出了点问题 我建议你去原作者博客看一看

      回复 删除 垃圾
  3. 头像
    冰墩墩
    四川省南充市 Windows 10 · Google Chrome
    地毯

    哇,竟然还有backup站点!风格还这么不一样呢表情

    回复 删除 垃圾
    1. 头像
      vian 作者
      广东省深圳市 Windows 10 · Google Chrome
      @ 冰墩墩

      这个是我第一个typecho博客 一直留着 稍加完善表情

      回复 删除 垃圾
    2. 头像
      冰墩墩
      四川省南充市 Windows 10 · Google Chrome
      @ 冰墩墩

      寄,邮箱打快写错了一个数字,dbq表情

      回复 删除 垃圾
      1. 头像
        vian 作者
        广东省深圳市 Windows 10 · Google Chrome
        @ 冰墩墩

        问题不大 改一下就好了

        回复 删除 垃圾
  4. 头像
    小王先森
    贵州省铜仁市 Windows 10 · Google Chrome
    第4楼

    这个功能其实是JOE作者阉割下来的,之前更新时有,后面用了心的过滤机制,就把它阉割了。

    回复 删除 垃圾
    1. 头像
      vian 作者
      广东省深圳市 Android · Google Chrome
      @ 小王先森

      验证码功能吗 我觉得验证码还是有必要加上的表情

      回复 删除 垃圾
  5. 头像
    Gahotx
    浙江省杭州市 Windows 10 · Google Chrome
    第5楼

    博客针不戳表情

    回复 删除 垃圾
    1. 头像
      vian 作者
      广东省深圳市 Android · Google Chrome
      @ Gahotx

      直接起飞表情 这个表情我特别中意

      回复 删除 垃圾
  6. 头像
    vian 作者
    广东省深圳市 Android · Google Chrome
    第6楼

    欢迎来访vian,这是我的备用博客

    回复 删除 垃圾
  7. 头像
    vian 作者
    广东省深圳市 Windows 10 · Google Chrome
    第7楼

    测试评论地址

    回复 删除 垃圾
  8. 头像
    苏苏
    江苏省南京市 Windows 10 · Google Chrome
    第8楼

    测试验证码

    回复 删除 垃圾
    1. 头像
      vian 作者
      广东省深圳市 Windows 10 · Google Chrome
      @ 苏苏

      !!!成功了

      回复 删除 垃圾
  9. 头像
    小香猪
    江西省赣州市 Android · Google Chrome
    第9楼

    表情悄悄滴,打枪的不要

    回复 删除 垃圾
    1. 头像
      vian 作者
      广东省深圳市 Android · Google Chrome
      @ 小香猪

      验证码加上了表情

      回复 删除 垃圾
      1. 头像
        小香猪
        江西省赣州市 Android · Google Chrome
        @ vian

        画图

        回复 删除 垃圾
        1. 头像
          vian 作者
          广东省深圳市 Windows 10 · Google Chrome
          @ 小香猪

          改了评论地址显示 现在只显示到市级 你觉得显示到市级好还是省级好表情

          回复 删除 垃圾
          1. 头像
            小香猪
            江西省南昌市 Android · Google Chrome
            @ vian

            有的评论好像都不显示是为啥

            回复 删除 垃圾
            1. 头像
              vian 作者
              广东省深圳市 Windows 10 · Google Chrome
              @ 小香猪

              我发现不显示的是我手机回复的 我好像没挂梯子啊表情

              回复 删除 垃圾
              1. 头像
                小香猪
                江西省南昌市 Android · Google Chrome
                @ vian

                你看我刚才回复的两条评论,一条显示了,一条没显示

                回复 删除 垃圾
                1. 头像
                  vian 作者
                  广东省深圳市 Windows 10 · Google Chrome
                  @ 小香猪

                  就当是bug吧 刷新后也会只显示一部分表情

                  回复 删除 垃圾
          2. 头像
            小香猪
            江西省南昌市 Android · Google Chrome
            @ vian

            感觉显示到省级就行了表情

            回复 删除 垃圾
            1. 头像
              vian 作者
              广东省深圳市 Windows 10 · Google Chrome
              @ 小香猪

              那就省级表情

              回复 删除 垃圾
        2. 头像
          vian 作者
          广东省深圳市 Android · Google Chrome
          @ 小香猪

          好耶✌🏻

          回复 删除 垃圾
  10. 头像
    火喵
    辽宁省大连市 Windows 10 · Google Chrome
    第10楼

    啦啦啦

    回复 删除 垃圾
    1. 头像
      vian 作者
      广东省深圳市 Android · Google Chrome
      @ 火喵

      完美 已经解决那个问题了表情

      回复 删除 垃圾
    2. 头像
      vian 作者
      广东省深圳市 Android · Google Chrome
      @ 火喵

      还差一点 验证码我一定要加上表情

      回复 删除 垃圾
  11. 头像
    vian 作者
    广东省深圳市 Android · Google Chrome
    第11楼

    为什么访客提交失败呢表情

    回复 删除 垃圾
    1. 头像
      invite
      广东省深圳市 Windows 10 · Google Chrome
      @ vian

      有点难搞表情

      回复 删除 垃圾
  12. 头像
    vian 作者
    广东省深圳市 Android · Google Chrome
    第12楼

    起飞

    回复 删除 垃圾
    1. 头像
      访客测试
      德国 Windows 10 · Google Chrome
      @ vian

      访客测试

      回复 删除 垃圾