本文参考

  1. 为 Typecho 博客添加表情评论 #1：使用 OwO.js
  2. 为 Typecho 博客添加表情评论 #2：添加 QQ，Bilibili，酷安，贴吧，微博表情包

我的补充

在上面引用的第一篇文章中，「绑定表情框与评论框」 这个步骤，将 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 吧

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

end.