操作教程
使用Hexo的helper-live2d插件自定义博客看板娘_hexo-helper-live2d-CSDN博客

EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo! (github.com)

最新的方法

stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform (github.com)

看板娘资源

imuncle/live2d: live2d模型收集+展示，可直接用于静态网站 (github.com)

Live2D示例数据集 (可免费下载) | Live2D Cubism

Hexo添加Live2D看板娘+模型预览_看板娘模型预览-CSDN博客

简单的操作步骤

安装

1
2
3
4
5
# 安装看板娘模块
npm install --save hexo-helper-live2d

# 安装看板娘模型，如
npm install --save live2d-widget-model-shizuku

配置

向Hexo的根目录_config.yml 文件中添加配置.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
## live2d
# https://github.com/EYHN/hexo-helper-live2d
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标签而非插入到所有页面中，具体见项目github描述
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-shizuku # live2d模型的名字
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 200
    height: 400
    position: left # 左侧还是右侧
    hOffset: 20
    vOffset: -50 # 距底部距离
  mobile:
    show: false # 手机端是否可见
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

安装自己的模型

参考

[1] 使用Hexo的helper-live2d插件自定义博客看板娘_hexo-helper-live2d-CSDN博客

[2] EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo! (github.com) 的“模型”一节