博客进阶——自定义valine评论表情

本文最后更新时间:2021年11月14日 晚上

写在前面

  • 这一阵搜索学习博客美化,发现了自定义 valine 表情的方法。本来就不太习惯自带的微博表情,在简单的翻阅官方文档和他人博客后,成功替换成了 B站小电视表情。

  • 因为B站表情能够满足我的使用需求,所以这里只讲解替换为B站表情的方法。更多具体自定义可以参考相关链接。

  • 相关连接:

更新 valine 版本

自定义表情要求 valine 版本是 v1.4.5 以上。因为我的主题本来就是 1.4.14,所以这里不讲解如何更新 valine。各位如果有需求可以查看这篇文章中的更新教程:Valine添加自定义表情——作者:uncleacc

自定义 valine 表情

找到 valine 配置文件

首先要找到关于valine评论的配置文件,一开始我只找到一个ejs,后来翻阅了 valine 的官方文档:

valine 官方文档

对比emojiCDNemojiMaps,我发现直接在主题配置文件里就有:

我的主题 config 里的相关设置

也有些主题可能是单独的valine.json或者其他的文件,详细可以查看Valine添加自定义表情——作者:uncleaccValine表情仓库——作者:GamerNoTitle中的介绍。

添加 CDN

如上图,将emojiCDN添加为 Valine表情仓库中提供的CDN,选择一个即可,这里我选择的是第二个:

CDN

为方便,图片中的CDN链接已经复制在这里:

1
2
3
4
https://valinecdn.bili33.top/
https://cdn.jsdelivr.net/gh/GamerNoTitle/ValineCDN@master/
https://mirrorcdn.bili33.top/
https://gamernotitle.coding.net/p/ValineCDN/d/ValineCDN/git/raw/master/

添加 emojiMaps

Valine表情仓库提供了众多种类的表情:

图片是缩放后截的,所以看不清

我们只需要选择想要的表情,点击他提供的连接进入该表情项目的readme.md,找到需要的emojiMaps

readme.md

