给HEXO加上TG的动画贴纸表情包

前言

昨天我给博客加上了几个TG的动画贴纸表情包，包含：瑞克和莫蒂、派大星、金克斯、小黄人、BLACKPINK(粉墨)、名人梗图(PeopleMemes)、小黄鸭(UtyaDuck)，具体可以在评论区尝试一下。 但是就算我导出的大小是100x100并且压缩成了WEBP格式，单个表情的大小还是能够达到300KB左右，如果大小为64x64的就只有100KB左右，但有些影响观感，所以我选择牺牲流量换取观感，其实这里还有另外一条路可以走，那就是“为何不尝试直接播放.tgs或lottie呢？”，今天尝试了下，发现同时播放10-20个小黄人表情包的时候已经掉帧严重了，故此放弃。

然后受到莎娃的启发，所以目前的实现方式是将在挑选表情包时的动态图修改为静态预览图，只有在鼠标悬停或者发送评论后才会显示动态图，这样可以避免访客在挑选表情包时直接加载动态图产生的大量流量，以下就是修改过程。

你可以在本站评论区查看效果

PS: 以下为twikoo评论驱动的修改方式

修改过程

  1. 前往 SwaggyMacro/OwO_Stickers 仓库，直接下载所有文件到你的CDN或者仓库目录(如果你是Github部署的话)下。
    • 当然你也可以不下载，直接使用Gitub当你的表情包CDN，如若如此，跳过第一步即可。
  2. 设置 Configuaration-Plugin-EMOTION_CDN 为 https://raw.githubusercontent.com/SwaggyMacro/OwO_Stickers/main/OwO.min.json 或 你的CDN地址。
  3. 将 twikoo 仓库克隆到本地。
  4. 运行 npm run install 安装依赖。
    • 这里如果出现依赖安装不上的情况，若报错ERESOLVE unable to resolve dependency tree且包含eslint相关字符串的话，请你将package.json中的eslint版本修改为^7.12.1，大约在52行。
  5. 修改 twikoo\src\client\utils\emotion.js 中的函数，大约在第 48 行： 
    function getImgSrc (html) {
      try {
          template.innerHTML = html
          const img = template.content.childNodes[0]
          return img.getAttribute('origin') || img.src
      } catch (e) {
          return ''
      }
    }
  6. 运行 npm run build 构建项目。
  7. 上传 dist\twikoo.all.min.js 文件到你的服务器，替换原来的twikoo.all.min.js文件。
    • 安知鱼主题(本站主题)需要将twikoo的cdn地址改成自己的。
  8. 刷新缓存，即可看到效果。

鼠标悬停效果

如果你是安知鱼主题可以参考下方的修改方法，如果不是你可能需要自行修改或添加代码到你的主题上，原理就是加上MouseOver事件和hover样式，然后在新的弹出层img标签中把src改为表情img标签的origin属性内包含的图片地址。

修改主题SwaggyMacro.github.io/themes/anzhiyu/source/js/main.js中的OwO表情鼠标移入事件函数handleMouseOver，大约在1184行，并且取消悬停延时100s(这里就看自己需求)。

function handleMouseOver(e) {
    if (e.target.tagName == "IMG" && flag) {
      flag = 0;
      // // 移入100毫秒后显示盒子
      // owo_time = setTimeout(() => {
        
      // }, 100);
      let height = e.target.clientHeight * m; // 盒子高
        let width = e.target.clientWidth * m; // 盒子宽
        let left = e.x - e.offsetX - (width - e.target.clientWidth) / 2; // 盒子与屏幕左边距离
        if (left + width > body.clientWidth) {
          left -= left + width - body.clientWidth + 10;
        } // 右边缘检测，防止超出屏幕
        if (left < 0) left = 10; // 左边缘检测，防止超出屏幕
        let top = e.y - e.offsetY; // 盒子与屏幕顶部距离

        // 设置盒子样式
        div.style.height = height + "px";
        div.style.width = width + "px";
        div.style.left = left + "px";
        div.style.top = top + "px";
        div.style.display = "flex";
        // 在盒子中插入图片
        // div.innerHTML = `<img src="${e.target.src}">`;
        div.innerHTML = `<img src="${e.target.getAttribute("origin") || e.target.src}">`;
    }
}