一、页面效果

二、运行方式

首先我们先把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访问不了，请务必将文件自行保存下来放入自己服务器或对象存储上面运行调用，此处点击下载

使用对象存储时，请注意跨域问题（将你的网站列入对象存储白名单中）

三、自定义尺寸

如果觉得尺寸不合适，可以在pio.css文件#pio下面修改height: 240px限制一下大小。

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

嘉然Diana moc3模型来源于：

https://www.bilibili.com/video/BV1FZ4y1F7HH

向晚Ava moc3模型来源于：

https://www.bilibili.com/video/BV1uB4y1w7rH

以上模型作者为：https://space.bilibili.com/886695

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