AI摘要

本文介绍了作者对网站OwO表情包的大规模扩充，新增了包括QQ、抖音、哔哩哔哩、微博、贴吧、酷安等多个平台的热门表情。文章提供了详细的使用指南和表情预览，方便用户快速查找和使用喜欢的表情。所有表情图片均使用CDN路径前缀，以确保加载速度和稳定性。

此内容根据文章生成，仅用于文章内容的解释与总结

我对网站的 OwO 表情包进行了一次大规模的扩充，新增和整理了包括 QQ、抖音、哔哩哔哩、微博、贴吧、酷安 等多个平台在内的热门表情。

表情总览

阿鲁
推特
B 站
抖音
酷安
QQ
微博
贴吧
滑稽

表情包配置详情

QQ 


{
  "QQ": {
    "name": "QQ",
    "type": "image",
    "container": [
      {
        "icon": "aini",
        "text": "爱你"
      },
      {
        "icon": "aixin",
        "text": "爱心"
      },
      {
        "icon": "aoman",
        "text": "傲慢"
      },
      {
        "icon": "baiyan",
        "text": "白眼"
      },
      {
        "icon": "bangbangtang",
        "text": "棒棒糖"
      },
      {
        "icon": "baojin",
        "text": "抱紧"
      },
      {
        "icon": "baoquan",
        "text": "抱拳"
      },
      {
        "icon": "bishi",
        "text": "鄙视"
      },
      {
        "icon": "bizui",
        "text": "闭嘴"
      },
      {
        "icon": "cahan",
        "text": "擦汗"
      },
      {
        "icon": "daku",
        "text": "大哭"
      },
      {
        "icon": "doge",
        "text": "doge"
      }
      // ... 更多QQ表情
    ]
  }
}

.emotion-QQ{width: 35px; height: auto;}


抖音 


{
  "抖音": {
    "name": "douyin",
    "type": "image",
    "container": [
      {
        "icon": "1",
        "text": "抖音-1"
      },
      {
        "icon": "2",
        "text": "抖音-2"
      },
      {
        "icon": "3",
        "text": "抖音-3"
      },
      {
        "icon": "4",
        "text": "抖音-4"
      },
      {
        "icon": "5",
        "text": "抖音-5"
      },
      {
        "icon": "6",
        "text": "抖音-6"
      },
      {
        "icon": "7",
        "text": "抖音-7"
      },
      {
        "icon": "8",
        "text": "抖音-8"
      },
      {
        "icon": "9",
        "text": "抖音-9"
      },
      {
        "icon": "10",
        "text": "抖音-10"
      }
      // ... 更多抖音表情
    ]
  }
}

.emotion-douyin{width: 35px; height: auto;}


哔哩哔哩 


{
  "哔哩哔哩":{
    "name": "bilibili",
    "type": "image",
    "container":[
      {
        "icon": "baiyan",
        "text": "白眼"
      },
      {
        "icon": "bishi",
        "text": "鄙视"
      },
      {
        "icon": "bizui",
        "text": "闭嘴"
      },
      {
        "icon": "chan",
        "text": "馋"
      },
      {
        "icon": "daku",
        "text": "大哭"
      },
      {
        "icon": "dalao",
        "text": "大佬"
      },
      {
        "icon": "dalian",
        "text": "打脸"
      },
      {
        "icon": "dianzan",
        "text": "点赞"
      },
      {
        "icon": "doge",
        "text": "doge"
      },
      {
        "icon": "facai",
        "text": "发财"
      },
      {
        "icon": "fadai",
        "text": "发呆"
      },
      {
        "icon": "fanu",
        "text": "发怒"
      }
      // ... 更多B站表情
    ]
  }
}

.emotion-bilibili{width: 35px; height: auto;}


阿鲁 


{
  "阿鲁": {
    "name": "aru",
    "type": "image",
    "container": [
      {
        "icon": "despise",
        "text": "鄙视"
      },
      {
        "icon": "knife",
        "text": "插刀"
      },
      {
        "icon": "pouting",
        "text": "亲嘴"
      },
      {
        "icon": "shutup",
        "text": "闭嘴"
      },
      {
        "icon": "unhappy",
        "text": "不开心"
      },
      {
        "icon": "discovertruth",
        "text": "发现真相"
      },
      {
        "icon": "shit",
        "text": "便便"
      },
      {
        "icon": "distressed",
        "text": "烦恼"
      },
      {
        "icon": "shy",
        "text": "捂脸"
      },
      {
        "icon": "speechless",
        "text": "无语"
      },
      {
        "icon": "confuse",
        "text": "迷惑"
      },
      {
        "icon": "frown",
        "text": "皱眉"
      }
      // ... 更多阿鲁表情
    ]
  }
}

