typecho实现owo.js自定义表情

AI摘要

本文介绍了如何在Typecho博客中通过owo.js实现自定义表情功能。作者首先从博客的微语模块中提取出owo.js的表情功能，并将其引入到评论区域。使用owo.js只需引入相应的js和css文件以及自定义的owo.json表情文件。作者还提供了单owo.html的源码和owo.json的在线地址，并建议减少图片表情或将图片引入到本地以提高加载速度。最后，作者表示将尝试为博客增加新的模块——书单。

此内容根据文章生成，不代表个人观点，仅用于文章内容的解释与总结

人生的意义就在于不断的折腾，最近依旧在不断的完善和美化博客的框架，充实博客的内容，毕竟一个好的博客是需要不断的维护和更新的。博客的基本模块已经确定了，后续就是一些体验和视觉上的优化了。在评论的时候发现主题没有表情功能，于是打算给评论增加一个表情选择。

博客中有一个微语模块，是附带表情功能的，然后看了一下，发现用的是owo.js实现的自定义表情。所以打算“抽丝剥茧”一下，先提取出单独的html，再对应的引入到评论的地方。最终的展现效果就是如评论区。

提取出来的单html展示效果：

使用须知:

关于owo.js的使用其实很简单，只需要引入对应owo的js和css就行，再加上一个自定义的表情owo.json文件。其中owo.json的表情定义类型分为两种，一种是图片image,一种是文字emoticon。

众所周知，图片加载的速度取决你的带宽大小，同时也影响着你的网页加载。默认的表情图片加载来自于cdn，但是因为lz的服务器来自国外，所以就会导致加载很慢，甚至有时出现加载失败的情况。

所以，这里提供两种建议，一种是减少图片表情，二是如果你对自己的带宽足够自信，可以把图片都引到本地进行请求加载。

源码分享

单owo.html代码如下，这里的静态资源来源博客地址和cdn地址，仅供测试用。各位自建博客、论坛、网站等想引用的请自行访问下载，别直接引用！！！

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://liuqingwushui.top/usr/themes/jasmine/times/assets/dycomment.min.css">
 <link rel="stylesheet" href="https://liuqingwushui.top/usr/themes/jasmine/whisper/OwO.min.css">
</head>
<body>
    <div >
        <div>
        <div id="comments">
            <div>有什么新鲜事想告诉大家？</div>
            <form method="post" id="j-dynamic-form" action="#">
 <textarea name="text" id="j-dynamic-form-text" autocomplete="off" rows="3" placeholder="发表您的新鲜事儿...">
 </textarea>
                <div>
                    <div id="OwO_Container"></div>
                    <button type="submit">立即发表</button>
                </div>
            </form>
        </div>
        </div>
    </div>
    <script src="https://cdn.jsdmirror.com/npm/jquery/dist/jquery.min.js"  ></script>
    <script src="https://cdn.jsdmirror.com/npm/typecho_joe_theme@4.4.5/assets/js/OwO.min.js"></script>
 
    <script>
        
        let DyComment ={
            /* 初始化owo标签 */
            init_owo() {
                if ($('#OwO_Container').length === 0) return;
                new OwO({
                    logo: 'OωO表情',
                    container: document.getElementsByClassName('OwO')[0],
                    target: document.getElementsByClassName('OwO-textarea')[0],
                    api: 'owo.json',
                    position: 'down',
                    width: '100%',
                    maxHeight: '250px'
                });
 
                $(document).bind('click', function () {
                    $('.OwO').removeClass('OwO-open');
                });
            }
        }
        $(document).ready(function () {
            /* 点击评论按钮显示隐藏评论区域 */
            $('.j-comment-reply').unbind('click').bind('click', function (e) {
                e.stopPropagation();
                $(this).parents('li').find('.j-dynamic-reply').toggle();
            });
            DyComment.init_owo()
        })
    </script>
</body>
</html>

owo.json自定义表情代码：

内容太长就不粘贴不出来了，直接提供博客当前使用的在线地址吧。

https://liuqingwushui.top/usr/themes/jasmine/times/assets/owo.json

小结

表情功能一加，评论再也不是冷冰冰的文字了，丰富多彩的表情一定会让你的博客也变得生动多彩起来。不妨试一试吧。感觉博客已经完善的差不多了，但是人生的意义在于折腾，又想给博客增加新的模块——书单。该怎么办呢？

表情

OωO
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
(｡•ˇ‸ˇ•｡)

颜文字

验证码：

取消回复

刘郎 01-08

回复

这个功能添加在这个主题上感觉有点奇怪更多的是突兀吧我觉得还是用浏览器自带的表情更爽哈哈
文案姐笔记 2024-12-10

回复

就是不断的折腾才能优化好一个好主题,好博客!ヾ(≧∇≦*)ゝ
1. 流情 (作者) 2024-12-10
  
  回复
  
  @文案姐笔记
  强迫症患者就喜欢追求尽善尽美(๑•̀ㅁ•́ฅ)
满心 2024-12-10

回复

不错不错，看起来也是个爱折腾的主啊
1. 流情 (作者) 2024-12-10
  
  回复
  
  @满心
  生命不息，折腾不止