Back

Waline|添加自定义表情

以添加blob表情包为例

参考 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 步:

  1. 准备素材
  2. 创建索引
  3. 上传云端
  4. 引用

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

1. 准备表情包

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

注意事项

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

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

  1. fork 一下相应的repo
  2. clone 到本地文件夹
  3. 删除表情包文件夹/blobs中无关的文件(如 CNAME、config 等),只保留图片
  4. 按格式分成 /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

  1. 获取文件名列表:在文件夹中选择要指定的图片,快捷键复制粘贴到 Excel 的一列中。
  1. 批量添加引号和逗号:设置所在列的单元格格式,自定义类型为!"@!",
  1. 去掉后缀:复制粘贴列数据到items中,搜索.后缀.png,设置替换或删除。然后检查一下格式就完成了。

不指定 type 的设想

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

3. 上传包到 Github

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

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

4. 在 config 中引用

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

相关链接

然后,我们可以开始 blob 了!

Last updated on Dec 31, 2021 20:09 UTC