【首发】如何将嘉然live2D添加到博客网站当看板娘

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

前言

首先这是我发现大佬博客的地方https://nocilol.me/

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

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

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

真正教程开始

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

<!-- Load TweenLite -->
<script src="https://cdn.jsdelivr.net/npm/greensock@1.20.2/dist/TweenLite.js"></script>

<!-- Copyrighted cubism SDK -->
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<!-- Load Pixi (dependency for cubism 2/4 integrated loader) -->
<script src="https://cdn.jsdelivr.net/npm/pixi.js@5.3.6/dist/pixi.min.js"></script>
<!-- Load cubism 4 integrated loader -->
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display@0.3.1/dist/cubism4.min.js"></script>

<!-- Load pio and alternative loader -->
<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>

然后我们把这些复制到网站的<footer>里面，这个时候其实就已经可以出现在你网站的左下角了

注意：如果上面jsdelivr CDN访问不了，请务必将文件自行保存下来放入自己服务器上面运行调用，可以在我公众号上面获取文件下载地址！

特殊情况

但是我的网站是sakurairo的主题，我把上面这些复制调用之后，我的嘉然竟然变大占了我快1/3的网站地方

哈哈哈，巨型嘉然！也不知道是我主题网站的原因还是什么原因，因此，我们需要自己把css文件下载下来放入本地进行自己修改给她定义一下尺寸~在#pio下面添加一个height: 240px 限制一下大小，也可以直接复制下面代码直接覆盖一下

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

然后我们既然要调用自己的css了，那上面的css的调用要换成自己css的地址

<link href="https://换成自己的/pio.css" rel="stylesheet" type="text/css"/>

然后我们清除缓存，刷新咱们的网站！就会发现你拥有了一只超级可爱的嘉然啦~

最后说几句

首先感谢 上杉稚 一开始给我提供找方法怎么实现 （是友链哦）

还有Q名叫广州啵霸的大佬，感谢提供js文件和调用js的html文件让我有了启发（在github仓库项目下面平台看见的）

• 嘉然Diana moc3模型来源于 https://www.bilibili.com/video/BV1FZ4y1F7HH
• 向晚Ava moc3模型来源于 https://www.bilibili.com/video/BV1uB4y1w7rH

以上模型作者为木果阿木果

文章提到的github仓库项目：https://gist.github.com/journey-ad/be8d977683297fd32d5680cdd6e914a7

本文章允许转发转载分享，但请写上来源谢谢~~