基础安装

需要的js库

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

将上方的代码添加到footer.php下，就完成安装了

如果没有，请刷新你的cdn缓存

自定义修改

修改需要将上述js本地化，具体方法可见文末

修改然然的尺寸（误）：

打开pio.css，在#pio下添加

height: 240px;

来限制大小

删除右侧功能按键

看板娘右侧 5 个按键中的第 4 个用以切换暗黑模式，该按键目前无法得到很好的支持。如果你想删除该按键，可在 pio.css 中搜索 .pio-action .pio-night 并添加

display: none;

声明。

如果你想删除右侧所有按键，可以在 pio.css 中添加

.pio-action{display:none !important;}

来解决。

本地化

如果需要本地化，或加到自己的对象存储里的话，我整理了一份文件 点击这里下载，

将js文件夹下的文件夹传到自己的对象存储里 如果在上方进行了修改，需要将修改的文件上传

将下方的test.test替换成你的加速域名，添加到footer.php下

<!-- Load TweenLite -->
<script src="https://test.test/npm/greensock@1.20.2/dist/TweenLite.js"></script>
<!-- Copyrighted cubism SDK -->
<script src="https://test.test/live2d/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<!-- Load Pixi (dependency for cubism 2/4 integrated loader) -->
<script src="https://test.test/npm/pixi.js@5.3.6/dist/pixi.min.js"></script>
<!-- Load cubism 4 integrated loader -->
<script src="https://test.test/npm/pixi-live2d-display@0.3.1/dist/cubism4.min.js"></script>
<!-- Load pio and alternative loader -->
<link href="https://test.test/live2d/lib/pio.css" rel="stylesheet" type="text/css"/>
<script src="https://test.test/live2d/lib/pio.js"></script>
<script src="https://test.test/live2d/lib/pio_sdk4.js"></script>
<script src="https://test.test/live2d/lib/load.js"></script>

模型

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

下载到自己服务器后在load.js中更改引用地址

想要更多模型请到梦象模型站 或是加我找我要吧！千万别引用我这个小水管的地址啊 ?