在 Hexo 博客上添加可爱的 Live 2D 模型

一月 26, 2021 1510

本文原地址 ：https://www.jianshu.com/p/4b61d8702cfa

1.首先，安装 npm 包：

1
npm install --save hexo-helper-live2d

2.然后在 hexo 的配置文件_config.yml(非主题配置文件)中添加如下配置，详细配置可以参考文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-shizuku
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

3.然后下载模型，模型名称可以到这里参考，一些模型的预览可以在这里。

1
npm install live2d-widget-model-shizuku

所有模型列表如下：

  • 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

下载完之后，在 Hexo 根目录中新建文件夹 live2d_models，然后在 node_modules 文件夹中找到刚刚下载的 live2d 模型，将其复制到 live2d_models 中，然后编辑配置文件中的model.use项，将其修改为 live2d_models 文件夹中的模型文件夹名称。

一切就绪之后，用hexo server命令启动服务器，稍等一下就可以看到右下角出现了一个可爱的萌萌哒的妹纸！