warning: 这篇文章距离上次修改已过1803天，其中的内容可能已经有所变动。
本文参考
我的补充
在上面引用的第一篇文章中，「绑定表情框与评论框」 这个步骤，将 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.