关于在博客页面添加live2d-widget的一些心得和踩过的坑

如何在自己的博客页面使用自定义Live2D模型

在Hugo站点（我使用的是Reimu主题，其他主题也是同理的）中集成自定义Live2D模型，需要配置资源加载、处理CDN问题和大文件等。下面是详细步骤，基于我的实际经验（包括模型加载失败、CDN加载失败、GitHub Raw 400错误和大文件限制等等问题）。

1: 准备Live2D资源

1. 创建GitHub仓库：新建一个公开仓库（如your_github_username/live2d_api），下载live2d-api仓库的model文件夹以及model.json文件上传到新建仓库。后续对应的文件目录结构也要参考这个库下面的教程。
   下载live2d-widget库下dist文件夹的所有内容，上传到仓库。确保分支为main。
   如果要上传自己的Live2D模型文件（.moc3、.json、纹理图片等)，只需要薅来的模型文件中把model.json或者说model3.json改名为index.json就可以了，但是注意命名不要有中文，会出现乱码。当然上传了新模型的话，对应的modellist也需要对应修改，这部分很简单，可以直接参考live2d-api仓库的教程。

2. 关键文件：

   • waifu-tips.json：交互框内容。（我是下载下来按照自己喜好修改了，如果你觉得原来的也行的话，就用源仓库的也行）。
   • waifu.css 和 waifu-tips.js：样式和模型加载脚本。
   • modellist.json:模型存放信息，用于加载模型。

3. 关于访问：
   每次上传了新的模型，需要点击该仓库的tag，然后新建release，只有这样后续才能使用cdn链接加载你的模型。
   

注意：仓库必须公开，否则Raw访问会返回400 Bad Request。如果你想吃现成的话当然也可以直接照抄我的仓库，也有一些我嫖到的免费模型:live2d_api

2: 配置Reimu主题中的Live2D

Reimu主题内置Live2D支持（在themes/reimu/static/resources/live2d-widgets@0.9.0/autoload.js）。别的主题也应该有，如果没有的话可以把live2d-widget仓库下载下来把autoload.js保存到跟这个主题对应的位置。我的autoload.js是已经修改过的，所以说可能和原版不太一样，如果原版的不太行的话，可以尝试一下我的：

// live2d_path 参数建议使用绝对路径
const live2d_path = "https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.0-rc.7/dist/";

// 封装异步加载资源的方法
function loadExternalResource (url, type) {
   
   
  return new Promise((resolve, reject) => {
   
   
    let tag;

    if (type === "css") {
   
   
      tag = document.createElement("link");
      tag.rel = "stylesheet";
      tag.href = url;
    }
    else if (type === "js") {
   
   
      tag = document.createElement("script");
      tag.type = 'module';
      tag.src = url;
    }
    if (tag) {
   
   
      tag.onload = () => resolve(url);
      tag.onerror = () => reject(url);
      document.head.appendChild(tag);
    }
  });
}

// 避免跨域图片资源问题
const OriginalImage = window.Image;
window.Image = function (...args) {
   
   
  const img = new OriginalImage(...args);
  img.crossOrigin = "anonymous";
  return img;
};
window.Image.prototype = OriginalImage