为Typecho引入OwO表情包

写一篇博文如果单单只是文字，就会显得很枯燥，而通过插入图片、视频、音乐、表情，我们可以使文章更加生动有趣。

这里给大家附上如何免插件地向Typecho手动加入OwO表情豪华套餐（如需复制，请采用Ctrl + C）

PHP解析

• 第一步，将解析代码引入到主题functions.php内

php 代码:

//表情解析
function emotionContent($content,$url){
    $fcontent = preg_replace('#\@\((.*?)\)#','<img class="emojii" border="0" src="'. $url .'/OwO/$1.png">',$content);
}//实际使用请修改表情包所在的路径

修改评论文件

• 然后将评论文件中的（一般是comments.php文件）

php 代码:

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

修改为

php 代码:

<?php
  $cos = preg_replace('#\@\((.*?)\)#','<img class="emojii" border="0" src="'.$GLOBALS['theme_url'].'/OwO/$1.png">',$comments->content);
   echo $cos;
?>//实际使用请修改表情包所在的路径

• 将评论文件顶部的

php 代码:

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>

修改为（这一步防止图片路径解析错误）

php 代码:

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit;
 $GLOBALS['theme_url'] = $this->options->themeUrl;
?>

• 添加OwO按钮到你需要地方，一般是form表单内

php 代码:

<div class="OwO-logo" onclick="OwO_show()">
      <span>（OwO）</span>
      </div>
  <?php $this->need('OwO.php'); ?>

添加PHP文件

新建OwO.php文件，一般情况下与functions.php，comments.php文件同级文件夹

php 代码:实际使用请修改表情包所在的路径

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>

    <div class="OwO">
        <div class="OwO-body" id="OwO-body">
            <ul class="OwO-items" style="max-height: 0;padding: 0px;">
                <li class="OwO-item" onclick="Smilies.grin('@(chaiquan)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/chaiquan.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(chaiquanbugaoxin)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/chaiquanbugaoxin.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(chaiquanzaijian)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/chaiquanzaijian.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(chaiquanku)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/chaiquanku.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(hehe)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/hehe.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(haha)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/haha.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(tushe)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/tushe.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(taikaixin)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/taikaixin.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(xiaoyan)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/xiaoyan.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(huaxin)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/huaxin.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(xiaoguai)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/xiaoguai.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(guai)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/guai.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(wuzuixiao)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/wuzuixiao.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(huaji)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/huaji.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(nidongde)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/nidongde.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(bugaoxin)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/bugaoxin.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(nu)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/nu.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(han)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/han.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(heixian)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/heixian.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(lei)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/lei.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(zhenbang)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/zhenbang.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(pen)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/pen.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(jingku)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/jingku.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(yinxian)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/yinxian.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(bishi)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/bishi.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(ku)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/ku.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(a)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/a.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(kuanghan)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/kuanghan.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(what)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/what.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(yiwen)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/yiwen.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(suanshuang)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/suanshuang.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(yamiedie)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/yamiedie.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(weiqu)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/weiqu.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(jingya)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/jingya.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(shuaijiao)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/shuijiao.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(xiaoniao)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/xiaoniao.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(wabi)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/wabi.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(tu)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/tu.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(xili)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/xili.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(xiaohonglian)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/xiaohonglian.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(landeli)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/landeli.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(mianqiang)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/mianqiang.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(aixin)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/aixin.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(xinsui)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/xinsui.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(meigui)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/meigui.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(liwu)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/liwu.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(caihong)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/caihong.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(taiyang)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/taiyang.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(xinxinyueliang)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/xinxinyueliang.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(qianbi)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/qianbi.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(chabei)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/chabei.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(dangao)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/dangao.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(damuzhi)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/damuzhi.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(shengli)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/shengli.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(haha)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/haha.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(OK)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/OK.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(shafa)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/shafa.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(shouzhi)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/shouzhi.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(xiangjiao)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/xiangjiao.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(bianbian)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/bianbian.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(yaowan)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/yaowan.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(hlj)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/hlj.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(lazhu)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/lazhu.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(yingyue)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/yingyue.png"></li>
                <li class="OwO-item" onclick="Smilies.grin('@(dengpao)');"><img src="<?php $this->options->themeUrl(''); ?>/OwO/dengpao.png"></li>
            </ul>
        </div>
    </div>

PHP部分到此结束。最后引入静态资源

引入文件

CSS部分：

css 代码:

.OwO-logo{float:left;cursor:pointer;font-weight:300;}
.OwO .OwO-body .OwO-items {overflow: auto;font-size: 0;text-align:left}
.OwO .OwO-body .OwO-items .OwO-item {padding: 5px 10px;display: inline-block;-webkit-transition: .3s;transition: .3s;cursor:pointer;}
.OwO .OwO-body .OwO-items .OwO-item img {height: 30px;box-shadow: none!important;}
.OwO .OwO-body .OwO-items .OwO-item:hover{transform:scale(1.3)}
.OwO.OwO-open>.OwO-body>.OwO-items{max-height:200px!important;margin:10px 0!important;padding:10px!important;transition: max-height .8s,margin .8s,padding .8s;}
img.emojii {width: auto;height: 32px;display: inline-block;vertical-align: text-bottom;}

JavaScript部分：

1.引入按钮JS

js 代码:

function OwO_show() {
    if ($(".OwO-items").css("max-height") == '0px') {
        $(".OwO").addClass("OwO-open");
    } else {
       $(".OwO").removeClass("OwO-open");
    }
}

2.引入核心JS

js 代码:

 Smilies = {
        dom: function(id) {
            return document.getElementById(id);
        },
        grin: function(tag) {
            tag = ' ' + tag + ' ';
            myField = this.dom("textarea");
            document.selection ? (myField.focus(), sel = document.selection.createRange(), sel.text = tag, myField.focus()) : this.insertTag(tag);
        },
        insertTag: function(tag) {
            myField = Smilies.dom("textarea");
            myField.selectionStart || myField.selectionStart == "0" ? (startPos = myField.selectionStart, endPos = myField.selectionEnd, cursorPos = startPos, myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length), cursorPos += tag.length, myField.focus(), myField.selectionStart = cursorPos, myField.selectionEnd = cursorPos) : (myField.value += tag, myField.focus());
        }
    }

上传表情包

将下载好的表情包上传到使用的主题文件夹下，即可成功。

附件：OwO表情包

感谢：浅夏大佬提供的教程