Molerose

给typecho博客添加OwO表情教程
无意间发现一款名为OwO的评论回复表情,挺好玩儿的,最开始是从[森七]老师的博客里面看到的,只不过[森七]老师博客...
扫描右侧二维码阅读全文
14
2018/06

给typecho博客添加OwO表情教程

无意间发现一款名为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

owowz.png

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'                                            

成功范例

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

owofl.png

备注

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

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

  2. 江浙日报

    夺在要求 在地区性

  3. 叫花鸡

    测试看一看

  4. 一朵时光红

    压缩包没有这个文件!

  5. 崔先森

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

Leave a Comment