Valine自定义表情与QQ邮箱头像支持

 WebSite
 8 分钟 读完 (大约 1213 个字)  次访问

魔改Valine，添加自定义表情与QQ邮箱头像支持

添加QQ邮箱头像支持

索引

v1.4.5版本后所述功能均已实现，此文章仅为存档参考
由于 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版本

Valine.min.js
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

部分代码修改如下

Valine.min.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

Valine.min.js
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/[email protected]/images/valine/huaji.gif",
            彩虹滑稽: "https://cdn.jsdelivr.net/gh/Wittoy/[email protected]/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/[email protected]/images/valine/高兴.png",
            尴尬: "https://cdn.jsdelivr.net/gh/Wittoy/[email protected]/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

以上内容转载并修改自

评论

 Index

标签

404 page1
AdSense1
AdoptOpenJDK1
AllinSSL1
Android3
Avicii1
Brevent1
CI1
CloudFlare2
CloudFlare Spectrum1
Coding2
Debian2
Debian 102
GitHub1
Hexo2
Icarus1
JDK1
JRE1
Kernel1
LEMP1
LNMP1
Linux1
Magisk1
Nodejs1
OTG1
OpenJDK1
SSL1
TCShare1
Typecho1
Ubuntu1
Valine1
Ward1
ZEIT2
ctyun1
emoji1
iptables1
npm1
nvm1
qqmail1
rc.local1
ssh2
tools1
vercel1
图床1
托管1
网盘1
静态1

链接

最新文章

分类

×