使用 OwO.js 为 Typecho 博客添加表情评论教程

在上面引用的第一篇文章中，「绑定表情框与评论框」这个步骤，将 textarea 或者 input 标签的class属性追加 OwO-textarea

然后很重要的一步就是，在上述 textarea 或者 input 标签后面增加一个 div 用来填充 OwO(className)这个容器，代码可以是下面这样

# 在你使用的typecho模板comments.php 文件中，textarea 或 input 标签后面的合适位置放下下面这个div，用来存放 OwO表情

<div class="OwO"></div>

还有一个很重要的问题。json 文件遇到内层的半角双引号需要转义，比如下面这样

"Bilibili": {

"type": "image",

"container": [{

"icon": "<img src=\"https://hellodk.cn/usr/uploads/images/bilibili/doge.gif\" style=\"width: 32px\">",

"text": "doge"

原文中有些疏漏的地方。注意 img 标签的 style 属性要写，而且 width 属性值 32px，单位px也要写，否则可能评论区无法渲染表情（其实就是png或者gif图片）。图片来源的属性是 src 不是 data-src。

最后还有一个很关键的地方就是 typecho 后台评论设置里需要加入 <img src="" style=""> 的标签以及属性声明，否则typecho不会在评论区渲染表情。

入口在【设置】➡️️【评论】➡️️【允许使用的HTML标签和属性】

后面应该就可以生效了。

最后就是优化一下样式。引用的css样式我们可能无法更改，或者自己修改后存放在自己博客或者其他对象存储中，反正只要公网可访问就行。

手机宽度不够，使用了颜文字、emoji、qq表情、微博表情、bilibili表情、酷安表情、贴吧表情，在手机上只能显示前几个，而且又无法滚动。所以需要将 OwO-bar 增加纵向滚动属性，如下

.OwO-bar {

overflow-y: scroll

另外原本的 css 中定义了小表情的 overflow: scroll，这代表横向和纵向都有滚动条，然而实际上只有纵向滚动条用得到，而横向滚动条不可滚动还出现在界面中（灰色，不可点击，也就是不能滚动但还显示在那），很丑，我们干掉他。

.OwO .OwO-body .OwO-items {

overflow-y: scroll !important;

overflow-x: hidden !important

设置.OwO .OwO-body .OwO-items 这个class 的div 的属性为上面两个。横向滚动条隐藏，纵向的使用 scroll 保持滚动。另外加上 !important 覆盖原本从cdn下载的原始样式。

最后如果你的 OwO表情和你的博客主题还有一些UI上的兼容问题，那么调下样式改改css 吧

本文的分享结束。如果有问题，欢迎评论区交流。

Recommend