【typecho】typecho新增OwO自定义表情包，适配所有主题，全网最详细

前言

本博客主题之前是没有表情包评论的功能的，本人之前想着网上找一下typecho表情包的插件，可惜的是本人试过很多typecho的表情包插件效果均不理想，不符合我的要求，偶然之间了解到OwO表情包技术，之前没有过于深入研究，直接照着官网的案例搬了上来。可是发现....插入表情的时候带上了

<img src="/OwO/quyin/吐血.png" alt="" class="OwO-img-quyin">

这样完整的img标签，占用了许多的评论框空间，由于本人之前一直没时间处理，后面有时间处理的时候发现，网上居然一篇完整详细的typecho任意主题适配OwO的教程都没有...
最后花了两个小时手撕别的用这个OwO表情包技术的主题，最后分析完成后记录在本博客，以便后续大家能更快接入此技术，提高博客用户体验

教程开始(略长)

将OwO核心文件上传至服务器

这里打包给各位下载，放到任意目录即可
（这里本人是直接放到博客的根目录）
下载地址：OwO_tjcJEB.rar

header里引用核心js和css

typecho官方默认主题的header文件在：
/usr/themes/default/header.php
先上个图：

    <!--OwO标签js核心引入 开始-->
    <script src="/OwO/OwO.min.js"></script>
    <link href="/OwO/OwO.min.css" rel="stylesheet">
    <!--OwO标签js核心引入 结束-->

发现了吗，这里的引用要对应之前上传核心文件到网站服务器根目录中的js和css要对应，这里在引用这个OwO之前需要jQuery的技术，没有的话在前面加一个（如果你博客已经引用过jQuery就不用重复引用，不过请注意引用的先后顺序，确保jQuery引用在OwO引用之前）：

    <script src="//blog.wm404.com/usr/themes/wmsafe-dux/css/jquery.min.js"></script>
    <!--OwO标签js核心引入 开始-->
    <script src="/OwO/OwO.min.js"></script>
    <link href="/OwO/OwO.min.css" rel="stylesheet">
    <!--OwO标签js核心引入 结束-->

打开typecho主题的评论核心文件

官方默认的是：/usr/themes/default/comments.php
一般都是主题下方的comments.php文件

添加核心js代码和div

先上个图：

<div class="OwO" style="padding-top:5px;padding-left:5px"></div>
                        <script>
                            var OwO_demo = new OwO({
                                logo: 'OwO',
                                container: document.getElementsByClassName('OwO')[0],
                                target: document.getElementsByClassName('OwO-textarea')[0],
                                api: '/OwO/OwO.json',
                                position: 'up',
                                width: '100%',
                                maxHeight: '250px'
                            });
                        </script>

这里讲解一下，那个div就是样式，OwO会自动找寻class引用为OwO的div，将它作为一个容器，然后动态加入相关html子标签，只要将代码像我这样贴上去，保存后，你就可以到随便一篇文章里评论那边就能面看到效果了。
贴个图：

var OwO_demo = new OwO({
    logo: 'OwO',
    container: document.getElementsByClassName('OwO')[0],
    target: document.getElementsByClassName('OwO-textarea')[0],
    api: '/OwO/OwO.json',
    position: 'up',
    width: '100%',
    maxHeight: '250px'
});

上面的“api”后面的地址，必须放你OwO.json的完整路径，只适配根目录往下找，或者引用http(s)的OwO.json，不知道的不用深究跟我保持一样就行，其他的都保持默认就行，其中“position”表示点击那个按钮展开的表情包是在上面展开还是下面展开，这里的up表示向上展开，像down就是向下展开。

然后加入核心自定义方法

官方默认路径：/usr/themes/default/functions.php
打开这个functions.php，往里面加上以下的代码

function themeInit($archive)
{

    if ($archive->is('single')) {
        $archive->content = ParseReply($archive->content);
    }
}

/* 格式化 */
function ParseReply($content)
{
    $content = preg_replace_callback(
        '/\:\@\(\s*(吐血|滑稽|吃惊|生气|哭泣|die|疑问|肥皂|扶额|哼|大笑|偷看|卖萌|OK|吓死宝宝惹|摇头|睡觉|无语|吃瓜|机智)\s*\)/is',
        'ParseQuYinBiaoqingCallback',
        $content
    );
    return $content;
}
function ParseQuYinBiaoqingCallback($match)
{

    return '<img class="owo" style="width:66px;height:66px" src="' . '/OwO/quyin/' . urlencode($match[1]) . '.png">';
}

上图：

其中：

$content = preg_replace_callback(
        '/\:\@\(\s*(吐血|滑稽|吃惊|生气|哭泣|die|疑问|肥皂|扶额|哼|大笑|偷看|卖萌|OK|吓死宝宝惹|摇头|睡觉|无语|吃瓜|机智)\s*\)/is',
        'ParseQuYinBiaoqingCallback',
        $content
    );

这里其实是正则，也就匹配OwO.json中的：

