『原创』『表情』为Joe主题增加QQ,Bilibili,酷安,贴吧,微博表情包
Brains - 灵感乌托邦
『原创』『表情』为Joe主题增加QQ,Bilibili,酷安,贴吧,微博表情包
六六丶
2021-12-28 / 29 评论 / 3,475 阅读 / 正在检测是否收录...
广告
温馨提示:
本文最后更新于2022年04月06日,已超过43天没有更新,若内容或图片失效,请留言反馈。

前言

最近失恋了,就一直在学习前端基础,所以个人博客都好久没更新了

偶然在翠翠的博客看到给typecho添加表情包的教程,所以自己也添加了两组表情包

但是在添加途中遇到了一个问题,所以将自己遇到的坑记录下来

成果展示

y194sTpBiV5XDuW.gif

后台编辑器预览

教程开始

一、添加表情过滤

因为Joe主题之前被人恶意注入过xss,因此主题作者添加了关键词屏蔽,所以还要进行过滤

拿到一个表情包后,在 windows 系统中使用以下命令生成该文件夹文件(图片)列表:

dir 目录 > list.txt 

于是生成的 list.txt 就包含了改目录下的全部文件名,就可以很方便的批处理。

关键词拼串可以使用Excel进行,直接使用以下代码就行

=A2&$F$2&A3
=E2&$F$2&A4

image.png

image.png

然后打开 Joe/core/parse.php 文件,找到表情过滤

在下面添加你表情的关键词与表情地址

image.png

这里有一个坑 ,因为原作者引用表情包地址是用的 urlencode() 函数,将文字转换为UrlEncode编码的字符

二、配置 OwO.json

打开 Joe/assets/json 下的 joe.owo.json 文件

在里面添加

"小电视": [
    { "icon": "assets/owo/bilibili/doge.gif", "data": "小电视" },
    { "icon": "assets/owo/bilibili/E9BC93E68E8C.gif", "data": "小电视" }
    ......
  ]

将上文中转码后的名称列成 Excel 表格,并在某单元格(比如图例中的 G2 ~ G5)输入前缀

=$G$2&C2&$G$3&$G$4&A2&$G$5

然后对于每一行输入公式进行字符串拼接

image.png

之后可以将表格复制到 Excel 转 json 中获取相应的 json 文件,就不需要一个个做啦 ww

做完后将其复制到 joe.owo.json 就好了

image.png

注:我这里是将JSON格式化后的结构,建议格式后进行添加,不容易出错,而且看着不会眼睛疼( 压缩代码太伤眼了

三、上传表情包文件

将重命名后的表情包文件上传到 Joe/assets/owo 文件夹中,当然你也可以上传到其他地方,只要能访问到就行

然后在打开网站查看效果就好啦~

表情包资源

当然其实这篇文章最重要的就是五套表情包的资源啦,资源的链接在下面,需要的话就拿去哦~>v<

222
打赏

评论 (29)

取消
  1. 头像
    清泓
    Windows 10 · Google Chrome

    QQ

    回复 待审 垃圾
  2. 头像
    nb
    Android · Google Chrome

    人生就是一个挣扎的过程。

    回复 待审 垃圾
  3. 头像
    nb
    Android · Google Chrome

    感谢分享QQ

    回复 待审 垃圾
  4. 头像
    YakitoVN
    Android Pie · Google Chrome

    精彩的

    回复 待审 垃圾
  5. 头像
    23swd
    Windows 10 · Google Chrome

    拿走了

    回复 待审 垃圾
  6. 头像
    kingkare
    Windows 7 · Google Chrome

    站长你的表情添加不上啊

    回复 待审 垃圾
    1. 头像
      六六丶 作者
      Windows 10 · Google Chrome
      @ kingkare

      修复了,原因竟然是插件引用了低版本的jQueryQQQQ

      回复 待审 垃圾
    2. 头像
      六六丶 作者
      Android · Google Chrome
      @ kingkare

      可能又出bug了23333

      回复 待审 垃圾
  7. 头像
    kingkare
    Windows 7 · Google Chrome

    我竟然上榜了

    回复 待审 垃圾
    1. 头像
      六六丶 作者
      Windows 10 · Google Chrome
      @ kingkare

      没错,就是你小电视

      回复 待审 垃圾
  8. 头像
    lala
    Android · Google Chrome

    来我们加个友情链接呗表情

    回复 待审 垃圾
    1. 头像
      六六丶 作者
      Android · Google Chrome
      @ lala

      当然可以,在友人帐留下你的信息,我会添加的

      回复 待审 垃圾
      1. 头像
        lala
        Android · Google Chrome
        @ 六六丶

        https://www.cnnc404.com/friendship
        你可以在这儿去填一下信息哦QQ

        回复 待审 垃圾
  9. 头像
    发发斯蒂芬搜索
    Windows 10 · Google Chrome

    谢谢分享QQ

    回复 待审 垃圾
  10. 头像
    lala
    Android · Google Chrome

    nice表情

    回复 待审 垃圾