v1.4.5版本后所述功能均已实现，此文章仅为存档参考
且个人推荐使用功能更加丰富的Cravatar.cn

添加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版本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// <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

部分代码修改如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
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版本不适用

配置项添加

配置项中添加

1
2
emoticon_url: '/demo/demo',
emoticon_list: ["xxx.jpg"]

如

1
2
emoticon_url: 'https://cloud.panjunwen.com/alu',
emoticon_list: ["狂汗.png","不说话.png","汗.png"]

反正我是没成功过.jpg

直接修改Valine js文件

~~故技重施~~

在Valine.min.js搜索定位到表情地址大概在这（反正不搜索能翻半天）然后照葫芦画瓢修改即可。格式大致如下

1
2
3
4
5
6
7
8
9
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后，修改内容如下

1
2
3
4
5
- 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

以上内容转载并修改自

添加QQ邮箱头像支持#

索引#

最终目标#

流程#

修改Valine js#

添加自定义表情#

修改src#

配置项添加#

直接修改Valine js文件#

icarus主题引用#