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）
   
   再以我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
  

  定位到：
  
  稍加换行如图所示：

1. 修改前：

   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)+'">',
   

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?"":'<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.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";
  	}
  }
  

  

三、 效果

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

哈哈哈，如果有其他邮箱头像接口，都可以同理加上哦！

都说博客的 评论模块 和 消息通知模块 是最难的，为了花式DIY评论区，效果自己也比较满意吧。

Valine部分：

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

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

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