📫️
山川行貉 人生需要不断感动，才能守住那些始终干净的东西。

网站已运行 6 年 357 天 10 小时 29 分

Powered by Typecho & Sunny

2 online

Title

Typecho 博客引入 OwO 表情包

Duseus

·

Article
#Typecho　#代码　#教程　#魔改　#表情
⚠️ 本文最后更新于2023年12月17日，已经过了370天没有更新，若内容或图片失效，请留言反馈

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

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

超萌的OwO表情包

PHP解析

  • 第一步，将解析代码引入到主题functions.php内
php 代码:
//表情解析
function emotionContent($content,$url){
    $fcontent = preg_replace('#\@\((.*?)\)#','<img src="'. $url .'/OwO/$1.png">',$content);
}

修改评论文件

  • 然后将评论文件中的（一般是comments.php文件）
php 代码:
 <?php $comments->content(); ?>

修改为

php 代码:
<?php
  $cos = preg_replace('#\@\((.*?)\)#','<img 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: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

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表情包

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

现在已有 4 条评论，0 人点赞
Author
作者
Duseus
Typecho 博客引入 OwO 表情包
网站实现 PWA
评论0
入手了惠普笔记本
评论0
说说：#1702817881
评论5
Comment
发表
  1. 头像
    @
    上官
    文章输出的是图片格式，不是表情格式 怎么弄
    · Windows · Chrome
    1. 头像
      @
      👑 Duseus ＠上官
      可以参考github上DIYGOD的OWO
      · Windows · 火狐浏览器
  2. 头像
    @
    上官
    他那是表情评论，我表情评论能输出表情 有class 就文章里面的表情owo输出的是文章图片格式 没有class属性 不知道为啥
    · Windows · Chrome
  3. 头像
    @
    vsjcpeknea
    Muchas gracias. ?Como puedo iniciar sesion?
    · Windows · Chrome
搜　索
博主