为 Typecho 博客添加表情评论 #1：使用 OwO.js

AI摘要：本文介绍了为Typecho博客添加表情评论的方法，主要分为两部分。第一部分是使用DIYGod的OwO.js实现基本搭建，包括导入OwO文件、导入表情框按钮和绑定表情框与评论框。第二部分是为表情评论添加更多好看小表情，包括QQ小表情、Bilibili小电视小表情、酷安、微博和贴吧的表情包。文章还提供了五套好看表情包的gif或png图。最后，作者欢迎读者在评论区试验评论表情功能。

Powered by AISummary and MoonShot KimiChat.

傻翠总觉得自己的评论区有点单调 emmm 没有表情的评论区是没有灵魂的！于是下定决心给自己的博客整了个可以发表情的功能~ 效果嘛~ 你在下面发发评论就知道了鸭！

在这里分成两部分介绍下~

第一部分是这个功能的基本搭建，使用的是 ~~DIYGay~~ DIYGod 的 OwO.js，可以很顺利地为自己的网站添加表情评论~

第二部分则会使用自己在网上终于找到的 QQ 小表情， Bilibili 小电视小表情，酷安，微博，贴吧的表情包，为自己的表情评论添加更多的好看小表情，这篇文章在这里，当然也会 附上这五套好看表情包的 gif 图或 png 图~

那么我们开始吧！

首先 OwO 的官网在这里

傻翠的网站基于 Typecho，当然 WordPress 或其他形式的博客其实本质是类似的，也都是需要修改其中的 html 模板。

导入 OwO 就好像把大象放进冰箱，一共分三步：

导入 OwO 文件
导入表情框按钮
绑定表情框与评论框

1.导入 OwO

下载已经编译好的文件：

OwO.min.css
OwO.min.js
OwO.min.js.map
默认的 OwO 配置文件 OwO.json

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

之后在 html 模板的 <head></head> 部分中添加 css（对于 Tyepcho 一般是在模板主题的 header.php 中）

<link rel="stylesheet" href="css 文件地址">

修改 css 文件地址为自己的 css 文件地址。

在模板<body></body>中靠最后的部分添加 css（对于 Tyepcho 一般是在模板主题的 footer.php 中）

<script src="js 文件地址"></script>

修改 js 文件地址为自己的 js 文件地址。

2. 导入表情框按钮

在上面导入 js 文件的下面插入以下代码：

<script>
    var OwO_demo = new OwO({
        logo: 'OωO表情',
        container: document.getElementsByClassName('OwO')[0],
        target: document.getElementsByClassName('OwO-textarea')[0],
        api: 'JSON文件地址',
        position: 'down',
        width: '100%',
        maxHeight: '250px'
    });
</script>

修改 json 文件地址为自己的 json 文件地址。