不知道小伙伴有没有发现其中的“:@(”，这个就是匹配上面那个正则代码中的“/\:\@(\s*(”，其中的“@”符号是不是很醒目，这个其实就是适配多个表情包用的，像如果你后续要加新的表情包，那么就不要在跟这个“@”符号一样了，可以设置成“&”等等，最后适配代码加上：

/* 格式化 */
function ParseReply($content)
{
    $content = preg_replace_callback(
        '/\:\@\(\s*(吐血|滑稽|吃惊|生气|哭泣|die|疑问|肥皂|扶额|哼|大笑|偷看|卖萌|OK|吓死宝宝惹|摇头|睡觉|无语|吃瓜|机智)\s*\)/is',
        'ParseQuYinBiaoqingCallback',
        $content
    );
    $content = preg_replace_callback(
        '/\:\&\(\s*(吐血|滑稽|吃惊|生气|哭泣|die|疑问|肥皂|扶额|哼|大笑|偷看|卖萌|OK|吓死宝宝惹|摇头|睡觉|无语|吃瓜|机智)\s*\)/is',
        'ParseXXXXXXXBiaoqingCallback',
        $content
    );
    return $content;
}
function ParseXXXXXXXBiaoqingCallback($match)
{

    return '<img class="owo" style="width:66px;height:66px" src="' . '/OwO/XXXXXXX/' . urlencode($match[1]) . '.png">';
}

其中的XXXXXXX就是你表情包的标识了，这个是唯一的，要对应图片上面一层的文件夹名，这里提一嘴，文件夹名字不要有特殊字符和空格保持全英文就好
另外ParseQuYinBiaoqingCallback这个是回调方法，如果你新增一组表情包，那么就要在新增新的正则表达式后要重新新增一个方法来适配这个回调函数，不懂的照抄，其实有点编程水准的小伙伴可以仔细看看这些东西的关联关系，我相信你很快就能明白了！

评论输出时替换成img

最后一步就是在访问文章下滑到评论那边后，将评论的内容适配转换成html的表情img，这样才可以展示成图片给用户观看，不然就是一组“: @(吐血) 这是亿条评论”，而没有图片。
打开comments.php
官方默认主题地址：/usr/themes/default/comments.php
将下方代码：

<?php
function threadedComments($comments, $options) {
    $commentClass = 'commentlist';
    if ($comments->authorId) {
        if ($comments->authorId == $comments->ownerId) {
            $commentClass .= ' comment-by-author';
        } else {
            $commentClass .= ' comment-by-user';
        }
    }

    $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent';

    if ($comments->url) {
        $author = '<a href="' . $comments->url . '" target="_blank"' . ' rel="external nofollow">' . $comments->author . '</a>';
    } else {
        $author = $comments->author;
    }
?>

    <li id="<?php $comments->theId(); ?>" class="comment byuser comment-author-admin bypostauthor depth-<?php echo $comments->levels+1; ?> comment-body<?php
    if ($comments->levels > 0) {
        echo ' comment-child';
        $comments->levelsAlt(' comment-level-odd', ' comment-level-even');
    } else {
        echo ' comment-parent';
    }
    $comments->alt(' odd', ' even');
    ?>">
<?php
    $host = '//sdn.geekzu.org';
    $url = '/avatar/';
    $size = '50';
    $rating = Helper::options()->commentsAvatarRating;
    $hash = md5(strtolower($comments->mail));
    $avatar = $host . $url . $hash . '?s=' . $size . '&r=' . $rating . '&d=mm';
    $avatar = isqq($comments->mail);
?>
        <div class="comt-avatar"><img alt="" data-src="<?php echo $avatar; ?>" srcset="<?php echo $avatar; ?>" class="avatar photo" height="50" width="50" src="<?php $aoptions = Typecho_Widget::widget('Widget_Options'); $aoptions ->themeUrl("img/avatar-default.png"); ?>"></div>
        <div class="comt-main" id="div-<?php $comments->theId(); ?>">
            <div class="comt-meta" style="margin:0;">名称：<span class="comt-author"><?php echo $author; ?></span></div>
            <?php 
                //$comments->content();
                //输出的评论将表情包替换成img表情
                echo ParseReply($comments->content);
            ?>
            <div class="comt-meta">
                <?php $comments->useragent($agentConfig = null);?> | <?php $comments->date('Y-m-d'); ?>&nbsp;&nbsp;&nbsp;&nbsp;<?php $comments->reply('回复'); ?>
            </div>
        </div>
    <?php if ($comments->children) { ?><ul class="children"><?php $comments->threadedComments($options); ?></ul><?php } ?>
    </li><?php } ?>

加入到这里：

其中最关键的代码其实在这里

这里的意思就是在评论输出的时候将评论带有“: @(吐血)”这类的文字转换成img标签的图片，其实用户评论的时候后台接收的POST评论数据都是文字来的，只是前台在输出的时候替换了！其他主题可以参考此处整理，万变不离其宗的

还有不明白的可以联系QQ1845440070咨询

补充

如果要适配表情包输出的大小，请在主题css样式中添加

.OwO .biaoqing.表情包名字 {
    margin-bottom: -0.125rem;
    min-height: 3.5rem;
    height: 1em;
}
/*修改表情框内表情预览大小，根据实际情况自行测试修改*/

其中表情包名字可以自己F12看看：

补充2 不支持中文图片引用

有些虚拟机是不支持中文引用的，需要改成英文的图片名称才可以，宝塔的话是支持中文引用的，但还是推荐用英文，因为英文的兼容性高，这里附上英文适配的OwO压缩包！
OwO_3s42dK.zip
再然后，那个方法要改一下，因为都变成英文的了，方法也要跟着适配，不能用之前的中文了

/* 格式化 */
function ParseReply($content)
{
    $content = preg_replace_callback(
        '/\:\@\(\s*(tuxue|huaji|chijing|shengqi|kuqi|die|yiwen|feizao|fule|heng|daxiao|toukan|maimeng|OK|xiasi|yaotou|shuijiao|wuyu|chigua|jizhi)\s*\)/is',
        'ParseQuYinBiaoqingCallback',
        $content
    );
    return $content;
}

至此，自定义OwO表情包就结束了

最后

希望大家保存一颗学习的心，引用易大师的一句名言：真正的大师永远怀揣着一颗学徒的心，互相交流互相进步才是正道，因为只有相同类型的人才会混迹在一起，所以我希望圈里的人保持一颗高品的心。