Hexo 中添加 live2d 看板娘

发表于 更新于 分类于
博客左下角的小女孩叫做看板娘，看博客的时候有个萌妹子陪着会少些无聊对吧。看板娘看起来花里胡哨，其实几条命令就可以搞定啦。

博客左下角的小女孩叫做看板娘，看博客的时候有个萌妹子陪着会少些无聊对吧。看板娘看起来花里胡哨，其实几条命令就可以搞定啦。

更多细节参见 live2d 官方 GitHub 仓库

安装 live2d 模块

npm 安装：

npm install --save hexo-helper-live2d

配置看板娘

在 Hexo 配置 _config.yml 中，增加如下内容：

live2d:
  enable: true    # 是否启用看板娘
  scriptFrom: local    # 默认
  pluginRootPath: live2dw/    # 插件在站点上的根目录(相对路径)
  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-epsilon2_1 # npm-module 包的名字
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 200
    height: 400
    position: left    # 左侧还是右侧
    hOffset: -30
    vOffset: -20    # 距底部距离
  mobile:
    show: false    # 手机端是否可见，建议不可见否则可能影响阅读
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

安装模型

使用 npm 安装模型：

npm install 模型的包名

可选的模型名有：

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

模型的示例看 这里。