最近每次进博客后台都有几百条垃圾评论，实在是烦心。于是决定给评论加一个验证码系统。

下载

验证码插件有很多，经过比较，最终选择了FancyCaptcha。
![637265570[1].png](/usr/uploads/2020/06/2161963374.png)

从这里下载：下载页面

安装

  • 解压缩得到FancyCaptcha文件夹。
  • 把整个FancyCaptcha文件夹上传到Typecho的usr/plugins目录下。
  • 进入后台管理，启用插件。
  • 找到你当前使用主题文件夹下的comments.php，比如默认主题就是/usr/default/comments.php。我使用的主题是handsome，这个文件在/usr/handsome/component/ 下。
  • 找到提交评论按钮的上放加入下面这代码。（1,2行）
                        <!--验证码 add by cl-->
                        <p><?php FancyCaptcha_Plugin::output(); ?> </p>

                        <!--提交按钮-->
                        <div class="form-group">
                            <button type="submit" name="submit" id="submit" class="submit btn btn-success padder-lg">
                                <span><?php _me("发表评论") ?></span>
                                <span class="text-active"><?php _me("提交中") ?>...</span>
                            </button>
                            <i class="animate-spin fontello fontello-spinner hide" id="spin"></i>
                            <input type="hidden" name="comment_post_ID" id="comment_post_ID">
                            <input type="hidden" name="comment_parent" id="comment_parent">
                        </div>
  • 安装完毕。

配置

没什么好说的，在后台可以微调一些设置。不过用默认设置就可以。

踩坑

如果你不像我，没有安装其他乱七八糟的主题或者插件很可能到这里就已经可以使用了。但是此时我的页面上本来应该出现验证码的区域只看到一句：

You must enable javascript to see captcha here!

WTF?!
怎么可能没有启用JavaScript！试了很多方法都不奏效很崩溃。

发现问题

中间的曲折就不说了，简单来说原因是我用的主题在header的最后引用了一个高版本的jquery，而这个插件也在header里引用了一个jquery，也就是同时引用了两个jquery。这导致了jquery出现莫名其妙的问题。

尝试1，删除验证码插件的jqurey引用

文件：/usr/plugins/FancyCaptcha/Plugin.php

// 加载Jquery
//$header .=  '<script type="text/javascript" src="'.$plugin_url.'/jquery-1.5.1.min.js"></script>'."\n";

不行。症状依旧。用alert等试了一下jquery的基本命令，发现jquery代码没有正常动作。查看生成的html页面源代码发现，插件需要运行的js代码段比主题引入jquery更靠前，也就是还没有引入jquery的时候就尝试使用jquery了，当然没有反应。看来要么需要调整插件和主题在header中生成代码的顺序，要么只能保留插件引入的jquery了。前者调查起来估计更花时间，就选后者吧。

尝试2，恢复上面插件的文件，删除主题的jqurey引用

文件：/usr/handsome/component/header.php

<!--全站jquery-->
<!-- <script src="<?php echo PUBLIC_CDN_PREFIX.$PUBLIC_CDN_ARRAY['js']['jquery'] ?>"></script> -->

验证码区域成功显示出来了！哎，等等，验证码的动作倒是正常，可写了评论提交提示成功但刷新页面后刚刚的评论并没有出现。查看后台的评论管理也没有。说明评论失败了。这次仔细查看了插件引入的jquery版本是1.5，而主题本来引入的是2.2的高版本，应该是该主题使用了高版本的jquery命令，低版本的不支持。这好办，改一下插件引用的jquery版本呗。

继续尝试3，把插件引入的jquery版本改为2.2

文件：/usr/plugins/FancyCaptcha/Plugin.php

// 加载Jquery
//$header .=  '<script type="text/javascript" src="'.$plugin_url.'/jquery-1.5.1.min.js"></script>'."\n";
$header .=  '<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>'."\n";

不行！本来能拖动的小图标，这次拖不动了，为啥？
又一通找，发现插件还引用了一个第三方js库jquery-ui-1.8.10,我十分怀疑又是改了jquery版本导致的不兼容问题。于是上jquery-ui官网，果然，高版本的jquery2.2对应的应该是最新的ui版本。
FireShot Capture 003 - jQuery UI - jqueryui.com.png

最后的尝试

下载jQuery1.12.1，解压后将文件jquery-ui-1.12.1.min.js上传到插件目录，然后修改文件/usr/plugins/FancyCaptcha/Plugin.php

// 加载JqueryUI
//$header .=  '<script type="text/javascript" src="'.$plugin_url.'/jquery-ui-1.8.10.custom.min.js"></script>'."\n";
$header .=  '<script type="text/javascript" src="'.$plugin_url.'/jquery-ui-1.12.1.min.js"></script>'."\n";

成功！

总结

前端各种库的版本相互兼容很成问题。在你调试不出来问题的时候往版本兼容性上想一想，有可能找到真正的问题所在。

补记

本文推荐的这个插件，后来发现只能在电脑端使用，在手机端的话是不能进行拖拽的，所以还是放弃了。最后换了一个Captcha插件，也就是现在使用中的这个。

版权属于：芒果爱吃胡萝卜

本文链接：http://blog.mangolovecarrot.net/2020/06/22/119

转载时须注明出处及本声明

Last modification：June 23rd, 2020 at 10:34 pm
© 允许规范转载