PHP解析

第一步，将解析代码引入到主题 functions.php 里面最好是底部

/*
 * owo 表情
 */

function parsePaopaoBiaoqingCallback($match)
    {
        return '<img class="biaoqing" src="https://fantao.me/usr/themes/Fantao/owo/paopao/'. str_replace('%', '', urlencode($match[1])) . '_2x.png">';
    }
function parseAruBiaoqingCallback($match)
    {
        return '<img class="biaoqing" src="https://fantao.me/usr/themes/Fantao/owo/aru/'. str_replace('%', '', urlencode($match[1])) . '_2x.png">';
    }
function parseBiaoQing($content)
    {
        $content = preg_replace_callback('/\:\:\(\s*(呵呵|哈哈|吐舌|太开心|笑眼|花心|小乖|乖|捂嘴笑|滑稽|你懂的|不高兴|怒|汗|黑线|泪|真棒|喷|惊哭|阴险|鄙视|酷|啊|狂汗|what|疑问|酸爽|呀咩爹|委屈|惊讶|睡觉|笑尿|挖鼻|吐|犀利|小红脸|懒得理|勉强|爱心|心碎|玫瑰|礼物|彩虹|太阳|星星月亮|钱币|茶杯|蛋糕|大拇指|胜利|haha|OK|沙发|手纸|香蕉|便便|药丸|红领巾|蜡烛|音乐|灯泡|开心|钱|咦|呼|冷|生气|弱|吐血)\s*\)/is',
'parsePaopaoBiaoqingCallback', $content);
        $content = preg_replace_callback('/\:\@\(\s*(高兴|小怒|脸红|内伤|装大款|赞一个|害羞|汗|吐血倒地|深思|不高兴|无语|亲亲|口水|尴尬|中指|想一想|哭泣|便便|献花|皱眉|傻笑|狂汗|吐|喷水|看不见|鼓掌|阴暗|长草|献黄瓜|邪恶|期待|得意|吐舌|喷血|无所谓|观察|暗地观察|肿包|中枪|大囧|呲牙|抠鼻|不说话|咽气|欢呼|锁眉|蜡烛|坐等|击掌|惊喜|喜极而泣|抽烟|不出所料|愤怒|无奈|黑线|投降|看热闹|扇耳光|小眼睛|中刀)\s*\)/is',
'parseAruBiaoqingCallback', $content);
        return $content;
    }

?>

添加PHP文件

第二步，下载 OwO.zip 将 owo 文件夹解压到自己主题根目录

打开 owo 文件夹里面的OwO.json文件，把里面 Fantao 全部替换成你自己主题文件名

将下面代码引入到footer.php文件里，注意将下面 js、json文件路径改成自己的

<!-- OwO 表情 -->
<script src="<?php $this->options->themeUrl('/owo/OwO.min.js'); ?>"></script>
<script>
/*评论表情配置*/

var OwO_demo = new OwO({
            
            target: document.getElementsByClassName('OwO-textarea')[0],
            api: '/usr/themes/Fantao/owo/OwO.json',
            position: 'down',
            width: '66vw',
            maxHeight: '250px'
});

</script>

修改评论文件

第三步，打开comments.php文件，添加OwO按钮到评论框下面合适的位置

<a href="javascript: void(0);"class="btn btn-sm btn-primary OwO-logo" rel="external nofollow"><i class="mdi mdi-emoticon-wink-outline"></i>&nbsp;｡◕‿◕｡</a>
<div class="OwO"></div>

在你的评论框 class 里面插入 OwO-textarea
下面用我主题代码示范

然后将 comments.php 里的评论内容函数

每个主题可能不一样自己找一下

<?php $comments->content(); ?>

修改成

<?php $cos=parseBiaoQing($comments->content);echo $cos; ?>

添加css

第四步，在你的主题css文件引入下面代码

/*评论表情*/
.OwO{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;   }.OwO.OwO-open .OwO-body{display:block}.OwO.OwO-up .OwO-body{top:inherit;bottom:21px;border-radius:4px 4px 4px 0}.OwO.OwO-up .OwO-body .OwO-bar .OwO-packages li:nth-child(1){border-radius:0}.OwO.OwO-up.OwO-open .OwO-logo{border:1px solid #ddd;border-radius:0 0 4px 4px;border-top:none}.OwO .OwO-logo{position:relative;display:inline-block;cursor:pointer;box-sizing:border-box;z-index:2;}.OwO .OwO-logo:hover span{display:inline-block;-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}.OwO .OwO-body{display:none;position:relative;;max-width:400px;background:#fff;border:1px solid #ddd;z-index:1;border-radius:0 4px 4px 4px;-webkit-box-shadow: 0 2px 6px 0 rgba(114,124,245,.5);box-shadow: 0 2px 6px 0 rgba(114,124,245,.5);}.OwO .OwO-body .OwO-items{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;padding:10px;margin:0;overflow-y:scroll;font-size:0}.OwO .OwO-body .OwO-items .OwO-item{list-style-type:none;background:#f7f7f7;padding:5px 10px;border-radius:5px;display:inline-block;font-size:12px;line-height:14px;margin:0 10px 12px 0;cursor:pointer;-webkit-transition:.3s;transition:.3s}.OwO .OwO-body .OwO-items .OwO-item:hover{background:#eee;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}.OwO .OwO-body .OwO-items-emoji .OwO-item{font-size:20px;line-height:19px}.OwO .OwO-body .OwO-items-image .OwO-item{max-width:calc(25% - 10px);box-sizing:border-box}.OwO .OwO-body .OwO-items-image .OwO-item img{max-width:100%}.OwO .OwO-body .OwO-items-show{display:block}.OwO .OwO-body .OwO-bar{width:100%;height:30px;border-top:1px solid #ddd;background:#fff;border-radius:0 0 4px 4px;color:#444}.OwO .OwO-body .OwO-bar .OwO-packages{margin:0;padding:0;font-size:0}.OwO .OwO-body .OwO-bar .OwO-packages li{list-style-type:none;display:inline-block;line-height:30px;font-size:14px;padding:0 10px;cursor:pointer;margin:0}.OwO .OwO-body .OwO-bar .OwO-packages li:nth-child(1){border-radius:0 0 0 3px}.OwO .OwO-body .OwO-bar .OwO-packages li:hover{background:#eee}.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active{background:#eee;-webkit-transition:.3s;transition:.3s}
.OwO-jio{position: absolute;top: -10px;left: 10px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #ddd;}
.OwO-jio:before{content: '';display: block;width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid #FFF;position: absolute;left: -8px;top: 2px;}img.biaoqing {
    display: inline-block;
    height: 2em;
    vertical-align: bottom;
    margin: 0;
}.OwO.OwO-open {
    margin-top: .5rem;
}