给typecho博客添加OwO表情教程

Author： Molerose
发布时间：June 14, 2018
3747 views
5 comments
1475 字数
Categories：资源技巧

无意间发现一款名为OwO的评论回复表情，挺好玩儿的，最开始是从[森七]老师的博客里面看到的，只不过[森七]老师博客里面介绍的是EMLOG的用法。

文件组成

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

.css 文件放置对应的文件夹

.js 和 .json 文件放到一个文件夹好了，但是要注意 .json 文件放置在哪儿 api 路径就要填写哪儿哟！

molerose 用的 OwO 表情已经打包好了，请笑纳！

当然，如果你想要增加更多，可以自己在 .json 文件中自行添加即可！

OwO.zip (842.7 KB, 最后修改: 2018-06-15 14:29)

HTML

<link rel="stylesheet" href="OwO.min.css">
<script src="OwO.min.js"></script>
// 建议放在头部

容器

容器位置如下图所示，考虑到体验度临近 textarea 元素即可，只要不太反人类就好了！
注意：在 textarea 元素中需要增加一个类名 OwO-textarea

JS

脚本建议放到临近 </body> 的位置

这里的api是json路径，文件放在哪儿，链接就指向哪儿即可

var OwO_demo = new OwO({
logo: 'OωO表情',                                               
container: document.getElementsByClassName('OwO')[0],         
target: document.getElementsByClassName('OwO-textarea')[0],   
api: './OwO.json',                                            
position: 'down',                                             
width: '100%',                                                
maxHeight: '250px'

成功范例

添加完成后到博客的评论处，或者留言的地方点击查看下是否有如下图样式及是否能够成功保存并发送。

备注

参考森七老师
项目地址 DIYgod

Last modification：June 15th, 2018 at 08:52 pm

If you think my article is useful to you, please feel free to appreciate

5 comments

湫
7 Mouths Ago Chrome 83 Windows 7

压缩包少了个OwO.min.js文件

Reply
江浙日报
8 Mouths Ago Chrome 78 Windows 7

夺在要求在地区性

Reply
叫花鸡
9 Mouths Ago Chrome 80 Windows 10

测试看一看

Reply
一朵时光红
10 Mouths Ago Chrome 63 Windows 7

压缩包没有这个文件！

Reply
崔先森
March 13, 2019 Chrome 49 Windows XP

难道我下载错了？压缩包里没有OwO.min.js这个文件啊？

Reply