Valine-Customize魔改教程

本篇为我的修改思路，如果你想直接使用我修改过后的版本，可以直接将https://github.com/GamerNoTitle/Valine-Magic更新日志中的最新版js链接引入

在看本篇之前，请确保：

你有一定的代码基础
你能够看懂Python代码和JavaScript
你精通Valine的使用

Valine在2020/4/21更新了v1.4.5，支持了自定义表情包，故Valine-Magic将不再提供修改的js，改为提供Valine的表情列表

我们本篇要做的事情有两个

①加入自定义表情

②判断邮箱为QQ邮箱则显示QQ头像

③为修改UI文字提供思路

话不多说让我们开始吧

加入自定义表情

首先，我们需要获得valine的js文件，这里直接访问Valine的CDN获取https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js

Valine官方JS

打开后是一个页面，我们直接全选复制，粘贴到一个新的js文件中

温馨提示：因为js中的字符数稍微（手动着重）有点多，所以说如果没有较为强劲的电脑可能无法很快做到文本格式化

首先我们需要修改的是Valine的表情CDN，如果不修改的话，你的表情链接前面会自动加上https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal字段导致表情无法被读取

我们直接以//img.t.sinajs.cn作为关键词检索CDN，很快就得到了CDN的位置

CDN搜索

我们将这里的CDN的内容直接删掉，留空

接着我们搜索valine自带的表情标签，而第一个的表情标签是smile，我这里就直接搜索smile，这样可以直接定位到表情列表的头部

表情列表搜索

接下来，我们需要上传自己的表情，并且按照这个格式制作一个表情列表

我个人的做法是：将表情包上传到Github仓库，通过jsdelivr来使用；通过Python脚本遍历当前目录下的所有文件，自动生成表情列表

上传就不必说了，直接用Git上传即可

生成列表生成脚本我是自己弄了一小段

import os
path = 'D:\xxx\BQB'	# 路径已屏蔽QAQ
def findAllFile(base):
    for root, ds, fs in os.walk(base):
        for f in fs:
            yield f

def main():
    base = './'
    linklist=[]
    num=1
    for i in findAllFile(base):
        linklist.append('custom{}: "https://assets.bili33.top/img/BQB/{}",'.format(num,i))
        num=num+1
    print(str(linklist).replace(',\', \'',', '))
if __name__ == '__main__':
    main()

这里通过os.walk遍历当前目录下的文件，并且将获取到的文件名通过字符串拼接的方式拼在一起，然后存入列表linklist，接着打印的时候将固定的字符串格式,', '给删除掉（因为是list对象，所以打印出来的时候有固定格式），接着就会给我生成表情列表啦！

生成表情列表

接着将获取到的列表覆盖入Valine的表情列表，保存

在自己的网站引入Valine的CDN的时候引入自己的js文件即可

接着我们就会看到表情列表里面的自定义表情啦！

判断为QQ邮箱将头像设定为QQ头像

参考：https://blog.csdn.net/cungudafa/article/details/104638730

这里我们还是打开刚刚的js文件，直接搜索E.cdn+(0,s.default)(t.get("mail"))+E.params，会给我们定位到一个位置

搜索有关字段

我们找到下图中我鼠标所在的位置，回车换行

换行位置

换行以后，加入以下内容

var qq_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);//match 是匹配的意思
	if (result !== null) {
		qq_img = "//q1.qlogo.cn/g?b=qq&nk=" + prefix + "&s=100";
	}
}