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

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. 打開Valine.min.js，ctrl+F快速查找關鍵詞：

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

   定位到：
   
   稍加換行如圖所示：

3. 修改前：

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

   
   流程：

   1. 默認還是gravator頭像接口
   2. 判斷是否是qq郵箱，提取前綴prefix
   3. qq頭像接口是qq號，如正則篩選剔除–重命名了帶英文的qq郵箱
   4. 拼接頭像地址
   5. 加入src顯示！

2. 效果

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

都說博客的 評論模塊 和 消息通知模塊 是最難的，爲了花式DIY評論區，效果自己也比較滿意吧。

Valine部分：

1. Valine - 一款快速、簡潔且高效的無後端評論系統

2. Valine - 自定義郵件回覆提示

3. Valine-實現QQ郵箱識別生成頭像地址（完美解決頭像問題）