前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >[Typecho小试牛刀]Joe主题增加验证码(非插件方式)

[Typecho小试牛刀]Joe主题增加验证码(非插件方式)

原创
作者头像
TDP-苏苏
修改于 2022-05-17 08:52:02
修改于 2022-05-17 08:52:02
1.2K00
代码可运行
举报
文章被收录于专栏:上云实践笔记上云实践笔记
运行总次数:0
代码可运行

刚刚接触Typecho,发现Joe主题不错,摸索了两天之后,发现Joe本身不支持评论验证码,就查阅资料,修改部分Joe主题文件,增加评论验证码。

当前版本

  • Typecho:1.2.0
  • Joe主题:7.3.6

目标

  • 非插件方式,简单实现评论验证码,防止机器人灌水。

涉及文件

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

  • 目的: 增加需要用到的函数
  • 增加如下3个函数
代码语言:php
AI代码解释
复制
#生成验证码
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['verify']=$ret;
    $_SESSION['verify_md5']=md5($num1.$num2);
    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($comment, $post, $result){
    if(md5($_SESSION['verify']) != md5($_POST['sum']) || $_SESSION['verify_md5'] != md5($_POST['num1'].$_POST['num2'])){
        throw new Typecho_Widget_Exception(_t('对不起: 验证码错误,请重试。','评论失败'), 200);
    }
    return $comment;
}
#判断路由用到
function endsWith($haystack, $needle){
    return $needle === '' || substr_compare($haystack, $needle, -strlen($needle)) === 0;
}

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

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

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

  • 目的: 增加验证码输入框
  • 搜索 输入网址 ,在它的下方增加一个兄弟节点,用来输入验证码
代码语言:php
AI代码解释
复制
...
<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文件,搜索激活评论提交,用下方代码替换,然后压缩后替换同文件夹的joe.global.min.js
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
       /* 激活评论提交 已修改 */
	{
		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('发送失败!请刷新重试!');
					}
				});
			});
		}
	}

自定义css(可选)

  • 目的: 在输入框左侧增加竖形分割线,统一外观
  • 添加方式:后台->Joe主题设置->全局设置->自定义CSS,增加如下样式
