博客添加 Live2D | Hexo-Matery

有谁会拒绝可爱的板娘入驻自己的博客呢？反正我不会吧o(^▽^)o

这几天琢磨了一下，成就感满满，写个随笔记录一下！

我的博客主题模板的是 hexo-theme-martery

一、安装

1.1 安装模块

npm install --save hexo-helper-live2d

下载最新版,解压到博客根目录；
自定义模型：
在博客 根目录 中创建一个 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}) 来使用了.