.emotion-aru{width: 35px; height: auto;}


推特 


{
  "推特": {
    "type": "image",
    "name": "twemoji",
    "container": [
      {
        "icon": "smile",
        "text": "微笑"
      },
      {
        "icon": "tongue",
        "text": "吐舌"
      },
      {
        "icon": "tilted",
        "text": "歪头"
      },
      {
        "icon": "tiaomei",
        "text": "挑眉"
      },
      {
        "icon": "shy",
        "text": "害羞"
      },
      {
        "icon": "sweat",
        "text": "流汗"
      },
      {
        "icon": "proud",
        "text": "得意"
      },
      {
        "icon": "uncomfort",
        "text": "难受"
      },
      {
        "icon": "smilecry",
        "text": "笑哭"
      },
      {
        "icon": "love",
        "text": "喜欢"
      },
      {
        "icon": "notalk",
        "text": "不说话"
      },
      {
        "icon": "happy",
        "text": "开心"
      }
      // ... 更多推特表情
    ]
  }
}

.emotion-twemoji{width: 35px; height: auto;}


滑稽 


{
  "滑稽": {
    "type": "image",
    "name": "funny",
    "container": [
      {
        "icon": "01",
        "text": "滑稽-1"
      },
      {
        "icon": "02",
        "text": "滑稽-2"
      },
      {
        "icon": "03",
        "text": "滑稽-3"
      },
      {
        "icon": "04",
        "text": "滑稽-4"
      },
      {
        "icon": "05",
        "text": "滑稽-5"
      },
      {
        "icon": "06",
        "text": "滑稽-6"
      },
      {
        "icon": "07",
        "text": "滑稽-7"
      },
      {
        "icon": "08",
        "text": "滑稽-8"
      },
      {
        "icon": "09",
        "text": "滑稽-9"
      },
      {
        "icon": "10",
        "text": "滑稽-10"
      },
      {
        "icon": "11",
        "text": "滑稽-11"
      },
      {
        "icon": "12",
        "text": "滑稽-12"
      }
      // ... 更多滑稽表情
    ]
  }
}

.emotion-funny{width: 35px; height: auto;}


微博 


{
  "微博": {
    "name": "weibo",
    "type": "image",
    "container": [
      {
        "icon": "weibo_dog1",
        "text": "微博-dog1"
      },
      {
        "icon": "weibo_dog11",
        "text": "微博-dog11"
      },
      {
        "icon": "weibo_dog12",
        "text": "微博-dog12"
      },
      {
        "icon": "weibo_dog3",
        "text": "微博-dog3"
      },
      {
        "icon": "d_aini",
        "text": "爱你"
      },
      {
        "icon": "d_aoteman",
        "text": "奥特曼"
      },
      {
        "icon": "d_bingbujiandan",
        "text": "并不简单"
      },
      {
        "icon": "d_bishi",
        "text": "鄙视"
      },
      {
        "icon": "d_dahaqi",
        "text": "打哈气"
      },
      {
        "icon": "d_xixi",
        "text": "嘻嘻"
      },
      {
        "icon": "f_geili",
        "text": "给力"
      },
      {
        "icon": "f_hufen",
        "text": "互粉"
      }
      // ... 更多微博表情
    ]
  }
}

.emotion-weibo{width: 35px; height: auto;}


贴吧 


{
  "贴吧": {
    "name": "tieba",
    "type": "image",
    "container": [
      {
        "icon": "tieba_emotion_02",
        "text": "贴吧-2"
      },
      {
        "icon": "tieba_emotion_04",
        "text": "贴吧-4"
      },
      {
        "icon": "tieba_emotion_05",
        "text": "贴吧-5"
      },
      {
        "icon": "tieba_emotion_10",
        "text": "贴吧-10"
      },
      {
        "icon": "tieba_emotion_11",
        "text": "贴吧-11"
      },
      {
        "icon": "tieba_emotion_13",
        "text": "贴吧-13"
      },
      {
        "icon": "tieba_emotion_14",
        "text": "贴吧-14"
      },
      {
        "icon": "tieba_emotion_17",
        "text": "贴吧-17"
      },
      {
        "icon": "tieba_emotion_23",
        "text": "贴吧-23"
      },
      {
        "icon": "tieba_emotion_28",
        "text": "贴吧-28"
      },
      {
        "icon": "tieba_emotion_30",
        "text": "贴吧-30"
      },
      {
        "icon": "tieba_emotion_31",
        "text": "贴吧-31"
      }
      // ... 更多贴吧表情
    ]
  }
}

.emotion-tieba{width: 35px; height: auto;}


酷安 


