有谁会拒绝可爱的板娘入驻自己的博客呢?反正我不会吧o(▽)o
这几天琢磨了一下,成就感满满,写个随笔记录一下!
我的博客主题模板的是 hexo-theme-martery
一、安装
1.1 安装模块
npm install --save hexo-helper-live2d
1.2 live2d-widget
- 下载最新版,解压到博客根目录;
- 自定义模型:
- 在博客 根目录 中创建一个 live2d_models 文件夹;
- 给模型创建一个专属文件夹;
- 将模型文件复制到此文件夹。
注意!模型的 json 文件路径必须为/live2d_models/{name}/{name}.model.json
根目录
|
+-----live2d-widget.js-3.0.6
| |
| +----- ...
|
+-----live2d_models
| |
| +-----{name}
| | |
| | +-----{name}.moc
| | |
| | +-----{name}.model.json
| | |
| | +----- ...
| |
| +-----{name-another}
| | |
| | +----- ...
| |
| +-----{name-another}
| |
| +----- ...
|
+-----_config.yml
二、配置
向 HEXO 的 _config.yml
文件或 主题(hexo-theme-martery)的 _config.yml
文件中添加如下配置信息:
# live2d 相关配置 - SeaYJ
live2d:
enable: true # 是否开启 live2d
scriptFrom: local # 默认
pluginRootPath: live2dw/ # <不需要改动>插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # <不需要改动>脚本文件相对与插件根目录路径
pluginModelPath: assets/ # <不需要改动>模型文件相对与插件根目录路径
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: {modelName} # <注意:{modelName} 就是之前那个 {name} 文件夹的名字>模型文件名
scale: 1 # 模型与canvas的缩放,默认为 1
hHeadPos: 0.5 # <似乎没什么用>模型相对于 canvas 的水平位置
vHeadPos: 0.618 # <似乎没什么用>模型相对于 canvas 的竖直位置
display:
superSample: 2 # <似乎没什么用>超采样等级,默认为 2
width: 150 # <可以直接理解为你想显示 live2d 为多宽>canvas的长度,默认为 150
height: 300 # <可以直接理解为你想显示 live2d 为多高>canvas的高度,默认为 300
position: left # 模型显示位置:right(默认) 或 left
hOffset: 0 # <+值代表向上>canvas水平偏移,默认为 0
vOffset: 16 # <+值代表向 position 设置的方向>canvas垂直偏移,默认为 -20
mobile:
show: true # 是否在手机上显示,默认为 true
scale: 1 # 手机上的缩放倍数,默认为 0.5
react:
opacityDefault: 0.7 # 模型透明度,默认为 0.7
三、模型
3.1 使用模型
在 _config.yml
文件的 live2d.model.use
属性中引用模型可以有以下四种方法:
a. 通过 live2d_models 子目录名称调用
在前面的模拟路径中就是 {name}
或 {name-another}
。
b. 通过 相对于根目录的文件夹路径 调用
在前面的模拟路径中就是 ./live2d_models/{name}
或 ./live2d_models/{name-another}
。
c. 使用 npm 现有模型
通过 npm install 模型名称
来安装 npm 现有模型,然后直接在 live2d.model.use
中直接写 模型名称
可选择的模型有:
- 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
d. 通过 网络地址 引用
直接填写 {name}.model.json
的网络地址即可!
例如:https://unpkg.com/live2dapi@1.0.0/miku/miku.model.json
3.2 发布模型
- 新建一个目录, 用你的Node环境执行
npm init
, 推荐您使用live2d-widget-model-{name}
的包名; - 在刚刚创建的目录下创建
assets
子目录, 把你的模型放进去; - 使用
npm publish
来发布。然后别人就可以使用npm install --save live2d-widget-model-{name}
来安装,并且通过向live2d.model.use
键入包名(live2d-widget-model-{name})
来使用了.
四、补充/更新内容
4.1 【2022.07.20】
- Live2D 会【极大】拖慢博客加载速度,慎用!为了访问速度,我已经关闭该配置!
- Live2D 还会可能会导致页面二次渲染的问题(具体原因不清楚)。