前言
这几天一直在群里和几个基友研究怎样给Typecho
添加自定义的表情包,在网上找了一些教程也是不全或者根本没用,刚好今天一位大佬出现在群内给我们提供了些教程解决了困扰我们的问题,不过目前还是有个问题在困扰着我,就是表情输出的大小目前还是修改不好,希望有能力的大佬可以在下方留言指导一下下面开始教程。
教程
首先我们在主题目录找到owo
目录,也就是表情包存放的位置,一般都是在/主题/assets/
目录下,每个主题都有所不同,自行查找下,打开之后我们可以看到以下几个文件(主题不同文件或许不同,大致都是一样的)
等下我们用到的有一下几个文件biaoqing
存放表情包的地方OwO.css
表情包预览大小OwO.json
调用表情包输出
我们打开biaoqing
文件夹,在创建个我们需要存放表情包的文件夹,我这里新增加了个2233娘表情包,所以我就创建了个niang
文件夹
接下来我们到OwO.json
文件里面按照之前的格式照抄一下,调用一下我们上传的表情包
"2233娘": {
"type": "image",
"container": [
{
"icon": "/assets/owo/biaoqing/niang/2233E5A898_E7ACACE4B880.png",/*表情包路径*/
"data": ":*(第一)",/*表情输出的数据名,其中*符号待会要用到,划重点。*/
"css": "niang",/*css调用*/
"text": "第一"/*表情预览名*/
},
这个时候我们就可以看到前台已经有了新的表情包了,但是别高兴太早,还要调用下函数才可以实现表情包输出
我们打开主题下的libs
文件夹,先打开Shortcode.php
文件找到owo表情解析
大概在340行左右,然后在下方插入代码
$content = preg_replace_callback('/\:\表情包符号\(\s*(.*?)\s*\)/is',/*不知道是啥的看上面,可以自定义,自定义后别忘记修改表情输出的数据名符号*/
array('feature', 'parse表情包文件夹名称BiaoqingCallback'), $content);/*英文且首字母要大写比如niang就写Niang*/
再打开feature.php
文件找到表情解析
按照格式在下方插入代码
/**
* 表情包名字回调函数
*
* @return string
*/
public static function parse表情包名字BiaoqingCallback($match): string/*英文且首字母大小*/
{
return '<img class="biaoqing 表情包名字" src="' . ('' . customcdn . 'owo/biaoqing/表情包名字/') . str_replace('%', '', urlencode($match[1])) . '.png" >';
}
补充
打开主题目录/assets/css/style.css
文件,在最底部添加如下代码,请根据实际情况自行修改
.OwO .biaoqing.表情包名字 {
margin-bottom: -0.125rem;
min-height: 3.5rem;
height: 1em;
}
/*修改表情框内表情预览大小,根据实际情况自行测试修改*/
.comment_excerpt img.biaoqing.表情包名字, .cross-excerpt img.biaoqing.表情包名字 {
margin-bottom: -0.125rem;
min-height: 2.5rem;
height: 1em;
}
/*修改输出的表情大小,根据实际情况自行测试修改*/
.OwO .OwO-body .OwO-bar {
width: 100%;
height: 30px;
border-top: 2px solid #ddd;
background: #fff;
border-radius: 0 0 4px 4px;
white-space: nowrap;
overflow-y: hidden;
}
/*优化因添加新表情包导致的表情框溢出问题,根据实际情况自行测试修改*/
至此我们的表情包就添加完成了
你好,你好我的头发是。。。。。。
不错不错,我喜欢看 www.jiwenlaw.com
不错不错,我喜欢看 https://www.237fa.com/
json里,那个路径输出的就是那个assets........那串代码,没有输出图片
自行添加图片,可以看我另一篇文章,包含有表情包图片
是我留言的那篇吗