typecho实现owo.js自定义表情

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

博客中有一个微语模块，是附带表情功能的，然后看了一下，发现用的是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

小结

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