本文最后更新于2022-10-31，已经有1081 天没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

前言

应网友需求，我抽空整理一份typecho后台编辑器自定义OwO表情包的教程，原本着想网上找一个typecho后台自定义表情包的插件二开适配OwO的，结果一搜索发现...网上居然一篇关于typecho后台表情包的插件都没有全是基于评论区添加表情包的.....这让我倍感郁闷，那干脆直接自己手改typecho代码实现，其原理其实并不难，跟我之前发的那篇全网唯一适配所有主题添加OwO表情包的教程一样的

在后台引用OwO核心

其中header.php在你网站“后台目录”的目录下面，注意是网站后台，不是主题那个，比如你的后台是默认的路径admin那么就在：/admin/header.php
方便复制：


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

其中/OwO/OwO.min.js和/OwO/OwO.min.css是核心文件js和css，我是把它们放到根目录的，所以这里的路径需要注意一下，不清楚的可以参考我之前的那篇OwO表情包教程：点击直达
核心下载地址：OwO表情包核心

在后台编辑器添加关键代码

其中write-post.php也是在你网站的后台目录里跟header.php同一个目录，然后找到<?php include 'custom-fields.php'; ?>这里自带的官方代码，然后在下面插入图片中的代码即可。
方便复制：


<div style="width:50%"><div class="OwO" style="padding-top:5px;padding-left:5px"></div></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>

其中/OwO/OwO.json的路径需要注意，我是放在网站根目录里的，所以跟关键核心css和js是在同一个目录，所以我这样引用，不明白的看我之前的那篇OwO表情包教程：点击直达

关联后台文章绑定表情包输出

在write-post.php中找到textarea标签，在class后面加入OwO的绑定class：“OwO-textarea”即可，此时可以进后台添加新文章里看到效果了！

添加OwO替换函数

在主题的functions.php文件中，添加关键替换函数，其中functions.php里在默认主题的目录下是有的，其他的主题也有，如果没有请联系该主题作者问他functions.php在哪，functions.php表示公共方法里面可以添加我们自定义的方法，然后我们就可以在主题的其他页面就可以调用我们刚刚加的方法
加入以下代码：


function themeInit($archive)
{
    //这里如果放开那么就表示不用更改post.php文件自动替换，但可能产生不兼容问题
    /*if ($archive->is('single')) {
        $archive->content = ParseReply($archive->content);
    }*/
}
/* 格式化 */
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;
}
function ParseQuYinBiaoqingCallback($match)
{

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

为什么要加上面的代码，请看我之前的那篇OwO表情包教程：点击直达

适配文章正则输出表情包

这里根据我自己主题的post.php文件修改示例如下

其中$content = ParseReply($content);就是关键代码了，这里其实就是调用了一个方法，将匹配到的表情包文字(原始文本数据)替换成img表情显示出来，这里的ParseReply就是我们刚刚在functions.php加的自定义方法了！其中我其实用了两层php正则替换，第一层是将所有的图片加上幻灯片的class适配幻灯片js插件，第二层才是替换表情包的方法ParseReply，其实你们的也一样的如果没有幻灯片用第二层就行