2019.05.15 | 网站相关 | 47436 浏览 | 24 赞 | 34 条评论


请注意,本文编写于 2690 天前,最后修改于 2665 天前,其中某些信息可能已经过时。
AI 摘要:本文介绍了如何为Typecho博客添加表情评论,包括QQ、Bilibili、酷安、贴吧和微博表情包。首先,将表情包文件上传到自己的服务器或对象存储中,然后配置OwO.json文件,将对应的icon和text列表按照相应形式展开成json文件。最后,提供五套表情包资源的下载链接。希望这篇文章能帮助大家为博客添加时尚的表情评论。展开

在 上篇文章 中我们介绍了如何部署 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://www.idealclover.top/archives/562/

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

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

24

已有 34 条评论


取消回复
  1. Troy
    Troy 回复

    博主好!感谢分享这么详细的 OwO 表情包配置教程,用 Excel 批量生成 JSON 简直太实用了。我在按照你的方法给 Typecho 博客配置自定义表情和一些外部图片解析时,遇到了和上面评论里类似的问题:部分移动端浏览器下,外部引入的图片或自适应元素会被过滤掉 width 属性。我在浏览海外的一些含有动态内嵌元素的站点,比如 https://guiademeridianbetperu.com/ 的某些自适应布局结构时,发现他们的前端媒体流处理得很平滑。请问如果想在 OwO.json 或者 Typecho 的 comment-filter 中彻底解决这种外部图片或特定标签属性被自动过滤/变形的问题 civilization,你是建议直接改 var/Widget/Feedback.php 里的白名单,还是在 CSS 里写死长宽控制呢?谢谢!

  2. 🦖🦖🦖
    🦖🦖🦖 回复

    顶顶

  3. MoXiify
    MoXiify 回复

    2024直接让ai对着list填

  4. 小黄
    小黄 回复

  5. anonymous
    anonymous 回复

  6. 明石
    明石 回复

    哈哈

  7. mirco
    mirco 回复

    叮

  8. Sunset
    Sunset 回复

    请问一下typecho评论好像把 的type和width属性过滤掉了,这个在哪里修改呢,查了半天没找到。
    而且我后台设置没有允许标签,但是也能显示图片。

    1. wuyiheng
      wuyiheng 回复
      1. 检查一下在后台-设置-评论的“允许使用的HTML标签和属性”是否添加:
      2. 在json的icon值内填入:"icon": "" 注意32要加引号和并转义
  9. liang
    liang 回复

    我的表情好大怎么办

    1. idealclover
      idealclover 回复

      没加限制吧,我限制了 width="32"

      1. liang
        liang 回复

        在哪个css文件加,哪个位置啊,博主😂

        1. idealclover
          idealclover 回复

          在 OwO.json 里面加~

  10. luis404
    luis404 回复

    测试

🤔关于我
翠翠 idealclover
Product Manager @ByteDance
南京大学 2016 级本科生
了解更多
🏠关于博客
基于 Typecho 博客框架
使用个人的 clover clover 主题