添加嘉然 Live2D
这一步我也是按照大佬 @叶小兽 的教程完成的。
效果图
抛开速度和可靠性不谈，你只需要将下方代码粘贴在你的 <footer> 标签内，或者打开你的 WordPress 后台 => 外观 => 主题编辑器 => footer.php，将以下代码添加到适当位置 (例如 Sakurairo 主题的约 174 行 </body> 标签上方)，即可初步实现嘉然 Live2D 看板娘：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/TweenLite.js"></script>
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cubism4.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.js"></script>
<script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio_sdk4.js"></script>
<script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/load.js"></script>
实际上，如果你使用了 Sakurairo 主题，你可以在不使用主题编辑器的情况下，通过 Sakurairo 主题设置 => 全局设置 => 页尾选项 => 页尾附加代码，直接添加看板娘代码。推荐使用该方式，因为它不会受到主题更新的影响。
当然，要达到最终能显示的效果，你还需要再在 pio.css 或其它位置为 #pio 添加属性 (如 #pio{height:240px} )以修改 Live2D 模型的高度。 以上是大佬教程的简化复述，还请前往阅读大佬的原文 如何将嘉然 live2D 添加到博客网站当看板娘 | 叶小兽の Blog (moeshou.com)
迁移看板娘代码
非常不幸的是，JsdelivrCDN 在中国大陆的节点不再能够提供服务，这为包括本看板娘在内的这些依赖 Jsdelivr 的项目带来了不少影响。如果通过 Jsdelivr 继续直接调用项目源代码，Live2D 模型的加载会很慢（虽然采用了后加载技术使得这不会影响网页的整体加载速度）。所以，如果追求网站速度的朋友，那么我建议你将源代码迁移至自有的位置以供调用。
当然，如果你没有一个可靠的外链服务器 + 国内 CDN 环境，依然建议你不要贸然对你利用 Jsdelivr 的资源进行迁移，因为即使在中国大陆的节点被关停，其可靠性和速度依然吊打某些小图床和免费 CDN。建议的优先级：国内的可靠 CDN > JsdelivrCDN > 不可靠 CDN > 无 CDN 服务器。
如果迁移代码，需要你的服务器 / 图床 / CDN 达到以下条件：
- 支持上传任意格式的文件（包括但不限于 JavaScript CSS moc3 等），并且能够不改变文件夹结构。
- 符合其中至少一条：支持跨站访问（CORS） / 服务器属于你自己 / 允许你自行修改服务器配置文件 / 允许你自行更改 http 响应头中的 Access-Control-Allow-Origin 属性 / CDN 属于你自己。
另外，如果你不符合以上第二条，或者你是虚拟主机 / 个人空间用户，你也可以通过迁移到不跨域的静态文件夹来解决，这一点我会在之后的文章中讲解。
迁移基础加载文件
将本项目需要引用的 8 个文件分别下载并上传至你的服务器 / 图床，然后进行引用。你可以使用你的浏览器新建下载，也可以直接点击以下链接打开网页并按 Ctrl + S 保存到本地。
TweenLite.js live2dcubismcore.min.js pixi.min.js cubism4.min.js pio.css pio.js pio_sdk4.js load.js
成功迁移文件后，重新按照原顺序将迁移后的文件 URL 添加到你的网站即可。
迁移 Live2D 模型文件
当你迁移完以上 8 个文件之后，仍不能实现快速加载看板娘，是因为以上 8 个文件仅仅是基础的脚本依赖项和加载文件，模型文件仍然需要通过 Jsdelivr。所以，我们需要将模型文件也迁移到你的服务器 / 图床。你需要下载以下两个文件夹。你可以直接打包下载或者 Clone 整个库，然后找到对应的文件夹。
blog-img/live2d/Diana at master · journey-ad/blog-img (github.com)
blog-img/live2d/Ava at master · journey-ad/blog-img (github.com)
由于该模型文件夹中存在大量含有相对路径的文件，迁移到目标服务器后，你需要保持文件夹结构不变。
成功迁移文件后，打开之前迁移好的 load.js，找到约 40 行和约 41 行，将列表 model 中的两个 URL 更改为你迁移后对应位置的 /Diana/Diana.model3.json 和 /Ava/Ava.model3.json 文件，刷新 CDN 缓存和本地缓存即可。
删除右侧功能按键
看板娘右侧 5 个按键中的第 4 个用以切换暗黑模式，该按键目前无法得到很好的支持。如果你想删除该按键，可在 pio.css 中搜索 .pio-action .pio-night 并添加 display: none; 声明。
如果你想删除右侧所有按键，可以在 pio.css 中添加 .pio-action{display:none !important;} 来解决。
修复跨域（CORS）问题
如果你完成了以上两项迁移，但是依然无法正常加载 Live2D 模型，那你很可能遇到了 CORS 问题。