注意:教程中使用的插件只支持moc2类型模型文件！

如何判断模型文件类型？

  1. moc类型文件。

  2. moc3类型文件。

首先在博客根目录下安装模型插件必须的依赖包:

1
npm install --save hexo-helper-live2d

在你的网站配置文件_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
# 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://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js     # 你的自定义 url
  tagMode: false        # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false      # 调试, 是否在控制台输出日志
  model:
    # use: live2d-widget-model-wanko      # npm-module package name
    # use: wanko        # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko        # 相对于博客根目录的路径
    # use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json         # 你的自定义 url
  display:
    position: right         #控制看板娘位置
    width: 150      #控制看板娘大小
    height: 300         #控制看板娘大小
  mobile:
    show: true      # 手机中是否展示

我这里展示添加模型最简单的方法:

  1. 下载你想要安装或者更换的live2d模型，通常是一个文件夹。

  2. 在你的博客根目录下新建live2d_models文件夹

  3. 将你想要的live2d模型文件夹 丢进去

  4. 在刚刚配置文件中更改use：项:

    1
    2
    3
    4
    5
    model:
    # use: live2d-widget-model-wanko    # npm-module package name
       use: Kobayaxi                     # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko                # 相对于博客根目录的路径
    # use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json                          # 你的自定义 url

    比如我使用的是康娜的模型，模型名字为Kobayaxi，use后面就填Kobayaxi

  5. 执行hexo三件套，发现模型更换成功喽👏！

对默认位置大小不满意？更改display配置项:

1
2
3
4
5
6
display:
   width: 150      # 宽度
   height: 300         # 高度
   position: left      # 显示位置
   hOffset: 0      #水平偏移
   vOffset: -60        #垂直偏移