Waline｜添加自定义表情

参考 Hugo | 为 Blog 增加评论区一文为此地添加了Waline评论区，虽然 Waline 有提供一系列的表情预设，但总感觉少了点什么。而后翻阅 Waline 的文档，发现是可以自定义的，这真是太好了，于是根据上文中提到的Blobcat 表情包的相关链接以及长毛象上看到的其他 blob 表情为 Waline 增加了 blob 系列表情。

可以拉到本文最下面评论区看示例。

可用链接

下面是设置好的 Blob 表情包链接，可以直接食用。

食用方法：在config.yaml 中 Waline 下对应emoji条目添加需要的表情包链接。

Blobcat

https://cdn.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs

Blob-gif

https://cdn.jsdelivr.net/gh/norevi/blob-emoji-for-waline@2.0/blobs-gif

Blob-png

https://cdn.jsdelivr.net/gh/norevi/blob-emoji-for-waline@2.0/blobs-png

如何自定义

总的来说分为 4 步：

准备素材
创建索引
上传云端
引用

参考：Waline-自定义表情-创建自己的预设

1. 准备表情包

首先，我们需要准备一些表情包，并按格式放到不同的文件夹中，比如一个文件夹放 png，一个放 gif。好像也可以不分格式，但我还没有试过这种方法。

注意事项：

文件夹中只能放图片和之后会创建的info.json文件
图片不能重名

我所采用的 blob 表情包来源于 Github，具体步骤是这样的：

fork 一下相应的repo
clone 到本地文件夹
删除表情包文件夹/blobs中无关的文件（如 CNAME、config 等），只保留图片
按格式分成 /blob-png、 /blog-gif。

2.1 创建 info.json

在表情包文件夹中创建info.json文件，写入以下内容

{
  "name": "Emoji名字",
  "prefix": "Emoji图片名称的通用前缀",
  "type": "图片格式",
  "icon": "表情栏icon",
  "items": ["表情1的名字", "表情2的名字"]
}

name: Emoji 名字我不知道这个用在哪里，不过应该要有？
prefix(可选的)：Emoji 图片名称的通用前缀。当你设置了多个 Emoji 选项卡时，我们推荐你为同一个选项卡内的所有表情图片添加一个共用前缀，以防与其他 Emoji 缩写相冲突
type(可选的)：图片的类型，会用作图片的后缀名。表情包应该是一套相同大小相同文件格式的图片。如果你的确需要使用不同类型的图片，请将此项留空并在之后的两个选项中手动指定后缀名。如果留空，就可以直接复制粘贴图片文件名到 items 中，不过使用的时候就比较麻烦，要写很长。
icon：显示在表情栏下面，用以代表表情包的 icon，只写名字，不需要写格式，如图片sad.gif 就写sad。
items：数组，每项是图片不包含通用前缀的文件名 (不含扩展名)。

假设你有如下文件:

https://example.com/myemoji/
├─ my_laugh.png
├─ my_cute.png
├─ my_rage.png
├─ my_sob.png
└─ info.json

你的 info.json 可设置为:

{
  "name": "我的 Emoji",
  "prefix": "my_",
  "type": "png",
  "icon": "cute",
  "items": ["laugh", "sob", "rage", "cute"],
}

2.2 输入 Items

如果你有很多条目，那一个个输入 items 会花费很多时间。下面是我用的一些笨方法

指定 type

获取文件名列表：在文件夹中选择要指定的图片，快捷键复制粘贴到 Excel 的一列中。

批量添加引号和逗号：设置所在列的单元格格式，自定义类型为!"@!",

去掉后缀：复制粘贴列数据到items中，搜索.后缀如.png，设置替换或删除。然后检查一下格式就完成了。

不指定 type 的设想

第一二步同上，第三步不需要删除后缀，直接粘贴
注意 icon 里也要写后缀，如"icon": "cute.png",

3. 上传包到 Github

将更改 push 到 Github 仓库中
在仓库中创建一个 Release，添加版本标签，如1.0、1.1，在之后的每次修改，你都可以添加一个 tag 标记，绑定标签后，历史评论引用的图片链接将不会因为调整图片而失效。

按照上述步骤创建好的 Blob 系列仓库：

Blobcat
Blob

4. 在 config 中引用

格式为： https://cdn.jsdelivr.net/gh/user/repo@version/file