name - artist
00:00

      Typecho引入OwO

      将超可爱的OwO表情包捉上Typecho

      请注意,本文编写于 95 天前,最后修改于 88 天前,其中某些信息可能已经过时。

      写一篇博文如果单单只是文字,就会显得很枯燥,而通过插入图片、视频、音乐、表情,我们可以使文章更加生动有趣。
      这里给大家附上如何免插件地向Typecho手动加入OwO表情豪华套餐(如需复制,请采用Ctrl + C

      超萌的OwO表情包
      超萌的OwO表情包

      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表情包
      感谢:浅夏大佬提供的教程

      - The End -

      添加新评论  

      本站已启用评论投票,被点踩过多的评论将自动折叠,请多回复有意义的评论。

      已有 6 条评论

      哇哦,使用,非常感谢!!!

      测试评论

      话说wordpress能这么干么,正想着给评论加个表情来着

      Sean Sean 回复 @clatterrr
      0 0

      可以的,只不过PHP解析和评论文件的修改不同。