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

Author:

火喵酱

©

Wordage:

共计 3118 字

needs:

约 2 分钟

Popular:

160 ℃

Created:

温馨提示:

本文最后更新于2022年08月18日,已经过了44天没有更新,若内容或图片失效,请留言反馈
目 录

无意中发现的小方法,超级棒,解决了火喵多年苦于有的人没头像的困境,开心~ 分享给大家!

前言

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

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

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

以上就是两个头像接口的信息,值得注意的是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中找到

  1. 首先我们要知道:valine的头像处理接口是gravator

  1. 拼接头像地址并显示的关键步骤:

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

<img class="vimg" src="'+(m.cdn+a(e.get("mail"))+m.params)+'">

正式开干!

示例

修改valine.min.js

下载Valine.min.js到本地themes\sakura\source\js\Valine.min.js
修改引入本地的Valine

我的引入位置在:themes\sakura\layout\_partial\comment.ejs
如果你是在footer.ejs,注意相对路径只有一个点

打开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.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显示!

效果

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

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

- - - The END - - -
共计 0 条评论,点此发表评论
萌ICP备20210005号 辽ICP备2021005644号-1 辽公网安备 21021102000984号 本站已运行 2 年 205 天 17 小时 55 分 51统计 百度统计 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2020 ~ 2022. 火喵博客・日记本 All rights reserved.
历史足迹
分类目录
  • 日常
  • 晒物
  • 🦙 代码
  • 🏗️ 建站
  • 📷 生活