本文参考

  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.

文章目录