Typecho添加自定义表情包

折腾 , 代码
800 3

前言

这几天一直在群里和几个基友研究怎样给Typecho添加自定义的表情包,在网上找了一些教程也是不全或者根本没用,刚好今天一位大佬出现在群内给我们提供了些教程解决了困扰我们的问题,不过目前还是有个问题在困扰着我,就是表情输出的大小目前还是修改不好,希望有能力的大佬可以在下方留言指导一下下面开始教程。

教程

首先我们在主题目录找到owo目录,也就是表情包存放的位置,一般都是在/主题/assets/目录下,每个主题都有所不同,自行查找下,打开之后我们可以看到以下几个文件(主题不同文件或许不同,大致都是一样的)

QQ截图20220425235208.png

等下我们用到的有一下几个文件
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;
}
/*优化因添加新表情包导致的表情框溢出问题,根据实际情况自行测试修改*/

至此我们的表情包就添加完成了

最后更新 2022-04-26
评论 ( 3 )
OωO
隐私评论
  1. 谢辞.

    json里,那个路径输出的就是那个assets........那串代码,没有输出图片

    8个月前福建省莆田市仙游县回复
    1. @谢辞.

      自行添加图片,可以看我另一篇文章,包含有表情包图片

      8个月前安徽省滁州市回复
      1. 谢辞.
        @白鸽

        :$(2233娘_吐魂)是我留言的那篇吗

        8个月前福建省莆田市仙游县回复