Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题)

一、前言

WordPress-sakura版本中,Mashiro大佬是添加了QQ邮箱识别生成头像地址的功能的,但是hojun大佬移植时没有注意这个功能哦!

参考了其他版本评论系统对头像的处理方法:
Typecho实现QQ邮箱识别生成头像地址

  1. 获得两个接口,美滋滋:
    一个是QQ头像的,一个是Gravatar国内源,它们的调用方式如下。

    QQ头像 http://q1.qlogo.cn/g?b=qq&nk=QQ号&s=100
    Gravatar头像 http://cdn.v2ex.com/gravatar/md5加密后的邮箱?s=100
    

    以上就是两个头像接口的信息,值得注意的是Gravatar后面的s分辨率参数可以随意定义,而QQ不行,QQ只有几个有限的分辨率,比如100,200,640,其它的数字会报400错误,所以QQ的s参数更像是一种清晰度,宽高还是通过css定义比较好。

  2. 我的启示是:

    • 获取邮箱判断是否为qq邮箱
    • 提取qq号
    • 将valine中的头像地址改为上述接口地址

    此时,我觉得想法的实现流程非常缜密,感到可行,开心到飞起~ let me do it!

  3. F12查看源码–发现valine中显示头像的相关代码是:(关键标签:vimg
    Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题)_第1张图片
    再以我ctrl+F快速查找的本领(关键词:vimg),不负众望,在Valine.min.js中找到

    首先我们要知道:valine的头像处理接口是gravator
    Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题)_第2张图片

    拼接头像地址并显示的关键步骤:
    在这里插入图片描述

    ok,找到源头,替换src的内容即可。

    
    

    正式开干!

二、步骤

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,注意相对路径只有一个点
    Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题)_第3张图片

2.增加qq头像判别

注意你的valine是哪一个版本的
Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题)_第4张图片 Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题)_第5张图片

(1)valine1.3.10版

  • 打开Valine.min.js,ctrl+F快速查找关键词:

    m.cdn+a(e.get("mail"))+m.params
    

    定位到:
    在这里插入图片描述
    稍加换行如图所示:在这里插入图片描述

  1. 修改前:

    C=function(e,n,r){
    	var i=u.create("div",{class:"vcard",id:e.id}),o=m.hide?"":'+(m.cdn+a(e.get("mail"))+m.params)+'">',
    
  2. 修改后:其实关键代码就这一点点~ 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.com") >= 0){
    		var prefix = e.get("mail").replace(/@.*/, "");//前缀
    		var pattern=/^\d+$/g;  //正则表达式,数字
    		var result= prefix.match(pattern);//match 是匹配的意思
    		if(result!==null){
    			qq_img = "//q1.qlogo.cn/g?b=qq&nk="+ prefix +"&s=100";
    		}
    	}
    	var i=u.create("div",{class:"vcard",id:e.id}),o=m.hide?"":'+ (qq_img)+'">',
    

    Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题)_第6张图片

(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
    

    定位到:
    在这里插入图片描述
    稍加换行如图所示:(换行按分号换行)
    Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题)_第7张图片

  • 添加部分:(在前一个分号后)

    //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.com") >= 0) {
    	var prefix = t.get("mail").replace(/@.*/, "");//前缀
    	var pattern = /^\d+$/g;  //正则表达式
    	var result = prefix.match(pattern);//match 是匹配的意思
    	if (result !== null) {
    		qq_img = "//q1.qlogo.cn/g?b=qq&nk=" + prefix + "&s=100";
    	}
    }
    

    Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题)_第8张图片

三、 效果

流程:
1. 默认还是gravator头像接口
2. 判断是否是qq邮箱,提取前缀prefix
3. qq头像接口是qq号,如正则筛选剔除–重命名了带英文的qq邮箱
4. 拼接头像地址
5. 加入src显示!

哈哈哈,如果有其他邮箱头像接口,都可以同理加上哦!
Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题)_第9张图片
都说博客的 评论模块消息通知模块 是最难的,为了花式DIY评论区,效果自己也比较满意吧。

Valine部分:

  1. Valine - 一款快速、简洁且高效的无后端评论系统

  2. Valine - 自定义邮件回复提示

  3. Valine-实现QQ邮箱识别生成头像地址(完美解决头像问题)

你可能感兴趣的:(#,Sakura,#,JavaScript)