admin管理员组文章数量:1646324
一、前言
WordPress-sakura版本中,Mashiro大佬是添加了QQ邮箱识别生成头像地址的功能的,但是hojun大佬移植时没有注意这个功能哦!
参考了其他版本评论系统对头像的处理方法:
Typecho实现QQ邮箱识别生成头像地址
-
获得两个接口🉑,美滋滋:
一个是QQ头像的,一个是Gravatar国内源,它们的调用方式如下。QQ头像 http://q1.qlogo/g?b=qq&nk=QQ号&s=100 Gravatar头像 http://cdn.v2ex/gravatar/md5加密后的邮箱?s=100
以上就是两个头像接口的信息,值得注意的是Gravatar后面的s分辨率参数可以随意定义,而QQ不行,QQ只有几个有限的分辨率,比如100,200,640,其它的数字会报400错误,所以QQ的s参数更像是一种清晰度,宽高还是通过css定义比较好。
-
我的启示是:
- 获取邮箱判断是否为qq邮箱
- 提取qq号
- 将valine中的头像地址改为上述接口地址
此时,我觉得想法的实现流程非常缜密,感到可行,开心到飞起~ let me do it!
-
F12查看源码–发现valine中显示头像的相关代码是:(关键标签:
vimg
)
再以我ctrl+F
快速查找的本领(关键词:vimg
),不负众望,在Valine.min.js中找到首先我们要知道:valine的头像处理接口是gravator
拼接头像地址并显示的关键步骤:
ok,找到源头,替换src的内容即可。
<img class="vimg" src="'+(m.cdn+a(e.get("mail"))+m.params)+'">
正式开干!
二、步骤
1. 下载
- Valine.min.js到本地
themes\sakura\source\js\Valine.min.js
修改引入本地的Valine
我的引入位置在:<script src="../js/Valine.min.js"></script>
themes\sakura\layout\_partial\comment.ejs
如果你是在footer.ejs,注意相对路径只有一个点<script src="./js/Valine.min.js"></script>
2.增加qq头像判别
注意你的valine是哪一个版本的
(1)valine1.3.10版
-
打开Valine.min.js,
ctrl+F
快速查找关键词:m.cdn+a(e.get("mail"))+m.params
定位到:
稍加换行如图所示:
-
修改前:
C=function(e,n,r){ var i=u.create("div",{class:"vcard",id:e.id}),o=m.hide?"":'<img class="vimg" src="'+(m.cdn+a(e.get("mail"))+m.params)+'">',
-
修改后:
其实关键代码就这一点点~ QAQ
var C=function(e,n,r){ var qq_img=m.cdn+a(e.get("mail"))+m.params;//默认gravator头像接口 if(e.get("mail").indexOf("@qq") >= 0){ var prefix = e.get("mail").replace(/@.*/, "");//前缀 var pattern=/^\d+$/g; //正则表达式,数字 var result= prefix.match(pattern);//match 是匹配的意思 if(result!==null){ qq_img = "//q1.qlogo/g?b=qq&nk="+ prefix +"&s=100"; } } var i=u.create("div",{class:"vcard",id:e.id}),o=m.hide?"":'<img class="vimg" src="'+ (qq_img)+'">',
(2)valine1.4.4 版 —— 4.15日更新
valine发布了1.4.4版本(废弃了leancloud消息提示和评论时计算题验证,修改了表情)
-
打开Valine.min.js,
ctrl+F
快速查找关键词:(valine1.4.4版)E.cdn+(0,s.default)(t.get("mail"))+E.params
定位到:
稍加换行如图所示:(换行按分号换行)
-
添加部分:(在前一个分号后)
//var qq_img = m.cdn + a(e.get("mail")) + m.params; var qq_img = E.cdn+(0,s.default)(t.get("mail"))+E.params; if (t.get("mail").indexOf("@qq") >= 0) { var prefix = t.get("mail").replace(/@.*/, "");//前缀 var pattern = /^\d+$/g; //正则表达式 var result = prefix.match(pattern);//match 是匹配的意思 if (result !== null) { qq_img = "//q1.qlogo/g?b=qq&nk=" + prefix + "&s=100"; } }
三、 效果
流程:
1. 默认还是gravator头像接口
2. 判断是否是qq邮箱,提取前缀prefix
3. qq头像接口是qq号,如正则筛选剔除–重命名了带英文的qq邮箱
4. 拼接头像地址
5. 加入src显示!
哈哈哈,如果有其他邮箱头像接口,都可以同理加上哦!
都说博客的 评论模块 和 消息通知模块 是最难的,为了花式DIY评论区,效果自己也比较满意吧。
Valine部分:
-
Valine - 一款快速、简洁且高效的无后端评论系统
-
Valine - 自定义邮件回复提示
-
Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题)
版权声明:本文标题:Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729445093a1201341.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论