2019.05.15 | 网站相关 | 8 赞 | 18 条评论


请注意,本文编写于 451 天前,最后修改于 425 天前,其中某些信息可能已经过时。

上篇文章 中我们介绍了如何部署 OwO,但是在 demo 中图片也已经失效了,原有的表情也不太跟得上时代潮流了,于是我们在这期介绍一下该如何该如何为 OwO 添加符合潮流的表情,以及表情的资源。

目前大家用的比较多的是 bilibili 的小电视小表情,新版的 QQ 小表情,酷安表情包,贴吧表情包和微博表情包,在文章的最后也会附上在网上千辛万苦弄来这五套表情的 gif 包(快来拿鸭 QAQ 好不容易找到的)。

还是那句话!效果怎样的话在下面评论一下就知道了鸭!>v<

上传表情包文件

把表情包文件都放在自己的服务器或者对象存储中,提供一个可以访问的外部网址。

配置 OwO.json

在官方文档中 OwO.json 的格式类似下面这样 参考

...
"图片表情": {
        "type": "image",
        "container": [
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/face1.jpg\">",
                "text": "face1"
            },
            {
                "icon": "<img src=\"//o5mvhz1ad.qnssl.com/face2.gif\">",
                "text": "face2"
            },
        ]
    }
...

将对应的 icon 与 text 列表按照相应形式展成 json 文件就可以啦。

具体而言,傻翠是这样做的:

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

dir 目录 > list.txt

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

下一步将这些文件名提取出来列成 Excel 表格,并在某单元格(比如图例中的 H6和H7)输入前缀,然后对于每一行输入公式进行字符串拼接

=$H$6&A2&$H$7

就可以得到类似如图的字符串拼接结果啦ww

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

最后 owo.json 做完后直接覆盖掉之前的 owo.json 然后再网站上查看效果就好啦~

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

希望可以帮到大家!>v<

本文链接:https://idealclover.top/archives/562/

本作品由 idealclover 采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可,转载请注明出处。

标签: 文章, 文件, 链接, 网站, owo, 表情, json, 字符, list

8

已有 18 条评论


  1. 45度的回忆
    45度的回忆 回复

    可以介绍下你的动图如何插入的吗?OwO好像只支持png?

    1. 45度的回忆
      45度的回忆 回复

      emmm
      解决了,鼠标移动到OwO表情一直在抖是怎么实现的啊?
      另外你酷安叫什么名字?我手机扫码总是不跳转。。

  2. 你的站牛逼
    你的站牛逼 回复

    cout<<"123";呵呵😜

  3. lawson
    lawson 回复

    您好我可以直接使用您编辑完成的OwO.json吗

    1. idealclover
      idealclover 回复

      emmm 最好不要

      用我的 json 的话图片加载的时候用的是我的 CDN

      然而我可能三天两头换一次图片地址

      看一眼那个 json 就知道了

      1. lawson
        lawson 回复

        已经做过替换了OωO

        1. lawson
          lawson 回复

          看起来json内容没套cdn,比如
          https://image.idealclover.cn/blog/assets/OwO/Bilibili/坏笑.gif
          路径是在你的主站域名下,当我直接插入你的img就能使用了
          (☆ω☆)但是我有cdn没使用贵站的

          1. idealclover
            idealclover 回复

            啊这就是我的 CDN,绑定了自己的域名

  4. hhha
    hhha 回复

    1. idealclover
      idealclover 回复

      只发表情会被判垃圾2333
      我从垃圾箱里把你捞出来的

  5. X
    X 回复

    😊ི

  6. 第二
    第二 回复

    奇怪诶,我dir xx > list.txt 会出来这样子的格式

    目录: D:\blog表情包\酷安表情包\png表情
    

    Mode LastWriteTime Length Name
    ---- ------------- ------ ----
    -a---- 2019/5/15 2:02 8300 coolapk_emotion_100_qqdoge.png
    -a---- 2019/5/15 2:02 6469 coolapk_emotion_1010.png
    -a---- 2019/5/15 2:02 8373 coolapk_emotion_1011.png
    -a---- 2019/5/15 2:02 10149 coolapk_emotion_1012.png
    -a---- 2019/5/15 2:02 8580 coolapk_emotion_1013.png
    -a---- 2019/5/15 2:02 7416 coolapk_emotion_1014.png
    -a---- 2019/5/15 2:02 5934 coolapk_emotion_1015.png
    -a---- 2019/5/15 2:02 8075 coolapk_emotion_1016.png
    -a---- 2019/5/15 2:02 8653 coolapk_emotion_1017.png
    -a---- 2019/5/15 2:02 8798 coolapk_emotion_1018.png
    -a---- 2019/5/15 2:02 9543 coolapk_emotion_1019.png
    -a---- 2019/5/15 2:02 5646 coolapk_emotion_101_pyjiaoyi.png
    -a---- 2019/5/15 2:02 10382 coolapk_emotion_1020.png
    -a---- 2019/5/15 2:02 6763 coolapk_emotion_1021.png
    -a---- 2019/5/15 2:02 9263 coolapk_emotion_102_fadai.png
    -a---- 2019/5/15 2:02 12921 coolapk_emotion_103_nb.png
    -a---- 2019/5/15 2:02 8121 coolapk_emotion_104.png
    -a---- 2019/5/15 2:02 7511 coolapk_emotion_105.png
    -a---- 2019/5/15 2:02 7197 coolapk_emotion_106.png

    1. idealclover
      idealclover 回复

      啊对的,我是把这个复制到编辑器里然后按 alt 把前面的东西批量去掉的

      1. 第二
        第二 回复


        啊。。我还是不会。。求教……学

        1. idealclover
          idealclover 回复

          唔就是在编辑器比如 nodepad++ 或者 word 或者 vscode 里按 alt 键在拖动可以让光标同时编辑多行,然后就可以批量把前面的去掉了

          1. 第二
            第二 回复

            我了个擦噢!还真的可以,新技能get

  7. 第二
    第二 回复

    第二

  8. idealclover
    idealclover 回复

    试验评论

🤔关于我
翠翠 idealclover
南京大学商学院 2016 级本科生
了解更多
🏠关于博客
基于 Typecho 博客框架
使用个人创作的 clover 主题
💾博客小程序
💸支持我