Typecho handsome新增评论区QQ，抖音，b站等表情包

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

表情总览

使用说明

下载地址

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

https://blog.ybyq.wang/archives/808.html

安装步骤

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 的动画效果，但在浏览器中可以正常播放动画。

作者：xuan
个人博客：https://blog.ybyq.wang
欢迎访问我的博客，获取更多技术文章和教程。