typecho主题添加OwO表情

OwO表情下载：https://github.com/DIYgod/OwO

所需文件：

OwO.min.css
OwO.min.js
OwO.json

将上述三个文件上传到自己的服务器或者对象存储中，提供一个可以访问的外部网址。

导入 OwO

OwO.min.css放在head.php中

<link rel="stylesheet" href="OwO.min.css链接地址">

在footer.php的前添加

<script src="OwO.min.js链接地址"></script>

导入 OwO表情框按钮

紧接着在js下添加如下代码

<script> 
var OwO_demo = new OwO({ 
    logo: 'OωO表情', //可以通过<img>标签插入图片表情
    container: document.getElementsByClassName('OwO')[0], 
    target: document.getElementsByClassName('OwO-textarea')[0],
    api: 'OwO.json链接地址', 
    position: 'down', 
    width: '100%', 
    maxHeight: '250px' }); 
</script>

评论框放置表情按钮

在comment.php中找到@input>或@textarea>标签在class= 后面加入OwO-textarea

在标签下方加入<div title="OwO" class="OwO" ></div>

添加表情

添加表情需要配置OwO.json文件，格式如下：

{
"颜文字": {
"type": "emoticon",//GIF图type填gif，png图片type填image
"container": [
{
"icon": "OωO",
"text": "Author: DIYgod"
},
{
"icon": "|´・ω・)ノ",
"text": "Hi"
}
]
},
 "BiliBili": {
"type": "gif",
"container": [
{
"icon":"<img src=\"https://pt.pyrroleach.com/emotion/doge.gif\" style=\"width: 32px\">"
,"text":":doge:"
},
{"text":"亲亲","icon":"<img src=\"https://pt.pyrroleach.com/emotion/亲亲.gif\" style=\"width: 32px\">",
"text":":亲亲:"
}
]
}, "微博": {
  "type": "image",
   "container": [
{
"text":"d_1","icon":"<img src=\"https://pt.pyrroleach.com/emotion/weibo/d_1.png\" style=\"width: 32px\">",
"text":":d_1:"
},
{
"text":"d_22","icon":"<img src=\"https://pt.pyrroleach.com/emotion/weibo/d_22.png\" style=\"width: 32px\">"
,"text":":d_22:"
}
]
}
}

如何快速创建json

先将表情包上传到服务器或云存储
提取表情包文件名
使用Excel批量创建表情包链接
将Excel转换为json
Excel转换为json网址:https://www.bejson.com/json/col2json/

具体设置参考https://idealclover.top/archives/562/

其他json

https://cdn.klyang.com/json/emo.json
https://emotion.xiaokang.me/#/