魔改 Valine,添加自定义表情与 QQ 邮箱头像支持
v1.4.5 版本后所述功能均已实现,此文章仅为存档参考
且个人推荐使用功能更加丰富的 Cravatar
# 添加 QQ 邮箱头像支持
# 索引
由于 v1.4.x
版本尚未开源,以下步骤均为修改已编译的 Valine.min.js
进行操作
由于某些原因,src 目录将从 v1.4.0 后暂停更新.
For some reason, the src directory will be suspended from updating after v1.4.0.
通过浏览器 F12 查看代码,定位头像后发现相关代码为 <img class="vimg" src="xxx">
以本文 v1.4.4
最新版本为例,下载 Valine.min.js 后
Ctrl + F 搜索 img class="vimg" src=
,得到的代码片段为
可以看到,img src 后的内容大致为 Gravatar CDN 地址 + 获取邮箱并 MD5 加密 + 返回 Valine 版本
// <img src=> | |
u = E.hide ? "" : '<img class="vimg" src="' + (E.cdn + (0, s.default)(t.get("mail")) + E.params) + '">' | |
// CDN 引用部分 | |
E = { | |
cdn: "https://gravatar.loli.net/avatar/", | |
ds: ["mp", "identicon", "monsterid", "wavatar", "robohash", "retro", ""], | |
params: "", | |
hide: !1 | |
} |
QQ 头像的接口为 http://q1.qlogo.cn/g?b=qq&nk=QQ号&s=尺寸
s=(spec) 对应的头像尺寸有 px 40×40, px 100×100
px 640×640
测试发现数值 1-5/40/640 为 px 40×40,数值 100 为 px 100×100
所以最终的接口大致为 http://q1.qlogo.cn/g?b=qq&nk=10001&s=100
# 最终目标
- 获取邮箱判断是否为 qq 邮箱
- 提取 qq 号
- 将 Valine 中的头像地址改为上述接口地址
# 流程
- 判断是否是 QQ 邮箱,,是则以下操作,否则默认 Gravator 头像接口
- 正则筛选剔除–重命名了带英文的 qq 邮箱 获取 QQ 号
- 拼接头像地址
- 加入到 img src
# 修改 Valine js
部分代码修改如下
var avatar_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); | |
if (result !== null) { | |
avatar_img = "//q1.qlogo.cn/g?b=qq&nk=" + prefix + "&s=100"; | |
} | |
} | |
var l = t.get("link") ? /^https?\:\/\//.test(t.get("link")) ? t.get("link") : "http://" + t.get("link") : "", | |
c = l ? '<a class="vnick" rel="nofollow" href="' + l + '" target="_blank" >' + t.get("nick") + "</a>" : '<span class="vnick">' + t.get("nick") + "</span>", | |
u = E.hide ? "" : '<img class="vimg" src="' + (avatar_img) + '">', |
修改前后 diff
var j = function (t, n, r) { | |
var o = (0, A.default)('<div class="vcard" id="' + t.id + '"></div>'), | |
i = t.get("ua"), | |
a = ""; | |
i && !/ja/.test(e.config.lang) && (i = A.default.detect(i), a = '<span class="vsys">' + i.browser + " " + i.version + '</span> <span class="vsys">' + i.os + " " + i.osVersion + "</span>"), "*" === e.config.path && (a = '<a href="' + t.get("url") + '" class="vsys">' + t.get("url") + "</a>"); | |
var l = t.get("link") ? /^https?\:\/\//.test(t.get("link")) ? t.get("link") : "http://" + t.get("link") : "", | |
+ var avatar_img = E.cdn + (0, s.default)(t.get("mail")) + E.params; //默认Gravator头像接口 | |
+ if (t.get("mail").indexOf("@qq.com") >= 0) { | |
+ var prefix = t.get("mail").replace(/@.*/, ""); //前缀 | |
+ var pattern = /^\d+$/g; //正则表达式 | |
+ var result = prefix.match(pattern); | |
+ if (result !== null) { | |
+ avatar_img = "//q1.qlogo.cn/g?b=qq&nk=" + prefix + "&s=100"; | |
+ } | |
+ } | |
c = l ? '<a class="vnick" rel="nofollow" href="' + l + '" target="_blank" >' + t.get("nick") + "</a>" : '<span class="vnick">' + t.get("nick") + "</span>", | |
- u = E.hide ? "" : '<img class="vimg" src="' + (E.cdn + (0, s.default)(t.get("mail")) + E.params) + '">', | |
+ u = E.hide ? "" : '<img class="vimg" src="' + (avatar_img) + '">', | |
d = u + '<div class="vh"><div class="vhead">' + c + " " + a + '</div><div class="vmeta"><span class="vtime" >' + (0, w.default)(t.get("insertedAt"), e.i18n) + '</span><span class="vat" data-root-id="' + (t.get("rid") || t.id) + '" data-self-id="' + t.id + '">' + e.i18n.t("reply") + '</span></div><div class="vcontent" data-expand="' + e.i18n.t("expand") + '">' + (0, k.default)(t.get("comment")) + '</div><div class="vreply-wrapper" data-self-id="' + t.id + '"></div><div class="vquote" data-self-id="' + t.id + '"></div></div>'; | |
o.html(d); |
然后主题引用自己修改后的 Valine.min.js,即可开箱食用。
icarus 主题引用方法
# 添加自定义表情
# 修改 src
编译前修改 plugins/emojis/light.json
v1.4.x 版本不适用
# 配置项添加
配置项中添加
emoticon_url: '/demo/demo', | |
emoticon_list: ["xxx.jpg"] |
如
emoticon_url: 'https://cloud.panjunwen.com/alu', | |
emoticon_list: ["狂汗.png","不说话.png","汗.png"] |
反正我是没成功过.jpg
# 直接修改 Valine js 文件
故技重施
在 Valine.min.js 搜索定位到表情地址
然后照葫芦画瓢修改即可。
格式大致如下
function (e, t) { | |
e.exports = { | |
滑稽: "https://cdn.jsdelivr.net/gh/wittoy/cdn@latest/images/valine/huaji.gif", | |
彩虹滑稽: "https://cdn.jsdelivr.net/gh/Wittoy/cdn@latest/images/valine/chhuaji.webp", | |
doge: "https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a1/2018new_doge02_org.png", | |
dog: "https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/22/2018new_erha_org.png", | |
高兴: "https://cdn.jsdelivr.net/gh/Wittoy/cdn@latest/images/valine/高兴.png", | |
尴尬: "https://cdn.jsdelivr.net/gh/Wittoy/cdn@latest/images/valine/尴尬.png" | |
} |
须注意的是,为了方便操作,最新版本格式上是 CDN 前缀 + 图片文件名的形式,你可以 Ctrl + F 搜索 t.DEFAULT_EMOJI_CDN
修改 CDN 地址或留空即可。这里我采用的即为留空方案。
顺便提供下我自己修改后的 Valine.min.js ,以及 表情资源
# icarus 主题引用
Icarus 引用方法:下载 valine.jsx 到 hexo-theme-icarus/layout/comment 后,修改内容如下
- const { cacheComponent } = require('../../util/cache'); | |
+ const { cacheComponent } = require('hexo-component-inferno/lib/util/cache'); | |
- jsUrl: helper.cdn('valine', '1.4.4', 'dist/Valine.min.js') | |
+ jsUrl: helper.url_for('js/Valine.min.js') |
然后把修改后的 Valine.min.js 丢至 hexo-theme-icarus/source/js
以上内容转载并修改自
- Uncle_drew
- 喵窝・札记