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

发布于 2021-12-22  4870 次阅读


关于我博客左下角的嘉然 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.jslive2dcubismcore.min.jspixi.min.jscubism4.min.jspio.csspio.jspio_sdk4.jsload.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)问题 – 文朔的快乐小站 (vincent1230.top)