Waline_自定义表情包


Tags: #软件 
Created: 
Updated:

参考资料

  1. jsdelivr:开源CDN使用教程
  2. 自定义表情 - Waline:Waline官方文档
  3. sticker-heo:参考写法
  4. Telegram Emoji - EMOJIALL:Telegram Emoji资源下载
  5. Heo -Github:Heo表情资源
  6. 网站一些小变化:参考使用、表情包资源

前言

前端时间看到个博友的评论支持Telegram Emoji,博客圈感觉比较少见
就自己摸索尝试下自己添加,行的通,不过后续为了访问速度考虑(由于表情是动态的),还是删除了,另外也把现有的表情精简了下,仅保留了一个张洪大大设计的Heo表情包

Waline官方其实写的蛮清楚,不过个人再记录总结下整体流程,以后也有可能用的上

我分为2个板块来讲

  1. 自部署:自己部署表情包、自定义表情包,不怕404、减少404的概率
  2. 开箱即用:别的博主、Waline封装好的链接,直接添加到Waline的设置中即可

自部署

资源准备

第一步准备2样东西

  1. 表情包合集(图片资源)
  2. info.json:Waline读取使用

先要准备些图片资源或者表情包资源,如果是图片资源的话,要求尺寸大小一致,例如都是100*100
将这些图片放在一个文件夹下,并且在该文件夹下创建一个info.json

示例(Heo表情包)

image-20240822223049031

info.json 是一个 json文件,下面讲解各个参数

{
  "name": "我的 Emoji",
  "prefix": "my_",
  "type": "png",
  "icon": "cute",
  "items": ["laugh", "sob", "rage", "cute"]
}
  • name:Emoji 名称(不被任何其他地方引用,仅json文件中定义知道)

  • prefix (可选的):Emoji 图片名称的通用前缀,建议是为一个系列的表情包添加一个共用前缀,以防与其他 Emoji 缩写相冲突(例如有多个表情包,表情包1系列中有叫A,表情包2系列中有叫A)

  • type (可选的): 图片的类型,会用作图片的后缀名,如果使用不同类型的图片,将此项留空并在之后的两个选项中手动指定后缀名。

  • icon:选项卡中显示的图片 (代表性的图标)
    image.png

  • items:表情包图片

Heo示例(info.json写法)

{
  "name": "Heo",
  "type": "png",
  "icon": "亲亲",
  "items": [
    "亲亲",
    "倚墙笑",
    "值得肯定",
    "偷偷看",
    "危险",
    "吃瓜",
    "吵架",
    "呲牙笑",
    "喜欢",
    "嘿哈",
    "大笑",
    "好的",
    "害羞",
    "开心",
    "微笑",
    "思考",
    "惊吓",
    "惊吓白眼",
    "惊讶",
    "感动",
    "愤怒",
    "扶额",
    "捂嘴笑",
    "捂脸",
    "擦汗",
    "没招",
    "流汗微笑",
    "滑稽",
    "滑稽吃瓜",
    "滑稽喝水",
    "滑稽奶茶",
    "滑稽柠檬",
    "滑稽狂汗",
    "狗头",
    "狗头意外",
    "疑问",
    "眩晕",
    "笑哭",
    "翻白眼",
    "被打"
  ]
}

托管

Gihtub+jsdelivr

先新建一个Github仓库(名字自定,我这里仅是示例)
image-20240822231526966

然后将自己的表情包文件夹中的文件(表情包+info.json)上传到仓库
我这里使用Github直接上传文件(会使用Git的应该不用我讲解= =,直接上传)

image-20240822231559437

image-20240822231713327

上传后,我们在这个仓库的主页,点击右侧创建第一个版本

image-20240822231848061

输入0.1,点击create创建第一个版本发布
由于我们是自用,下面都随便填好了,我这里都填写0.1

image-20240822232027583

然后发布这个0.1版本

image-20240822232045465

之后参考jsdelivr的写法,建立一个公共CDN

写法为:https://cdn.jsdelivr.net/gh/user/repo@version/file

