Typecho 博客引入 OwO 表情包

2019-08-11

Typecho 博客引入 OwO 表情包

提醒：本文编写于1106天前，最后编辑于335天前，部分内容可能过时，请您注意。

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

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

PHP解析

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

//表情解析
function emotionContent($content,$url){
    $fcontent = preg_replace('#\@\((.*?)\)#','<img src="'. $url .'/OwO/$1.png">',$content);
}

修改评论文件

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

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

修改为

<?php

  $cos = preg_replace('#\@\((.*?)\)#','<img src="'.$GLOBALS['theme_url'].'/OwO/$1.png">',$comments->content);

   echo $cos;

?>

将评论文件顶部的

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

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

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

 $GLOBALS['theme_url'] = $this->options->themeUrl;

?>

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

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

添加PHP文件

新建OwO.php文件，一般情况下与functions.php，comments.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部分：

.OwO-logo{float:left;cursor:pointer;font-weight:600;}
.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;}

JavaScript部分：

1.引入按钮JS


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

2.引入核心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表情包

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

546

本文来自投稿，不代表本站立场，如若转载，请注明出处：https://typecho.firshare.cn/archives/75.html

免责声明：文章内容不代表本站立场，本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺，仅供读者参考，文章版权归原作者所有。避免网络欺诈，本站不倡导任何交易行为。如您私自与本站转载自公开互联网中的资讯内容中提及到的个人或平台产生交易，则需自行承担后果。本站在注明来源的前提下推荐原文至此，仅作为优良公众、公开信息分享阅读，不进行商业发布、发表及从事营利性活动。如本文内容影响到您的合法权益（内容、图片等），请及时联系本站，我们会及时删除处理。

Typecho 博客引入 OwO 表情包

PHP解析

修改评论文件

添加PHP文件

引入文件

上传表情包

相关推荐

Warning: Attempt to read property "ID" on null in解决办法

Typecho 二次开发：如何获取一个分类目录下的文章，并显示前十个

个人博客选择 WordPress 还是 Typecho 好？

typecho插件列表

作者信息

动态快讯

热门文章

标签TAG

# wordpress

# 激光雷达

# 网站教程

# 加密锁

# Java教程

# css教程

# html教程

# typecho

# apk加固

# 加壳工具

# VirboxLM

# SEO

# VirboxProtector

# 加密狗

您还未登录

登录体验更多功能

PHP解析

修改评论文件

添加PHP文件

引入文件

上传表情包

相关推荐

Warning: Attempt to read property "ID" on null in解决办法

Typecho 二次开发：如何获取一个分类目录下的文章，并显示前十个

个人博客选择 WordPress 还是 Typecho 好？

typecho插件列表

作者信息

动态快讯

热门文章

标签TAG

# wordpress

# 激光雷达

# 网站教程

# 加密锁

# Java教程

# css教程

# html教程

# typecho

# apk加固

# 加壳工具

# VirboxLM

# SEO

# VirboxProtector

# 加密狗