<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="page_end_html">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
"scale": 1
},
"display": {
"position": "right",
"width": 150,
"height": 300,
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
</div>
</body>
</html>

初始化的jsonPath为: https://unpkg.com/2D模型全名称@1.0.5/assets/模型.model.json
例如:https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
也可通过使用浏览器访问 https://unpkg.com/2D模型全名称@1.0.5/ 来查找对应的模型json地址,如https://unpkg.com/live2d-widget-model-chitose@1.0.5
2D模型全名称:
https://github.com/xiazeyu/live2d-widget-models/tree/master/packages
- live2d-widget-model-chitose
- live2d-widget-model-epsilon2_1
- live2d-widget-model-gf
- live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
- live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
- live2d-widget-model-haruto
- live2d-widget-model-hibiki
- live2d-widget-model-hijiki
- live2d-widget-model-izumi
- live2d-widget-model-koharu
- live2d-widget-model-miku
- live2d-widget-model-ni-j
- live2d-widget-model-nico
- live2d-widget-model-nietzsche
- live2d-widget-model-nipsilon
- live2d-widget-model-nito
- live2d-widget-model-shizuku
- live2d-widget-model-tororo
- live2d-widget-model-tsumiki
- live2d-widget-model-unitychan
- live2d-widget-model-wanko
- live2d-widget-model-z16
例如:
https://unpkg.com/browse/live2d-widget-model-epsilon2_1@1.0.5/



--------------------------------------------------------------------------------------------------------
官网地址配置:https://www.npmjs.com/package/hexo-helper-live2d
按如下步骤执行
1️⃣ 首先检查博客主目录下面的 package.json
里是否有"hexo-helper-live2d": "^3.0.3",
依赖,有的话可以先卸载
使用命令:npm uninstall hexo-helper-live2d
之后再安装:npm install --save hexo-helper-live2d
注意:命令都是在你的博客主目录执行

我的博客目录结构:d:/github/blog
安装完成之后在package.json
会看到安装的model

package.json依赖
此时再去 node_moduels
目录下,可以看到有如下文件夹,这些都是动画主配置

node_modules目录
2️⃣下载各种动画model:
地址:https://github.com/xiazeyu/live2d-widget-models.git
3️⃣下载好之后将packages里的所有动画模板拷贝到博客的node_modules目录里

packages目录
4️⃣配置博客站点配置文件,_config.yml
live2d:
enable: true
pluginModelPath: assets/
model:
use: live2d-widget-model-epsilon2_1 #模板目录,在node_modules里
display:
position: right
width: 150
height: 300
mobile:
show: false #是否在手机进行显示
5️⃣开始部署
当使用hexo clean
或者 hexo g
命令的时候,这时候就可以看到如下日志了

构建日志INFO HEXO-HELPER-LIVE2D: Loaded model from npm-module(1), live2d-widget-model-epsilon2_1@1.0.5 from 'D:\github\blog\node_modules\live2d-widget-model-epsilon2_1\assets'
说明已经加载到了配置的动画模板,到此就完成了。