为hexo博客butterfly主题添加一个自定义live2d

仓库地址：GitHub - EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo!

注意：此插件目前无法加载moc3的模型 :)

首先npm安装包：

1
npm install --save hexo-helper-live2d

安装好包后就可以在你的博客文件夹下的_config.yml文件或主题文件夹下的的_config.butterfly.yml文件中引用啦~

我这里在_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
## live2d
#https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true # 是否开启live2d
  scriptFrom: local # 脚本从本地引入
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中 
  debug: false # 调试, 是否控制台日志
  model:
    use: rem # vert_swimwear # 填写放进live2d_models文件夹中的模型文件夹名字
    scale: 1 # canvas 模型与canvas的缩放
  display:
    width: 150 # 宽度
    height: 300 # 高度
    position: left # 显示位置
    hOffset: 0 #水平偏移
    vOffset: -60 #垂直偏移
  dialog:
    enable: false #显示人物对话框
    hitokoto: false #使用一言API
  mobile:
    show: false # 手机端是否显示
    scale: 0.5 # 移动设备上的缩放
  react:
    opacity: 1 # 透明度

说明：仔细看配置我这里用的模型不是默认提供的，而是自己的live2d模型。

模型文件位置：

image-20230721171540654

本站使用的rem所以配置中的use后面就写rem（文件夹名）

实现效果：

image-20230721171832611