子比美化|嘉然live2D看板娘【优化版】

米娜桑~今天偶然访问大佬的博客的时候，发现了一只超超超可爱的嘉然live2d在左下角。我的目光直接被她吸引住了！简直瞬间被治愈的感觉~

前言

首先这是我发现大佬博客的地方

然后我在翻改大佬的github的时候，看见大佬有写一篇关于“在哔站右下角添加嘉然小姐的live2d模型”的项目

刚开始我是一脸懵逼，对于我这个小透明毫无头绪。之后我就开始到处找人学习和教导。然后有大佬帮忙做了一份js和调用js的html文件。我看完，原来这么简单，只不过直接复制然后做成js的方法对小白来说有一点点小问题。要是把live2d隐藏了，就直接不见了，怎么刷新网页都不出来，一定要重新清楚浏览器缓存live2d才会重新出来。可是我看大佬的博客隐藏live2d是会有一个小只嘉然在旁边给我们重新激活她。

然后我自己又摸索了一下，决定还是直接调用大佬博客的js算了。只不过需要自己稍微修改一下~好了不吹水了下面进入真正的教程！！

教程开始

首先我们先把pio还有live2d必需品的js库都列出来！这些都要复制下来！一个都不能剩哦~除了注释你可以不复制哈哈哈，如果你喜欢本地运行的话，也可以吧这些全部下载下来放到你网站本地调用。这样可以自己修改里面的设置，DIY能力会更强哦~

<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>

本站是使用子比主题，所以位置是：全局&功能——</>自定义代码——自定义底部HTML代码

其他主题根据实际情况添加代码。

注意：如果上面jsdelivr CDN访问不了，请务必将文件自行保存下来放入自己服务器上面运行调用。

特殊情况

使用上面代码，某些主题会出现巨型嘉然！其中需要单独下载CSS文件并添加以下代码。

#pio {
	height: 240px;
    vertical-align: middle
}

然后修改上面引用代码，改成自己的CSS地址。

最后清除缓存，网站左下角就会出现一只嘉然！

提醒：

目前该模型的贴图来源是GitHub，加载速度国内自己掂量掂量吧。

迁移看板娘代码

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

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

如果迁移代码，需要你的服务器 / 图床 / 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;}来解决。