自从上次zeruns评论说主题功能要不要加上表情包,我就考虑了一下,然后正好乔千说可以基于owo.js来支持,然后我就搜索了一下owo.js。
果不其然,OwO.js是diygod大佬几年前的一个项目,我说怎么这么的熟悉。handsome主题也是基于OwO.js实现的表情定制,不过handsome做了定制的修改优化。
使用方式
通过简单的文档,我们可以轻松的用npm的方式来使用owo,当然,winds主题并没有使用npm来作为包管理器,那么我们就需要引用owo的js文件啦。
下载owo
https://github.com/DIYgod/OwO/archive/master.zip
解压放入主题目录。
引入
HTML
<link rel="stylesheet" href="OwO.min.css">
<!-- ... -->
<div class="OwO"></div>
<!-- ... -->
<script src="OwO.min.js"></script>
JS
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'
});
设置
{
logo: 'OωO表情', // OwO button text, default: `OωO表情`
container: document.getElementsByClassName('OwO')[0], // OwO container, default: `document.getElementsByClassName('OwO')[0]`
target: document.getElementsByClassName('OwO-textarea')[0], // OwO target input or textarea, default: `document.getElementsByTagName('textarea')[0]`
api: './OwO.json', // OwO Emoticon data api, default: `https://api.anotherhome.net/OwO/OwO.json`
position: 'down', // OwO body position, default: `down`
width: '100%', // OwO body width, default: `100%`
maxHeight: '250px' // OwO body max-height, default: `250px`
}
绑定textarea
为评论内容框添加一个class类:OwO-textarea
,当然也可自己定义类名。
配置json
我们可以直接使用demo中的json文件修改
https://github.com/DIYgod/OwO/blob/master/demo/OwO.json
然后再配置里面将api的地址更改为JSON文件所在的路径。
让typecho支持emoji
由于一些原因,typecho的默认数据库不支持emoji,我们需要将数据库的格式修改为utf8mb4,这样才不会出现数据库query_error
具体操作方式见:https://wiki.eas1.cn/archives/20200604-typecho-emoji/
12 条评论
此评论为广告,已自动屏蔽。
大佬牛逼👍
这个真的是果酱了
🙈
(๑¯ω¯๑)
不知道什么原因,你的订阅我怎么更新不了了。。
删掉然后重新订阅吧,估计还是之前301跳转遗留下来的问题
大佬大佬👻
果酱了😂
我也想要(/ω\)
可以搞,这个支持很多程序的