同样,这里提供一下我采用的热词系列和小电视的emojiMaps

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
{
"bilibilitv2": "bilibilitv/[tv_doge].png",
"bilibilitv3": "bilibilitv/[tv_亲亲].png",
"bilibilitv4": "bilibilitv/[tv_偷笑].png",
"bilibilitv5": "bilibilitv/[tv_再见].png",
"bilibilitv6": "bilibilitv/[tv_冷漠].png",
"bilibilitv7": "bilibilitv/[tv_发怒].png",
"bilibilitv8": "bilibilitv/[tv_发财].png",
"bilibilitv9": "bilibilitv/[tv_可爱].png",
"bilibilitv10": "bilibilitv/[tv_吐血].png",
"bilibilitv11": "bilibilitv/[tv_呆].png",
"bilibilitv12": "bilibilitv/[tv_呕吐].png",
"bilibilitv13": "bilibilitv/[tv_困].png",
"bilibilitv14": "bilibilitv/[tv_坏笑].png",
"bilibilitv15": "bilibilitv/[tv_大佬].png",
"bilibilitv16": "bilibilitv/[tv_大哭].png",
"bilibilitv17": "bilibilitv/[tv_委屈].png",
"bilibilitv18": "bilibilitv/[tv_害羞].png",
"bilibilitv19": "bilibilitv/[tv_尴尬].png",
"bilibilitv20": "bilibilitv/[tv_微笑].png",
"bilibilitv21": "bilibilitv/[tv_思考].png",
"bilibilitv22": "bilibilitv/[tv_惊吓].png",
"bilibilitv23": "bilibilitv/[tv_打脸].png",
"bilibilitv24": "bilibilitv/[tv_抓狂].png",
"bilibilitv25": "bilibilitv/[tv_抠鼻].png",
"bilibilitv26": "bilibilitv/[tv_斜眼笑].png",
"bilibilitv27": "bilibilitv/[tv_无奈].png",
"bilibilitv28": "bilibilitv/[tv_晕].png",
"bilibilitv29": "bilibilitv/[tv_流汗].png",
"bilibilitv30": "bilibilitv/[tv_流泪].png",
"bilibilitv31": "bilibilitv/[tv_流鼻血].png",
"bilibilitv32": "bilibilitv/[tv_点赞].png",
"bilibilitv33": "bilibilitv/[tv_生气].png",
"bilibilitv34": "bilibilitv/[tv_生病].png",
"bilibilitv35": "bilibilitv/[tv_疑问].png",
"bilibilitv36": "bilibilitv/[tv_白眼].png",
"bilibilitv37": "bilibilitv/[tv_皱眉].png",
"bilibilitv38": "bilibilitv/[tv_目瞪口呆].png",
"bilibilitv39": "bilibilitv/[tv_睡着].png",
"bilibilitv40": "bilibilitv/[tv_笑哭].png",
"bilibilitv41": "bilibilitv/[tv_腼腆].png",
"bilibilitv42": "bilibilitv/[tv_色].png",
"bilibilitv43": "bilibilitv/[tv_调侃].png",
"bilibilitv44": "bilibilitv/[tv_调皮].png",
"bilibilitv45": "bilibilitv/[tv_鄙视].png",
"bilibilitv46": "bilibilitv/[tv_闭嘴].png",
"bilibilitv47": "bilibilitv/[tv_难过].png",
"bilibilitv48": "bilibilitv/[tv_馋].png",
"bilibilitv49": "bilibilitv/[tv_鬼脸].png",
"bilibilitv50": "bilibilitv/[tv_黑人问号].png",
"bilibilitv51": "bilibilitv/[tv_鼓掌].png",
"bilibiliHotKey1": "bilibiliHotKey/1.jpg",
"bilibiliHotKey2": "bilibiliHotKey/10.jpg",
"bilibiliHotKey3": "bilibiliHotKey/11.jpg",
"bilibiliHotKey4": "bilibiliHotKey/12.jpg",
"bilibiliHotKey5": "bilibiliHotKey/13.jpg",
"bilibiliHotKey6": "bilibiliHotKey/14.jpg",
"bilibiliHotKey7": "bilibiliHotKey/15.jpg",
"bilibiliHotKey8": "bilibiliHotKey/16.jpg",
"bilibiliHotKey9": "bilibiliHotKey/17.jpg",
"bilibiliHotKey10": "bilibiliHotKey/18.jpg",
"bilibiliHotKey11": "bilibiliHotKey/19.jpg",
"bilibiliHotKey12": "bilibiliHotKey/2.jpg",
"bilibiliHotKey13": "bilibiliHotKey/20.jpg",
"bilibiliHotKey14": "bilibiliHotKey/21.jpg",
"bilibiliHotKey15": "bilibiliHotKey/22.jpg",
"bilibiliHotKey16": "bilibiliHotKey/23.jpg",
"bilibiliHotKey17": "bilibiliHotKey/24.jpg",
"bilibiliHotKey18": "bilibiliHotKey/25.jpg",
"bilibiliHotKey19": "bilibiliHotKey/26.jpg",
"bilibiliHotKey20": "bilibiliHotKey/27.jpg",
"bilibiliHotKey21": "bilibiliHotKey/28.jpg",
"bilibiliHotKey22": "bilibiliHotKey/29.jpg",
"bilibiliHotKey23": "bilibiliHotKey/3.jpg",
"bilibiliHotKey24": "bilibiliHotKey/30.jpg",
"bilibiliHotKey25": "bilibiliHotKey/31.jpg",
"bilibiliHotKey26": "bilibiliHotKey/32.jpg",
"bilibiliHotKey27": "bilibiliHotKey/4.jpg",
"bilibiliHotKey28": "bilibiliHotKey/5.jpg",
"bilibiliHotKey29": "bilibiliHotKey/6.jpg",
"bilibiliHotKey30": "bilibiliHotKey/7.jpg",
"bilibiliHotKey31": "bilibiliHotKey/8.jpg",
"bilibiliHotKey32": "bilibiliHotKey/9.jpg"
}

之后就可以看到,valine中默认的表情已经被替换为了你选择的表情。

结语

hexo 博客的美化教程很多很多,有很多时候还需要自己动手调整。这里也感谢myxrcrs帮我解决了我博客中的代码块美化的css文件调整。如果你感兴趣,也可以上网查阅资料研究学习,并运用到自己的博客中。

快来我的评论区发个B站表情感受一下!


本文作者:Zhao Guihang/KHLFYY

版权声明:本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!