[博客美化] 添加嘉然 Live2D 看板娘并消除对 JsdelivrCDN 的依赖

关于我博客左下角的嘉然 Live2D 看板娘，起初我并不打算分享教程的，因为我也是照着别人的教程使用CV大法实现的。但是，因为某些不太能讨论的原因，JsdelivrCDN 在中国大陆的节点不再能够提供服务了，于是我就把看板娘的代码迁移到了我的私有外链服务器。诶，教程不就来了吗 ٩(๑•̀ω•́๑)۶

添加嘉然Live2D

这一步我也是按照大佬 @叶小兽 的教程完成的。

抛开速度和可靠性不谈，你只需要将下方代码粘贴在你的 <footer> 标签内，或者打开你的 WordPress 后台 ==> 外观 ==> 主题编辑器 ==> footer.php，将以下代码添加到适当位置 (例如 iro 主题的约174行 </body> 标签上方)，即可初步实现嘉然 Live2D 看板娘：

<script src="https://cdn.jsdelivr.net/npm/greensock@1.20.2/dist/TweenLite.js"></script>
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@5.3.6/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display@0.3.1/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>

实际上，如果你使用了 iro 主题，你可以在不使用主题编辑器的情况下，通过 iro 主题设置 ==> 全局设置 ==> 页尾选项 ==> 页尾附加代码，直接添加看板娘代码。推荐使用该方式，因为它不会受到主题更新的影响。

当然，要达到最终能显示的效果，你还需要再在 pio.css 或其它位置为 #pio 添加属性(如 #pio{height:240px} )以修改 Live2D 模型的高度。

以上是大佬教程的简化复述，还请前往阅读大佬的原文 如何将嘉然live2D添加到博客网站当看板娘 | 叶小兽のBlog (moeshou.com)

迁移看板娘代码

非常不幸的是，JsdelivrCDN 在中国大陆的节点不再能够提供服务，这为包括本看板娘在内的这些依赖 jsdelivr 的项目带来了不少影响。如果通过 jsdelivr 继续直接调用项目源代码，Live2D 模型的加载会很慢 (虽然采用了后加载技术使得这不会影响网页的整体加载速度)。所以，如果追求网站速度的朋友，那么我建议你将源代码迁移至自有的位置以供调用。

当然，如果你没有一个可靠的外链服务器+国内CDN环境，依然建议你不要贸然对你利用jsdelivr的资源进行迁移，因为即使在中国大陆的节点被关停，其可靠性和速度依然吊打某些小图床和免费CDN。建议的优先级：国内的可靠CDN > JsdelivrCDN > 不可靠CDN > 无CDN服务器。

如果迁移代码，需要你的服务器 / 图床 / CDN 达到以下条件：

1. 支持上传任意格式的文件 (包括但不限于JavaScript CSS moc3 等)，并且能够不改变文件夹结构。
2. 符合其中至少一条：支持跨站访问(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 个文件之后，仍不能实现快速加载看板娘，是因为以上八个文件仅仅是基础的脚本依赖项和加载文件，模型文件仍然需要通过 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 问题。

关于如何鉴别和解决 CORS 跨域问题，可以参考我的文章 [网站运维] 修复跨域(CORS)问题 – 云昔的小站 (blog.vincy1230.net)。