风也雨忆笙

自从上次zeruns评论说主题功能要不要加上表情包，我就考虑了一下，然后正好乔千说可以基于owo.js来支持，然后我就搜索了一下owo.js。

image-20200604121633983

果不其然，OwO.js是diygod大佬几年前的一个项目，我说怎么这么的熟悉。handsome主题也是基于OwO.js实现的表情定制，不过handsome做了定制的修改优化。

OwO

使用方式

https://github.com/DIYgod/OwO

通过简单的文档，我们可以轻松的用npm的方式来使用owo，当然，winds主题并没有使用npm来作为包管理器，那么我们就需要引用owo的js文件啦。

下载owo

https://github.com/DIYgod/OwO/archive/master.zip

解压放入主题目录。

引入

HTML

1
2
3
4
5
<link rel="stylesheet" href="OwO.min.css">
<!-- ... -->
<div class="OwO"></div>
<!-- ... -->
<script src="OwO.min.js"></script>

JS

1
2
3
4
5
6
7
8
9
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'
});

设置

1
2
3
4
5
6
7
8
9
{
    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，当然也可自己定义类名。

image-20200605172021219

配置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/

效果

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://oldblog.kezez.com/199.html

本站为珂泽小站旧站数据，不支持评论，部分内容由于时效原因不保证可靠性，如果对于文章中的内容有疑问，请前往珂泽小站留言：https://www.kezez.com/message.html

评论