我们先写一个(这里做参考使用,用户名、仓库名、版本名自己改):https://github.com/l739217783/demo@0.1/info.json

运行一次后,会建立一个公共CDN节点
之后我们就可以在Waline中配置该链接(https://github.com/l739217783/demo@0.1/),使用该表情包,具体配置见Waline配置

又拍云

有时候jsdelivr不够稳定,甚至会挂比
我们可以托管在又拍云上,或者自己的服务器上,我有使用又拍云,所以分享下

首先,确保我们使用了云存储服务

image-20240822232708228

然后使用「文件管理」功能,在根目录下创建一个emoji文件夹

image-20240822232749982

再在下面创建一个表情包合集的文件夹,例如我使用heo,那么建立一个heo文件夹
image-20240822232858350

之后,将表情包(所有表情包图片+info.json)上传到这个文件夹

image-20240822232942332

之后就可以通过绑定的域名,来访问这些表情包
例如,你绑定的域名是www.baidu.com,我们路径是/emoji/heo
那么你的URL则是https://www.baidu.com/emoji/heo,自己类推

之后在Waline配置即可,参考Waline配置

需要注意的是,如果你已经启用了HTTPS,在本地先调试的,要配置下CORS跨域
因为本地调试是http协议,而又拍云启用HTTPS,链接则是https协议,这样访问会造成了CORS跨域问题,导致Waline加载info.json失败,间接导致所有的表情包合集加载不出来

image-20240822233315265

Referer 防盗链也是,如果在在本地先调试的,可以暂时关闭下
否则可能也加载不出来资源,会被拦截掉

image-20240822233435635

开箱即用

资源

表情包名称 类型 地址
Alus(阿鲁) 静态 https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/alus
Bilibili 静态 https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili
QQ 动态 https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq
Tieba ??? https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tieba
Weibo 静态 https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo
Heo 静态 https://cdn.jsdelivr.net/npm/sticker-heo@2022.7.5/Sticker-100/
menhera酱原版 ??? https://img.shimoko.com/waline_emojis/emojis-main/menhera
menhera酱-变猫猫 ??? https://img.shimoko.com/waline_emojis/emojis-main/menhera-Cat
menhera酱-情人节 ??? https://img.shimoko.com/waline_emojis/emojis-main/menhera-Valentine
menhera酱-小魔女 ??? https://img.shimoko.com/waline_emojis/emojis-main/menhera-Witch
Bilibili-233表情 ??? https://img.shimoko.com/waline_emojis/emojis-main/bilibili-2233
Whatcccat ??? https://img.shimoko.com/waline_emojis/emojis-main/whatcccat
Twitter - emoji 静态 https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji
Twitter - Full 静态 https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw
Twitter - People ??? https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-people
Twitter - Body ??? https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-body
Twitter - Flag ??? https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-flag
Twitter - Food ??? https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-food
Twitter - Natural ??? https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-natural
Twitter - Object ??? https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-object
Twitter - Sport ??? https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-sport
Twitter - Symbol ??? https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-symbol
Twitter - Time ??? https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-time
Twitter - Travel ??? https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-travel
Twitter - Weather ??? https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-weather

注:

  1. ???代表个人未尝试,所以不知道是什么图片类型,感兴趣的自己尝试下
  2. https://img.shimoko.com/ 开头链接,均为 Shimoko 博主自托管提供,使用他的表情包的话,最好感谢下,毕竟是自托管分享(用爱发电),也没有设置限制,我这里仅是作为合集。

Waline配置

Waline是通过emoji选项设置表情包的,emoji选项的值是一个列表,直接往里面丢别人托管好的表情包即可

每个主题都是大同小异,找到Waline对应的配置(大多肯定有这个选项,没有的话就去布局文件夹里面找实例自己动手修改)

Waline({
  el: '#waline',
  serverURL: '<YOUR SERVER URL>',

  // 设置 emoji 为微博与哔哩哔哩
  emoji: [
    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili',
  ],
});

我个人使用Fluid主题,是在主题配置文件修改
像这样

waline:
  emoji: ['https://image.linguoguang.com/emoji/heo']

配置完,重新部署即可