『原创』『表情』为Joe主题增加QQ,Bilibili,酷安,贴吧,微博表情包
Brains - 灵感乌托邦

『原创』『表情』为Joe主题增加QQ,Bilibili,酷安,贴吧,微博表情包

六六丶
2021-12-28 / 44 评论 / 5,928 阅读 / 正在检测是否收录...
广告

前言

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

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

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

成果展示

y194sTpBiV5XDuW.gif

后台编辑器预览

教程开始

一、添加表情过滤

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

拿到一个表情包后,在 windows 系统中下这样操作,在表情包文件夹内创建一个 文本文档

62d7c0b485776.png

然后双击打开,使用以下命令生成该文件夹文件(图片)列表:

dir /b > list.txt 

62d7c119ec69e.png

保存后将文件后缀改为 bat ,然后再双击打开,就会生成一个 list.txt 文件

62d7c1d2ab196.png

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

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

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

image.png

image.png

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

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

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

二、配置 OwO.json

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

在里面添加(请自行删除代码中的 删除 字符)


"表情": [ { "icon": "assets/owo/QQ/E788B1E4BDA0.gif", "data": ":删除$(爱你)" }, { "icon": "assets/owo/QQ/E788B1E5BF83.gif", "data": ":删除$(爱心)" }, { "icon": "assets/owo/QQ/E582B2E685A2.gif", "data": ":删除$(傲慢)" }, { "icon": "assets/owo/QQ/E799BDE79CBC.gif", "data": ":删除$(白眼)" }, { "icon": "assets/owo/QQ/E6A392E6A392E7B396.gif", "data": ":删除$(棒棒糖)" }, { "icon": "assets/owo/QQ/E78886E7AD8B.gif", "data": ":删除$(爆筋)" }, { "icon": "assets/owo/QQ/E68AB1E68BB3.gif", "data": ":删除$(抱拳)" }, { "icon": "assets/owo/QQ/E98499E8A786.gif", "data": ":删除$(鄙视)" }, { "icon": "assets/owo/QQ/E997ADE598B4.gif", "data": ":删除$(闭嘴)" }, { "icon": "assets/owo/QQ/E693A6E6B197.gif", "data": ":删除$(擦汗)" }, { "icon": "assets/owo/QQ/E88F9CE58880.gif", "data": ":删除$(菜刀)" }, { "icon": "assets/owo/QQ/E59083.gif", "data": ":删除$(吃)" }, { "icon": "assets/owo/QQ/E591B2E78999.gif", "data": ":删除$(呲牙)" }, { "icon": "assets/owo/QQ/E5A4A7E585B5.gif", "data": ":删除$(大兵)" }, { "icon": "assets/owo/QQ/E5A4A7E593AD.gif", "data": ":删除$(大哭)" }, { "icon": "assets/owo/QQ/E89B8B.gif", "data": ":删除$(蛋)" }, { "icon": "assets/owo/QQ/E5BE97E6848F.gif", "data": ":删除$(得意)" }, { "icon": "assets/owo/QQ/doge.gif", "data": ":删除$(doge)" }, { "icon": "assets/owo/QQ/E58F91E59186.gif", "data": ":删除$(发呆)" }, { "icon": "assets/owo/QQ/E58F91E68092.gif", "data": ":删除$(发怒)" }, { "icon": "assets/owo/QQ/E5A58BE69697.gif", "data": ":删除$(奋斗)" }, { "icon": "assets/owo/QQ/E5B0B4E5B0AC.gif", "data": ":删除$(尴尬)" }, { "icon": "assets/owo/QQ/E58BBEE5BC95.gif", "data": ":删除$(勾引)" }, { "icon": "assets/owo/QQ/E9BC93E68E8C.gif", "data": ":删除$(鼓掌)" }, { "icon": "assets/owo/QQ/E5AEB3E7BE9E.gif", "data": ":删除$(害羞)" }, { "icon": "assets/owo/QQ/E686A8E7AC91.gif", "data": ":删除$(憨笑)" }, { "icon": "assets/owo/QQ/E5A5BDE6A392.gif", "data": ":删除$(好棒)" }, { "icon": "assets/owo/QQ/E59388E6ACA0.gif", "data": ":删除$(哈欠)" }, { "icon": "assets/owo/QQ/E5969DE5BDA9.gif", "data": ":删除$(喝彩)" }, { "icon": "assets/owo/QQ/E6B2B3E89FB9.gif", "data": ":删除$(河蟹)" }, { "icon": "assets/owo/QQ/E59D8FE7AC91.gif", "data": ":删除$(坏笑)" }, { "icon": "assets/owo/QQ/E9A5A5E9A5BF.gif", "data": ":删除$(饥饿)" }, { "icon": "assets/owo/QQ/E6838AE68190.gif", "data": ":删除$(惊恐)" }, { "icon": "assets/owo/QQ/E6838AE5969C.gif", "data": ":删除$(惊喜)" }, { "icon": "assets/owo/QQ/E6838AE8AEB6.gif", "data": ":删除$(惊讶)" }, { "icon": "assets/owo/QQ/E88F8AE88AB1.gif", "data": ":删除$(菊花)" }, { "icon": "assets/owo/QQ/E58FAFE788B1.gif", "data": ":删除$(可爱)" }, { "icon": "assets/owo/QQ/E58FAFE6809C.gif", "data": ":删除$(可怜)" }, { "icon": "assets/owo/QQ/E68AA0E9BCBB.gif", "data": ":删除$(抠鼻)" }, { "icon": "assets/owo/QQ/E985B7.gif", "data": ":删除$(酷)" }, { "icon": "assets/owo/QQ/E5BFABE593ADE4BA86.gif", "data": ":删除$(快哭了)" }, { "icon": "assets/owo/QQ/E9AAB7E9AB85.gif", "data": ":删除$(骷髅)" }, { "icon": "assets/owo/QQ/E59BB0.gif", "data": ":删除$(困)" }, { "icon": "assets/owo/QQ/E7AFAEE79083.gif", "data": ":删除$(篮球)" }, { "icon": "assets/owo/QQ/E6B3AAE5A594.gif", "data": ":删除$(泪奔)" }, { "icon": "assets/owo/QQ/E586B7E6B197.gif", "data": ":删除$(冷汗)" }, { "icon": "assets/owo/QQ/E6B581E6B197.gif", "data": ":删除$(流汗)" }, { "icon": "assets/owo/QQ/E6B581E6B3AA.gif", "data": ":删除$(流泪)" }, { "icon": "assets/owo/QQ/E99ABEE8BF87.gif", "data": ":删除$(难过)" }, { "icon": "assets/owo/QQ/OK.gif", "data": ":删除$(OK)" }, { "icon": "assets/owo/QQ/E596B7E8A180.gif", "data": ":删除$(喷血)" }, { "icon": "assets/owo/QQ/E69287E598B4.gif", "data": ":删除$(撇嘴)" }, { "icon": "assets/owo/QQ/E595A4E98592.gif", "data": ":删除$(啤酒)" }, { "icon": "assets/owo/QQ/E5BCBA.gif", "data": ":删除$(强)" }, { "icon": "assets/owo/QQ/E695B2E68993.gif", "data": ":删除$(敲打)" }, { "icon": "assets/owo/QQ/E4BAB2E4BAB2.gif", "data": ":删除$(亲亲)" }, { "icon": "assets/owo/QQ/E7B397E5A4A7E4BA86.gif", "data": ":删除$(糗大了)" }, { "icon": "assets/owo/QQ/E68BB3E5A4B4.gif", "data": ":删除$(拳头)" }, { "icon": "assets/owo/QQ/E9AA9AE689B0.gif", "data": ":删除$(骚扰)" }, { "icon": "assets/owo/QQ/E889B2.gif", "data": ":删除$(色)" }, { "icon": "assets/owo/QQ/E8839CE588A9.gif", "data": ":删除$(胜利)" }, { "icon": "assets/owo/QQ/E6898BE69EAA.gif", "data": ":删除$(手枪)" }, { "icon": "assets/owo/QQ/E8A1B0.gif", "data": ":删除$(衰)" }, { "icon": "assets/owo/QQ/E79DA1.gif", "data": ":删除$(睡)" }, { "icon": "assets/owo/QQ/E8B083E79AAE.gif", "data": ":删除$(调皮)" }, { "icon": "assets/owo/QQ/E581B7E7AC91.gif", "data": ":删除$(偷笑)" }, { "icon": "assets/owo/QQ/E59090.gif", "data": ":删除$(吐)" }, { "icon": "assets/owo/QQ/E68998E885AE.gif", "data": ":删除$(托腮)" }, { "icon": "assets/owo/QQ/E5A794E5B188.gif", "data": ":删除$(委屈)" }, { "icon": "assets/owo/QQ/E5BEAEE7AC91.gif", "data": ":删除$(微笑)" }, { "icon": "assets/owo/QQ/E68FA1E6898B.gif", "data": ":删除$(握手)" }, { "icon": "assets/owo/QQ/E68891E69C80E7BE8E.gif", "data": ":删除$(我最美)" }, { "icon": "assets/owo/QQ/E697A0E5A588.gif", "data": ":删除$(无奈)" }, { "icon": "assets/owo/QQ/E59093.gif", "data": ":删除$(吓)" }, { "icon": "assets/owo/QQ/E5B08FE7BAA0E7BB93.gif", "data": ":删除$(小纠结)" }, { "icon": "assets/owo/QQ/E7AC91E593AD.gif", "data": ":删除$(笑哭)" }, { "icon": "assets/owo/QQ/E5B08FE6A0B7E584BF.gif", "data": ":删除$(小样儿)" }, { "icon": "assets/owo/QQ/E6969CE79CBCE7AC91.gif", "data": ":删除$(斜眼笑)" }, { "icon": "assets/owo/QQ/E8A5BFE7939C.gif", "data": ":删除$(西瓜)" }, { "icon": "assets/owo/QQ/E59898.gif", "data": ":删除$(嘘)" }, { "icon": "assets/owo/QQ/E7BE8AE9A9BC.gif", "data": ":删除$(羊驼)" }, { "icon": "assets/owo/QQ/E998B4E999A9.gif", "data": ":删除$(阴险)" }, { "icon": "assets/owo/QQ/E79691E997AE.gif", "data": ":删除$(疑问)" }, { "icon": "assets/owo/QQ/E58FB3E593BCE593BC.gif", "data": ":删除$(右哼哼)" }, { "icon": "assets/owo/QQ/E5B9BDE781B5.gif", "data": ":删除$(幽灵)" }, { "icon": "assets/owo/QQ/E69995.gif", "data": ":删除$(晕)" }, { "icon": "assets/owo/QQ/E5868DE8A781.gif", "data": ":删除$(再见)" }, { "icon": "assets/owo/QQ/E79CA8E79CBCE79D9B.gif", "data": ":删除$(眨眼睛)" }, { "icon": "assets/owo/QQ/E68A98E7A3A8.gif", "data": ":删除$(折磨)" }, { "icon": "assets/owo/QQ/E59292E9AA82.gif", "data": ":删除$(咒骂)" }, { "icon": "assets/owo/QQ/E68A93E78B82.gif", "data": ":删除$(抓狂)" }, { "icon": "assets/owo/QQ/E5B7A6E593BCE593BC.gif", "data": ":删除$(左哼哼)" } ], "BiliBili": [ { "icon": "assets/owo/bilibili/doge.gif", "data": ":删除#(doge)" }, { "icon": "assets/owo/bilibili/E4BAB2E4BAB2.gif", "data": ":删除#(亲亲)" }, { "icon": "assets/owo/bilibili/E581B7E7AC91.gif", "data": ":删除#(偷笑)" }, { "icon": "assets/owo/bilibili/E5868DE8A781.gif", "data": ":删除#(再见)" }, { "icon": "assets/owo/bilibili/E58F91E68092.gif", "data": ":删除#(发怒)" }, { "icon": "assets/owo/bilibili/E58F91E8B4A2.gif", "data": ":删除#(发财)" }, { "icon": "assets/owo/bilibili/E58FAFE788B1.gif", "data": ":删除#(可爱)" }, { "icon": "assets/owo/bilibili/E59090E8A180.gif", "data": ":删除#(吐血)" }, { "icon": "assets/owo/bilibili/E59186.gif", "data": ":删除#(呆)" }, { "icon": "assets/owo/bilibili/E59195E59090.gif", "data": ":删除#(呕吐)" }, { "icon": "assets/owo/bilibili/E59BB0.gif", "data": ":删除#(困)" }, { "icon": "assets/owo/bilibili/E59D8FE7AC91.gif", "data": ":删除#(坏笑)" }, { "icon": "assets/owo/bilibili/E5A4A7E4BDAC.gif", "data": ":删除#(大佬)" }, { "icon": "assets/owo/bilibili/E5A4A7E593AD.gif", "data": ":删除#(大哭)" }, { "icon": "assets/owo/bilibili/E5A794E5B188.gif", "data": ":删除#(委屈)" }, { "icon": "assets/owo/bilibili/E5AEB3E7BE9E.gif", "data": ":删除#(害羞)" }, { "icon": "assets/owo/bilibili/E5B0B4E5B0AC.gif", "data": ":删除#(尴尬)" }, { "icon": "assets/owo/bilibili/E5BEAEE7AC91.gif", "data": ":删除#(微笑)" }, { "icon": "assets/owo/bilibili/E6809DE88083.gif", "data": ":删除#(思考)" }, { "icon": "assets/owo/bilibili/E6838AE59093.gif", "data": ":删除#(惊吓)" }, { "icon": "assets/owo/bilibili/E68993E884B8.gif", "data": ":删除#(打脸)" }, { "icon": "assets/owo/bilibili/E68A93E78B82.gif", "data": ":删除#(抓狂)" }, { "icon": "assets/owo/bilibili/E68AA0E9BCBBE5AD90.gif", "data": ":删除#(抠鼻子)" }, { "icon": "assets/owo/bilibili/E6969CE79CBCE7AC91.gif", "data": ":删除#(斜眼笑)" }, { "icon": "assets/owo/bilibili/E697A0E5A588.gif", "data": ":删除#(无奈)" }, { "icon": "assets/owo/bilibili/E69995.gif", "data": ":删除#(晕)" }, { "icon": "assets/owo/bilibili/E6B581E6B197.gif", "data": ":删除#(流汗)" }, { "icon": "assets/owo/bilibili/E6B581E9BCBBE8A180.gif", "data": ":删除#(流鼻血)" }, { "icon": "assets/owo/bilibili/E782B9E8B59E.gif", "data": ":删除#(点赞)" }, { "icon": "assets/owo/bilibili/E7949FE6B094.gif", "data": ":删除#(生气)" }, { "icon": "assets/owo/bilibili/E7949FE79785.gif", "data": ":删除#(生病)" }, { "icon": "assets/owo/bilibili/E79691E997AE.gif", "data": ":删除#(疑问)" }, { "icon": "assets/owo/bilibili/E799BDE79CBC.gif", "data": ":删除#(白眼)" }, { "icon": "assets/owo/bilibili/E79DA1E79D80.gif", "data": ":删除#(睡着)" }, { "icon": "assets/owo/bilibili/E7AC91E593AD.gif", "data": ":删除#(笑哭)" }, { "icon": "assets/owo/bilibili/E885BCE88586.gif", "data": ":删除#(腼腆)" }, { "icon": "assets/owo/bilibili/E889B2.gif", "data": ":删除#(色)" }, { "icon": "assets/owo/bilibili/E8B083E79AAE.gif", "data": ":删除#(调皮)" }, { "icon": "assets/owo/bilibili/E98499E8A786.gif", "data": ":删除#(鄙视)" }, { "icon": "assets/owo/bilibili/E997ADE598B4.gif", "data": ":删除#(闭嘴)" }, { "icon": "assets/owo/bilibili/E99ABEE8BF87.gif", "data": ":删除#(难过)" }, { "icon": "assets/owo/bilibili/E9A68B.gif", "data": ":删除#(馋)" }, { "icon": "assets/owo/bilibili/E9BB91E4BABAE997AEE58FB7.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<

230
打赏
gzh

评论 (44)

取消
  1. 头像
    萨血
    Windows 10 · Google Chrome

    时光是见证与检测一切成败的机器,凡膨胀欲望者,必定消失,那些保持欲望者,总能走到最后。

    回复 待审 垃圾
  2. 头像
    wuqramy
    Windows 10 · Google Chrome

    我也要AK IOI!

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

      AK?什么AK?我可没有AK,你可别乱说QQ

      回复 待审 垃圾
  3. 头像
    易航
    Windows 10 · Google Chrome

    必须支持QQ

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

      感谢支持QQ

      回复 待审 垃圾
  4. 头像
    duzhuo
    Windows 10 · Google Chrome

    我也想当搬运工QQ

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

      搬,可劲儿搬

      回复 待审 垃圾
  5. 头像
    上官
    Windows 7 · Google Chrome

    代码能也附上吗 我不想自己动手,只想做个复制粘贴的搬运工表情

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

      附上代码了,快来复制吧QQ

      回复 待审 垃圾
      1. 头像
        上官
        Windows 7 · Google Chrome
        @ 六六丶

        我网站发表的表情添加新表情,评论输出后不显示图片 只会显示表情名字 比如这样的: & ( 鼓 掌 ) 这种怎么弄 (我这里评论用空格隔开了 不然会变成表情)

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

    画图

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

    如果能够重生的话,我想,我想成为水母。想成为只是在海里自QQ由地摇摇摆摆的水母。

    回复 待审 垃圾
  8. 头像
    hygge
    Windows 10 · Google Chrome

    这个预录功能坏掉了

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

      明明只要打开门,明亮的世界就等在外头了啊
      什么预录功能?语录功能吗?我这里还是好的呢QQ

      回复 待审 垃圾
  9. 头像
    墨客
    Windows 10 · QQ Browser

    额,有点懵 第一步就懵了

    回复 待审 垃圾
  10. 头像
    清泓
    Windows 10 · Google Chrome

    QQ

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

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

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

    感谢分享QQ

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

    精彩的

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

    拿走了

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

    站长你的表情添加不上啊

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

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

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

      可能又出bug了23333

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

    我竟然上榜了

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

      没错,就是你小电视

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

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

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

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

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

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

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

    谢谢分享QQ

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

    nice表情

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

    好喜欢阿鲁表情包

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

      Joe主题自带哦,如果需要的话,我可以分享图包出来哦!表情

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

        想要表情,我用的zibll主题,没有这个表情包表情

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

          已更新,刷新即可看到表情

          回复 待审 垃圾
文章目录