前言
先前在《讲讲我是如何魔改主题的》与《这是一篇测试表情包的文章》这两篇文章中提到我添加了自己的表情包。
B站表情包好看,于是乎,扒一扒。
就讲讲如何在Mirages上面添加表情包叭。
开始
一切的开始当然是要做好准备啦。
本文以“小黄脸”表情包为例。
根据Mirages主题文档,我们可以明确地知道:
表情文件要求:
- 同一种表情中,所有后缀名必须相同
- 鉴于文件名编码的不确定性,文件名部分建议使用英文
上传文件
先准备好你要添加的表情包,放到一个文件夹里面,将文件夹命名为表情包的名字(如:xiaohuanglian)这里的文件夹名字最好用英文。
小黄脸表情包文件下载
准备好文件后,在主题目录/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", "沙发", "手纸", "香蕉", "便便",
"药丸", "红领巾", "蜡烛", "音乐", "灯泡"
]
},
如代码,在已有的“泡泡”前面添加代码,则表情选项会在“泡泡”选项前面,反之则表情选项在“泡泡”选项后面。其他的同理。
图中所示的既是“小黄脸”对应代码在“泡泡”前面,“蛆音娘”对应代码在“泡泡”后面所示效果。
在已有的代码的""
的前面或者是]},
的后面
添加以下代码
"小黄脸": {
"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
表情选项中看到有自己新的表情包出现了讷::quyin: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主题文档
学习学习
不改,太累
也是::quyin:shakinghead::
改owo实在是太麻烦了...不同主题还会出现不同格式
之前在wp站改过一次,太累了
typecho我就懒得改了
说的对 owo太麻烦了