wmSafe致力于互联网资源
道可道,非恒道,名可名,非恒名

【typecho】typecho后台编辑器新增自定义(OwO)表情包,全网唯一,适配所有主题

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

前言

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

在后台引用OwO核心

【typecho】typecho后台编辑器新增自定义(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表情包核心

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

【typecho】typecho后台编辑器新增自定义(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表情包教程:点击直达

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

【typecho】typecho后台编辑器新增自定义(OwO)表情包,全网唯一,适配所有主题
在write-post.php中找到textarea标签,在class后面加入OwO的绑定class:“OwO-textarea”即可,此时可以进后台添加新文章里看到效果了!
【typecho】typecho后台编辑器新增自定义(OwO)表情包,全网唯一,适配所有主题

添加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表情包教程:点击直达

适配文章正则输出表情包

【typecho】typecho后台编辑器新增自定义(OwO)表情包,全网唯一,适配所有主题
这里根据我自己主题的post.php文件修改示例如下
【typecho】typecho后台编辑器新增自定义(OwO)表情包,全网唯一,适配所有主题
其中$content = ParseReply($content);就是关键代码了,这里其实就是调用了一个方法,将匹配到的表情包文字(原始文本数据)替换成img表情显示出来,这里的ParseReply就是我们刚刚在functions.php加的自定义方法了!其中我其实用了两层php正则替换,第一层是将所有的图片加上幻灯片的class适配幻灯片js插件,第二层才是替换表情包的方法ParseReply,其实你们的也一样的如果没有幻灯片用第二层就行
【typecho】typecho后台编辑器新增自定义(OwO)表情包,全网唯一,适配所有主题

效果

【typecho】typecho后台编辑器新增自定义(OwO)表情包,全网唯一,适配所有主题

最后

实在还有不懂的联系QQ1845440070

感谢您的阅读本文章
本原创文章未经允许不得转载 | 若要转载请注明出处,否则将承担相应的法律责任!
本文链接: https://blog.wm404.com/2022/10/31/c2275525.html
赞赏排名 赞赏支持

评论

  • captcha
暂无评论,要不来一发?

您的关注就是我们最大的支持

联系我们 关于我们