L
O
A
D
I
N
G

博客添加 Live2D | Hexo-Matery


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

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

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

效果预览

一、安装

1.1 安装模块

npm install --save hexo-helper-live2d

1.2 live2d-widget

  1. 下载最新版,解压到博客根目录;
  2. 自定义模型:
  3. 在博客 根目录 中创建一个 live2d_models 文件夹;
  4. 给模型创建一个专属文件夹;
  5. 将模型文件复制到此文件夹。

注意!模型的 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 发布模型

  1. 新建一个目录, 用你的Node环境执行 npm init, 推荐您使用 live2d-widget-model-{name} 的包名;
  2. 在刚刚创建的目录下创建 assets 子目录, 把你的模型放进去;
  3. 使用 npm publish 来发布。然后别人就可以使用 npm install --save live2d-widget-model-{name} 来安装,并且通过向 live2d.model.use 键入包名 (live2d-widget-model-{name}) 来使用了.

四、补充/更新内容

4.1 【2022.07.20】

  1. Live2D 会【极大】拖慢博客加载速度,慎用!为了访问速度,我已经关闭该配置!
  2. Live2D 还会可能会导致页面二次渲染的问题(具体原因不清楚)。

参考文章

hexo-helper-live2d
live2d-widget.js


文章作者: SeaYJ
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明来源 SeaYJ !
评论
  目录