{
  "酷安": {
    "name": "kuan",
    "type": "image",
    "container": [
      {
        "icon": "coolapk_emotion_100_qqdoge",
        "text": "qqdoge"
      },
      {
        "icon": "coolapk_emotion_1010",
        "text": "酷安-1010"
      },
      {
        "icon": "coolapk_emotion_1011",
        "text": "酷安-1011"
      },
      {
        "icon": "coolapk_emotion_1012",
        "text": "酷安-1012"
      },
      {
        "icon": "coolapk_emotion_101_pyjiaoyi",
        "text": "py交易"
      },
      {
        "icon": "coolapk_emotion_102_fadai",
        "text": "发呆"
      },
      {
        "icon": "coolapk_emotion_103_nb",
        "text": "nb"
      },
      {
        "icon": "coolapk_emotion_104",
        "text": "酷安-104"
      },
      {
        "icon": "coolapk_emotion_7_hehe",
        "text": "呵呵"
      },
      {
        "icon": "coolapk_emotion_20_qinqin",
        "text": "亲亲"
      },
      {
        "icon": "coolapk_emotion_14_bishi",
        "text": "鄙视"
      },
      {
        "icon": "coolapk_emotion_1_hahaha",
        "text": "哈哈哈"
      }
      // ... 更多酷安表情
    ]
  }
}

.emotion-kuan{width: 35px; height: auto;}


使用说明

下载地址

完整的表情包合集和JSON文件：

此处内容需要评论回复后（审核通过）方可阅读。

安装步骤

  1. 下载表情包文件，解压到 /usr/themes/handsome/assets/img/emotion/ 目录下
  2. 修改 /usr/themes/handsome/usr/OwO.json 文件，添加或更新表情包配置

配置注意事项

  1. 修改 OwO.json 文件时请注意 JSON 格式，确保格式正确无误
  2. 表情包文件夹名称需要与 JSON 配置中的 name 值相同
  3. 每个表情的 icon 值对应表情文件的文件名（不含扩展名）
  4. text 值为表情的显示名称，也是在评论中插入表情时使用的快捷代码

示例配置

"QQ": {
  "name": "QQ",  // 对应文件夹名 /emotion/QQ/
  "type": "image",
  "container": [
    {
      "icon": "aini",  // 对应文件 /emotion/QQ/aini.png
      "text": "爱你"   // 表情显示名称和快捷代码
    },
    // 更多表情...
  ]
}

CDN 加速说明

如果你的网站开启了 CDN 加速，请将表情包文件夹上传至CDN的 assets/img/emotion 目录下，确保 CDN 能够正确缓存和加速这些图片资源。

CSS 样式定制

为了统一管理表情包的显示效果，你可以在主题后台添加自定义 CSS 代码。这样可以方便地调整所有表情包的大小和其他样式。

示例代码

/* 表情包大小统一设置 */
.emotion-QQ { width: 35px; height: auto; }
.emotion-douyin { width: 35px; height: auto; }
.emotion-bilibili { width: 35px; height: auto; }
.emotion-aru { width: 35px; height: auto; }
.emotion-twemoji { width: 35px; height: auto; }
.emotion-funny { width: 35px; height: auto; }
.emotion-weibo { width: 35px; height: auto; }
.emotion-tieba { width: 35px; height: auto; }
.emotion-kuan { width: 35px; height: auto; }

/* 可选：鼠标悬停放大效果 */
.OwO-body .OwO-item img:hover {
  transform: scale(1.2);
  transition: transform 0.2s ease;
}

/* 表情选择面板样式优化，默认386px只能显示7个表情，修改为546px可以显示10个表情 */
.OwO .OwO-body {
  max-height: 250px;
  width: 546px!important;
}

你可以根据自己的喜好调整表情大小，只需修改 width 的值即可。例如，改为 width: 35px 可以增大表情显示尺寸。

表情格式转换说明

由于handsome不支持直接设置GIF，且需要保持动画效果，我将原始的 QQ 表情 GIF 文件转换为 APNG 格式。APNG（Animated PNG）格式既保留了 PNG 的透明度优势，又能够显示动画效果。

转换方法

  1. 使用 gif2apng 命令行工具进行批量转换
  2. 转换命令：gif2apng input.gif output.png

  3. 批量处理脚本示例：

    for %i in (*.gif) do gif2apng "%i" "%~ni.png"
注意：普通图片查看器可能无法正确显示 APNG 的动画效果，但在浏览器中可以正常播放动画。
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏
END
本文作者：
 文章标题：Typecho handsome新增评论区OwO表情包 - QQ,抖音,B站等
 本文地址：https://blog.ybyq.wang/archives/808.html
 版权说明：若无注明，本文皆Xuan's blog原创，转载请保留文章出处。