效果:https://www.bilibili.com/video/av375230316
基础安装
需要的js库
代码语言:javascript复制<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下添加
代码语言:javascript复制height: 240px;
来限制大小
删除右侧功能按键:
打开pio.css,添加
代码语言:javascript复制.pio-action{display:none !important;}
本地化
如果需要本地化,或加到自己的对象存储里的话,我整理了一份文件 点击这里下载,将js文件夹下的文件夹传到自己的对象存储里 如果在上方进行了修改,需要将修改的文件上传
将下方的test.test替换成你的加速域名,添加到footer.php下
代码语言:javascript复制<!-- 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>
参考: 1.如何将嘉然live2D添加到博客网站当看板娘 2.添加嘉然Live2D看板娘并消除对JsdelivrCDN的依赖