夜庭記

Mirages主题添加自己的表情包

折腾2020/07/181,106 字约 3 分钟

先前在《讲讲我是如何魔改主题的》与《这是一篇测试表情包的文章》这两篇文章中提到我添加了自己的表情包。B站表情包好看，于是乎，扒一扒。就讲讲如何在Mirages上面添加表情包叭。

<!--more-->

----------

开始

一切的开始当然是要做好准备啦。本文以“小黄脸”表情包为例。根据Mirages主题文档，我们可以明确地知道：

表情文件要求：

  • 同一种表情中，所有后缀名必须相同
  • 鉴于文件名编码的不确定性，文件名部分建议使用英文

上传文件

先准备好你要添加的表情包，放到一个文件夹里面，将文件夹命名为表情包的名字（如：xiaohuanglian）这里的文件夹名字最好用英文。[file href="https://dlizi.com/usr/uploads/xiaohuanglian.tar.gz"]小黄脸表情包文件下载[/file]

owo-new-1

准备好文件后，在主题目录/usr/处添加一个文件夹重命名为biaoqing，再将文件夹上传到博客目录主题目录/usr/biaoqing/下。

上传完后，将OwO.json文件从主题目录/js/中复制一份放到主题目录/usr/biaoqing/下即可。

开始修改OwO.json文件

这里以小黄脸表情包为例。

"泡泡": {"type": "biaoqing","baseURL": "{BIAOQING_PAOPAO_PATH}","suffix": ".png","retinaSuffix": "_2x.png","input": "@({NAME})","imgClass": "biaoqing newpaopao","container": ["呵呵", "哈哈", "吐舌", "太开心", "笑眼", "花心", "小乖","乖","捂嘴笑", "滑稽", "你懂的", "不高兴", "怒", "汗", "黑线", "泪","真棒", "喷", "惊哭", "阴险", "鄙视", "酷", "啊","狂汗","what", "疑问", "酸爽", "呀咩爹", "委屈", "惊讶", "睡觉","笑尿","挖鼻", "吐", "犀利", "小红脸", "懒得理", "勉强", "爱心","心碎","玫瑰", "礼物", "彩虹", "太阳", "星星月亮", "钱币", "茶杯","蛋糕","大拇指", "胜利", "haha", "OK", "沙发", "手纸", "香蕉", "便便","药丸", "红领巾", "蜡烛", "音乐", "灯泡"]},

如代码，在已有的“泡泡”前面添加代码，则表情选项会在“泡泡”选项前面，反之则表情选项在“泡泡”选项后面。其他的同理。

owo-new-3

图中所示的既是“小黄脸”对应代码在“泡泡”前面，“蛆音娘”对应代码在“泡泡”后面所示效果。

在已有的代码的""的前面或者是]},的后面添加以下代码

"小黄脸": {"type": "usr","name": "xiaohuanglian","suffix": ".png","retinaSuffix": ".png","imgClass": "small","container": [{"icon":"[doge]","text":"[doge]"},{"icon":"[2020]","text":"[2020]"},{"icon":"[偷笑]","text":"[偷笑]"},{"icon":"[傲娇]","text":"[傲娇]"},{"icon": "[冷]","text": "[冷]"},{"icon":"[吃瓜]","text":"[吃瓜]"},{"icon":"[吐]","text":"[吐]"},{"icon":"[吓]","text":"[吓]"},{"icon":"[呆]","text":"[呆]"},{"icon":"[响指]","text":"[响指]"},{"icon":"[喜极而泣]","text":"[喜极而泣]"},{"icon":"[喜欢]","text":"[喜欢]"},{"icon":"[嘘声]","text":"[嘘声]"},{"icon":"[囧]","text":"[囧]"},{"icon":"[大哭]","text":"[大哭]"},{"icon":"[大笑]","text":"[大笑]"},{"icon":"[奸笑]","text":"[奸笑]"},{"icon":"[妙啊]","text":"[妙啊]"},{"icon":"[委屈]","text":"[委屈]"},{"icon":"[嫌弃]","text":"[嫌弃]"},{"icon":"[害羞]","text":"[害羞]"},{"icon":"[尴尬]","text":"[尴尬]"},{"icon": "[微笑]","text": "[微笑]"},{"icon":"[惊喜]","text":"[惊喜]"},{"icon":"[惊讶]","text":"[惊讶]"},{"icon": "[打call]","text": "[打call]"},{"icon":"[抠鼻]","text":"[抠鼻]"},{"icon":"[捂脸]","text":"[捂脸]"},{"icon":"[支持]","text":"[支持]"},{"icon":"[无语]","text":"[无语]"},{"icon":"[滑稽]","text":"[滑稽]"},{"icon":"[灵魂出窍]","text":"[灵魂出窍]"},{"icon":"[点赞]","text":"[点赞]"},{"icon":"[爱心]","text":"[爱心]"},{"icon":"[生气]","text":"[生气]"},{"icon":"[生病]","text":"[生病]"},{"icon":"[画风突变]","text":"[画风突变]"},{"icon":"[疼]","text":"[疼]"},{"icon":"[福]","text":"[福]"},{"icon":"[福到了]","text":"[福到了]"},{"icon":"[笑哭]","text":"[笑哭]"},{"icon":"[调皮]","text":"[调皮]"},{"icon":"[酸了]","text":"[酸了]"},{"icon":"[锦鲤]","text":"[锦鲤]"},{"icon":"[阴险]","text":"[阴险]"},{"icon":"[黑洞]","text":"[黑洞]"}]},

保存后，就可以到评论区或是文章编辑区中的OwO表情选项中看到有自己新的表情包出现了讷:[蛆音娘_witty]

让我们来分析分析代码

我们可以通过Mirages主题文档了解到OwO文件代码基本框架是这样的

"表情名称": {"type": "usr","name": "dir_name","suffix": ".png","retinaSuffix": ".png","imgClass": "small","container": [{"icon": "hematemesis","text": "吐血"},{"icon": "1huaji","text": "滑稽"},{"icon": "amazing","text": "吃惊"}]},

表情名称就填页面需要显示的表情包的文字"name"后面的dir_name就填你上传上去的表情包的文件夹的名字"suffix"与"retinaSuffix"就都填表情文件的后缀就行了"imgClass"后面就填表情包输出的大小，就从small、middle、medium、large中选出合适的就行了。"container"中的内容可以不加"text"的属性。不加的话也就鼠标放在表情文件上就没有附加的文字注解了，加的话就写起来麻烦些。

参考文献Mirages主题文档

评论