94 lines
2.9 KiB
Markdown
94 lines
2.9 KiB
Markdown
> 本文作者：丁辉
|
||
|
||
# Hexo添加看板娘
|
||
|
||
## 方法一
|
||
|
||
1. 安装 NPM 包
|
||
|
||
```bash
|
||
npm install --save hexo-helper-live2d
|
||
```
|
||
|
||
2. 下载模型
|
||
|
||
[小模型](https://github.com/EYHN/hexo-helper-live2d)
|
||
|
||
[大模型](https://github.com/summerscar/live2dDemo)
|
||
|
||
3. 改名模型目录名为 `live2d_models/` 在 Hexo 工作目录下
|
||
|
||
4. 编辑配置文件
|
||
|
||
```bash
|
||
vi _config.yml
|
||
```
|
||
|
||
内容如下
|
||
|
||
```yaml
|
||
live2d:
|
||
enable: true
|
||
scriptFrom: local # 主目录
|
||
pluginRootPath: live2d_models/ # 模型目录
|
||
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
|
||
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
|
||
# scriptFrom: jsdelivr # jsdelivr CDN
|
||
# scriptFrom: unpkg # unpkg CDN
|
||
# scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
|
||
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
|
||
debug: false # 调试, 是否在控制台输出日志
|
||
model:
|
||
use: live2d-widget-model-koharu # 对应的模型名称
|
||
# use: wanko # 博客根目录/live2d_models/ 下的目录名
|
||
# use: ./wives/wanko # 相对于博客根目录的路径
|
||
# use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
|
||
display:
|
||
position: left # 居右
|
||
width: 80 # 宽度
|
||
height: 120 # 高度
|
||
mobile:
|
||
show: true # 移动端是否显示
|
||
react:
|
||
opacity: 0.7 # 模型透明度
|
||
|
||
|
||
live2d:
|
||
enable: true # 是否启动
|
||
scriptFrom: local # 默认
|
||
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
|
||
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
|
||
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
|
||
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
|
||
debug: false # 调试, 是否在控制台输出日志
|
||
model:
|
||
use: live2d-widget ## 模型文件
|
||
display:
|
||
position: right # 定位方向 left right top bottom
|
||
width: 150 # 小人宽度
|
||
height: 300 # 小人高度
|
||
hOffset: -15 # 向👇偏移
|
||
vOffset: -15 # 像👈偏移
|
||
mobile:
|
||
show: true # 手机端是否显示
|
||
react:
|
||
opacity: 0.7 # 模型透明度
|
||
|
||
作者：船过水无痕
|
||
链接：https://juejin.cn/post/6925325394820202510
|
||
来源：稀土掘金
|
||
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
|
||
```
|
||
|
||
## 方法二
|
||
|
||
[Github仓库](https://github.com/stevenjoezhang/live2d-widget)
|
||
|
||
在 `<head>` 中加入
|
||
|
||
```bash
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||
<script src="https://cdn.jsdelivr.net/gh/17lai/live2d-widget@latest/autoload.js"></script>
|
||
```
|
||
|