代码语言:css
AI代码解释
复制
/*验证码处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}}

最终效果

验证码位置
验证码位置

未输入验证码提示

未输入验证码提示
未输入验证码提示

验证码错误提示

验证码错误提示
验证码错误提示

笔者为TDP成员,点击了解TDP详情

原文链接:https://nongxue.top/p/daima/4.html

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
Plotly 初步
版权声明:本文为博主原创文章,未经授权禁止转载。 https://blog.csdn.net/u010099080/article/details/84197684
Alan Lee
2019/05/27
1.3K0
plotly可视化快速教程
Plotly是新一代的Python数据可视化开发库,它提供了完善的交互能力和灵活的绘制选项。本文将介绍新手如何安装plotly并编写第一个plotly绘图程序,以及使用plotly绘制常见的5种数据图表。
用户1408045
2019/10/10
2.9K0
plotly可视化快速教程
Plotly绘图,快速入门
Plotly是一个用于创建交互式图表的Python库,它支持多种图表类型,如折线图、散点图、饼图、热力图等。Plotly的特点如下:
皮大大
2024/06/29
3180
【愚公系列】2023年02月 Python工具集合-Plotly图表可视化
Plotly是一个开源的数据可视化库,可以帮助分析和可视化数据,从而更好地了解其中的趋势和模式。
愚公搬代码
2023/03/16
6140
【愚公系列】2023年02月 Python工具集合-Plotly图表可视化
使用 plotly 绘制数据图表
不少小伙伴在开发过程中都有对模块进行压测的经历,压测结束后大家往往喜欢使用Excel处理压测数据并绘制数据可视化视图,但这样不能很方便的使用web页面进行数据展示。本文将介绍使用python-plotly模块来进行压测数据的绘制,并且生成静态html页面方便结果展示。
邵靖
2018/01/15
3.8K0
使用 plotly 绘制数据图表
plotly~箱线图简单实例
https://www.tutorialspoint.com/plotly/plotly_box_violin_and_contour_plot.htm
用户7010445
2020/05/26
1.5K0
Plotly深入浅出
作为Python的新一代数据可视化绘图库,和matplotlib等传统绘图库相比,plotly具有以下优点:
lyhue1991
2022/05/16
2.6K0
Plotly深入浅出
plotly-express-23-绘制水平柱状图
Plotly-express-23-绘制水平柱状图 本文中介绍的是如何利用Plotly_express绘制水平方向的柱状图 单组水平柱状图 多组水平柱状图 单组水平柱状图 效果 代码 import p
皮大大
2021/03/18
9340
如何创建交互式数据可视化:使用Plotly进行数据科学与分析
在数据科学和数据分析领域,数据可视化是一种非常重要的技术。Plotly 是一个功能强大的 Python 可视化库,它可以帮助我们创建交互式的数据可视化图表。本文将介绍如何使用 Plotly 实现交互式数据可视化,包括数据准备、图表创建和交互功能的添加。
一键难忘
2024/07/08
2590
猫头虎 分享:Python库 Plotly 的简介、安装、用法详解入门教程
摘要 今天猫头虎 带大家一起深入探讨Python中Plotly库的世界。在人工智能和数据科学的工作中,数据可视化是不可或缺的一部分。Plotly凭借其强大的交互式图表功能,成为了众多开发者和数据科学家的不二选择。本文将从Plotly的简介、安装、基本用法等多方面详细介绍,帮助大家快速入门并掌握这款工具的使用。无论你是初学者还是有经验的开发者,本文都将为你提供深入的见解和实用的指导。 赶快阅读,丰富你的数据可视化技能吧!
猫头虎
2024/08/29
4570
利用Python的Plotly库创建交互式数据可视化
在数据科学和数据可视化领域,交互式图形可视化是一种强大的工具,能够帮助用户更好地理解数据并进行探索性分析。Python中有许多强大的工具和库可用于创建交互式图形,其中之一就是Plotly库。Plotly库提供了丰富的功能和灵活的接口,使得创建各种类型的交互式图形变得简单而直观。本文将介绍如何使用Plotly库来创建交互式图形,并提供一些代码实例来演示其强大的功能。
一键难忘
2024/07/08
1K0
(数据科学学习手札43)Plotly基础内容介绍
  Plotly是一个非常著名且强大的开源数据可视化框架,它通过构建基于浏览器显示的web形式的可交互图表来展示信息,可创建多达数十种精美的图表和地图,本文就将以jupyter notebook为开发工具,详细介绍Plotly的基础内容。
Feffery
2018/07/12
3.7K0
数据科学家赚多少?基于pandasql和plotly的薪资分析与可视化 ⛵
图片 本文揭秘全球数据科学岗位的薪资分布情况!以及分析岗位、国家、工作经验、雇佣形式、公司规模对薪资的影响,并贴心提供了求职建议和跳槽Tips! 💡 作者:韩信子@ShowMeAI 📘 数据分析实战系列:https://www.showmeai.tech/tutorials/40 📘 AI 岗位&攻略系列:https://www.showmeai.tech/tutorials/47 📘 本文地址:https://www.showmeai.tech/article-detail/402 📢 声明:版权所有,
ShowMeAI
2022/12/09
1.1K0
数据科学家赚多少?基于pandasql和plotly的薪资分析与可视化 ⛵
如何在 Python 中使用 plotly 创建人口金字塔?
在本文中,我们将探讨如何在 Python 中使用 Plotly 创建人口金字塔。Plotly是一个强大的可视化库,允许我们在Python中创建交互式和动态绘图。
很酷的站长
2023/08/11
5630
如何在 Python 中使用 plotly 创建人口金字塔?
用Python的Plotly画出炫酷的数据可视化(含各类图介绍)
在谈及数据可视化的时候,我们通常都会使用到matplotlylib,pyecharts这些可视化的手段。但是,今天我主要来介绍Plotly这款可视化的库。大家参考开源项目地址:
青南
2020/07/16
3.2K0
用Python的Plotly画出炫酷的数据可视化(含各类图介绍)
使用 4 种绘图库,绘制一类图
下面使用 4 种常见的绘图库绘制柱状图和折线图,使用尽可能最少的代码绘制,快速入门这些库是本文的写作目的。
double
2020/05/19
3530
深入了解 Plotly 高级技术,附实用代码示例
数据可视化是数据分析和探索中至关重要的一部分,能够帮助我们更深入地理解数据集中的潜在模式、趋势和关系。Plotly是一个功能强大、用途广泛的Python库,提供了多种工具用于创建交互式、视觉上引人入胜的图表。在本文中,我们将深入探索Plotly的世界,通过高级Python代码示例来探索其特性和功能。
数据STUDIO
2024/04/11
6180
深入了解 Plotly 高级技术,附实用代码示例
plotly-express-22-plotly使用技巧大全
本文中将前段时间写的plotly-express可视化库的相关技巧进行整理,方便后续快速实现调用
皮大大
2021/03/01
3K0
plotly-express-22-plotly使用技巧大全
Plotly,一个超强的Python可视化库!
数据可视化是数据分析和探索的一个重要方面,它有助于深入了解数据集中的潜在模式、趋势和关系。
小F
2023/12/21
5870
Plotly,一个超强的Python可视化库!
plotly-express-16-绘制技巧(一)
Plotly-express-16-绘制技巧(一) 本文中介绍的是利用Plotly绘图小技巧: 图片的保存:jupyter notebook下的保存和指定路径下的保存 柱状图的颜色改变(避免同样的颜色
皮大大
2021/03/01
1.2K0
plotly-express-16-绘制技巧(一)
推荐阅读
相关推荐
Plotly 初步
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档