前言

模型作者为木果阿木果

配置

简单配置

在_config.butterfly.yml配置文件中找到inject项，在head和bottom中添加下面代码

1
2
3
4
5
6
7
8
9
10
11
inject:
    head:
        - <link href="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.css" rel="stylesheet" type="text/css"/>
    bottom:
        - <script src="https://cdn.jsdelivr.net/npm/greensock@1.20.2/dist/TweenLite.js"></script>
        - <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.3.6/dist/pixi.min.js"></script>
        - <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
        - <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/npm/pixi-live2d-display@0.3.1/dist/cubism4.min.js"></script>
        - <script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/load.js"></script>

但此时大小显示会有问题，还需要打开<link href="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.css" rel="stylesheet" type="text/css"/>中的链接（https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.css） 并将它下载保存到博客根目录中的source中，然后把链接改为文件路径，最后打开文件在#pio 添加属性#pio{height:240px}以修改 Live2D 模型的高度。如下：

1
2
3
4
#pio {
    height: 240px;
    vertical-align: middle
}

本地配置

上面的方式可能会加载不出来，是因为JsdelivrCDN 在中国大陆的节点不再能够提供服务了，所以更推荐本地配置。

下载模型

在这个github项目中将live2D下载下来。然后把上面的代码的链接都改为本地文件路径，如<script src="/live2D/lib/load.js"></script>。并且还要将load.js中的model项的路径更改为本地，下面只是例子：

1
2
3
4
model: [
    "/live2D/Diana/Diana.model3.json",
    "/live2D/Ava/Ava.model3.json",
  ],

删除右侧功能按键

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

如果你想删除右侧所有按键，可以在 pio.css 中添加 .pio-action{display:none !important;} 来解决。