MENU

把B站客户端蛆音娘表情包扒出来了 Typecho博客增加自定义表情包

January 12, 2019 • Read: 7318 • 资源教程

看见客户端里面表情包很有趣就给扒出来了

为Typecho博客增加表情包,owo.json


1huaji.png

Mirages教程:
直接下载这个,然后将解压出的biaoqing文件夹放到主题目录下/usr中,然后为了使表情大小适中,添加自定义CSS即可:

img.biaoqing.quyin {
    margin-bottom: -.3125rem;
    min-height: 3.25rem;
    height: 1em;
}

Handsome教程:

点击下载

  • 如果您的网站也使用owo.json,那么此教程对您同样适用!
    首先将下载好的文件解压,然后放到handsome/usr/img/emotion

111.png

然后编辑handsome/usr文件夹中的OwO.json,在这个位置

QQ20190123-220040@2x.png

添加以下代码:

  "蛆音娘": {
    "name": "quyin",
    "type": "image",
    "container": [
      {
        "icon": "hematemesis",
        "text": "吐血"
      },
      {
        "icon": "1huaji",
        "text": "滑稽"
      },
      {
        "icon": "amazing",
        "text": "吃惊"
      },
      {
        "icon": "angry",
        "text": "生气"
      },
      {
        "icon": "cry",
        "text": "哭泣"
      },
      {
        "icon": "die",
        "text": "die"
      },
      {
        "icon": "doubt",
        "text": "疑问"
      },
      {
        "icon": "feizao",
        "text": "肥皂"
      },
      {
        "icon": "fue",
        "text": "扶额"
      },
      {
        "icon": "heng",
        "text": "哼"
      },
      {
        "icon": "laughing",
        "text": "大笑"
      },
      {
        "icon": "look",
        "text": "偷看"
      },
      {
        "icon": "maimeng",
        "text": "卖萌"
      },
      {
        "icon": "OK",
        "text": "OK!"
      },
      {
        "icon": "scare",
        "text": "吓死宝宝惹"
      },
      {
        "icon": "shakinghead",
        "text": "摇头"
      },
      {
        "icon": "sleep",
        "text": "睡觉"
      },
      {
        "icon": "speechless",
        "text": "无语"
      },
      {
        "icon": "watermaleon",
        "text": "吃瓜"
      },
      {
        "icon": "witty",
        "text": "机智"
      }
    ]
  },

保存上传后再找到/usr/themes/handsome/assets/css里的handsome.min.css把代码全选复制用在线工具美化后进行编辑,大约在第8879行,添加如下代码:

.emotion-quyin {
    width: 66px;
}

作用是限制图片的大小,不然输出出来图片尺寸太大,最终效果如下图所示:

Leave a Comment

15 Comments
  1. 烟尘 烟尘     Windows 7 /    Google Chrome

    嗯哼,typecho如何配置呢,还是没看懂@(滑稽)
    oh!表情咋换了

  2. 於季 於季     Windows 10 /    FireFox

    ::quyin:1huaji::不错,素材已用上,有2233娘的素材吗,也想加上去

  3. 三     Windows 10 /    Google Chrome

    好像只有评论能用呢,自己加到文章上不会识#(脸红)别

    1. 左岸 左岸     Windows 10 /    Google Chrome

      @三我这里是没问题的哎,可能是主题的问题吧,你用的什么主题呢#(脸红)

    2. 南知 南知     Windows 10 /    QQ浏览器

      @左岸大佬,我的是Mirages 主题。也不行哦文章上不会识别只有评论可以@(泪)有什么方法食用嘛?

    3. 左岸 左岸     Windows 10 /    Google Chrome

      @南知我这里文章是可以的啊,就是主题文档里给出的方式,你是用的什么方式添加的呢

  4. soapffz soapffz     Windows 10 /    FireFox

    左岸大佬,那么Mirages应该把图片放在哪里,编辑哪个js和css文件呢?::quyin:look::

    1. 左岸 左岸     MacOS /    Google Chrome

      @soapffz你好,json文件和图片我已经改好了,直接把文件解压出来放到 Mirages/usr/ 中即可。 点击下载

    2. 左岸 左岸     MacOS /    Google Chrome

      @soapffz再加个CSS img.biaoqing.quyin{margin-bottom:-.3125rem;min-height:3.25rem;height:1em}

  5. Funs Funs     Android /    Google Chrome

    这个很不错诶 ::quyin:OK::

    1. 左岸 左岸     MacOS /    Google Chrome

      @Funs嘿嘿,贼喜欢这个表情! ::quyin:1huaji::

  6. mua mua     Android Oreo /    Google Chrome

    你好博主,转化css这儿怎么弄啊?好长不能一键复制 下载下来的也是原来的css

    1. 左岸 左岸     MacOS /    Google Chrome

      @muacss直接 crtl+a 全选,复制到在线工具里美化之后,就可以很方便的编辑了,或者直接 crtl+f 搜索 .emotion-twemoji{width:18px} 在后面添加 .emotion-quyin{width:66px} 即可 ::quyin:witty::

  7. ktiro ktiro     Android Pie /    QQ浏览器

    所以说,要把图片放在哪个目录呢 ::quyin:1huaji::

    1. 左岸 左岸     Windows 10 /    Google Chrome

      @ktiro放到handsome/usr/img/emotion中,不好意思,忘记加了,现在加上了 ::quyin:OK::