今天我们准备为hexo博客添加一个可爱的live2d(看板娘)。

  1. 首先,安装npm包:
    npm install --save hexo-helper-live2d
  2. 然后在hexo的配置文件_config.yml中添加如下配置,详细配置可以参考文档
    live2d:
    enable: true
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    tagMode: false
    debug: false
    model:
    use: live2d-widget-model-shizuku //模型的名称
    display:
    position: right // 右边,左边输入 left
    width: 150
    height: 300
    mobile:
    show: true //手机显示,关闭输入 false
  3. 然后下载模型,模型名称可以到这里参考,一些模型的预览可以在这里。
    所有模型列表如下:
  • 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
  1. 下载了新的模型之后,修改配置文件的
    use: live2d-widget-model-shizuku
    改为你模型的名称。
  2. 在模型当中有两个特殊的模型
  • live2d-widget-model-haru/01
  • live2d-widget-model-haru/02
    只需要安装
    --save live2d-widget-model-haru
    就安装2个模型,如何选择一个呢?所以在使用的时候,是这样的:
    use: live2d-widget-model-haru/01 或者
    use: live2d-widget-model-haru/02
  1. 01和02的json文件是空的,所以需要把live2d-widget-model-haru文件夹下的json文件复制进去

最后 执行命令 hexo clean ; hexo g ; hexo s 完成