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

實際效果請移步： blog.langwenda.com/

第一步 安裝Live2D

安裝 hexo-helper-live2d

npm install --save hexo-helper-live2d
複製代碼

第二步 修改配置文件

在hexo的配置文件_config.yml中添加以下配置，詳細配置能夠參考項目文檔：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-hibiki
  display:
    position: left
    width: 100
    height: 210
  mobile:
    show: false
複製代碼

第三步 下載模型

下載模型，模型名稱以下，一些模型的預覽能夠訪問這裏。

npm install live2d-widget-model-hibiki
複製代碼

全部模型列表以下：

• 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文件夾中的模型文件夾名稱。 而後從新發布博客便可。