添加嘉然live2d作为博客看板娘并本地化

Mashiro

2022 年 04 月 22 日

2106 次浏览

2 条评论

737字数

博客

效果：https://www.bilibili.com/video/av375230316

## 基础安装

需要的js库

```html
<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;
```

来限制大小

#### 删除右侧功能按键：

打开pio.css，添加

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

### 本地化

如果需要本地化，或加到自己的对象存储里的话，我整理了一份文件
[点击这里下载](https://pan.feczine.cn/s/EVCq)，将js文件夹下的文件夹传到自己的对象存储里
如果在上方进行了修改，需要将修改的文件上传

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

```html

<script src="https://test.test/npm/greensock@1.20.2/dist/TweenLite.js"></script>

<script src="https://test.test/live2d/sdk-web/cubismcore/live2dcubismcore.min.js"></script>

<script src="https://test.test/npm/pixi.js@5.3.6/dist/pixi.min.js"></script>

<script src="https://test.test/npm/pixi-live2d-display@0.3.1/dist/cubism4.min.js"></script>

<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添加到博客网站当看板娘](https://www.moeshou.com/310.html)
2.[添加嘉然Live2D看板娘并消除对JsdelivrCDN的依赖](https://blog.vincent1230.top/vincent1230/technology/website/198/)

最后修改：2023 年 02 月 08 日