添加嘉然 Live2D

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

效果图

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

1
2
3
4
5
6
7
8
<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 达到以下条件:

  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 个文件之后,仍不能实现快速加载看板娘,是因为以上 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 问题。

摘自: [博客美化] 添加嘉然 Live2D 看板娘并消除对 JsdelivrCDN 的依赖 - 文朔的快乐小站