效果图
简单版（单一模型）
传送门
1，安装依赖
1
| yarn add hexo-helper-live2d
|
2.在hexo根目录_config.yml中添加如下配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| # Live2D
#
live2d:
enable: true
# enable: false
scriptFrom: local # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
# scriptFrom: jsdelivr
# scriptFrom: unpkg
# scriptFrom: https://www.unpkg.com/npm/live2d-widget@3.x/lib/L2Dwidget.min.js
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-wanko # npm-module package name
# use: wanko # 博客根目录/live2d_models/ 下的目录名
# use: ./wives/wanko # 相对于博客根目录的路径
# use: https://www.unpkg.com/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
display:
position: right
width: 150
height: 300
mobile:
show: true # 手机中是否展示
|
3.模型下载
下载地址
推荐使用yarn add <package-name>的方式下载模型，下载完成后在上面第2步中找到 model: use: 后面写上你下载的模型的名字就好，重启一下hexo服务就ok啦。
高级版（更换模型…）
将：
1
| const live2d_path = "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
|
改为：
1
| const live2d_path = "/live2d-widget/";
|
3. 将autoload.js注入主题，在主题的_config.yml中找到inject
1
2
3
4
5
6
7
| # Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
- <script src="/live2d-widget/autoload.js"></script>
bottom:
|
4. 重启hexo服务
5. 注意
从stevenjoezhang下载下来的库使用的是cdn过后的api，会导致换皮肤功能没有效果，只需要找到 live2d-widget/autoload.js 中将cdnPath注释，打开apiPath就好了：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
if (screen.width >= 768) {
Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js")
]).then(() => {
initWidget({
waifuPath: live2d_path + "waifu-tips.json",
apiPath: "https://live2d.fghrsh.net/api/",
});
});
}
|
