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

在查找资料的偶然间，我发现一个博客上有非常可爱的Live 2D模型，当时我就被打动了，马上开启审查元素，试图找出这个Live 2D模型的信息，可是找了半天没找到。最后通过截图->谷歌图片的方式，终于一层一层的找到了相关资料，我正好有一个Hexo博客，所以今天就来在博客上添加一波Live 2D模型！

首先，安装npm包：

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-shizuku

display:

position: right

width: 150

height: 300

mobile:

show: true

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

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命令启动服务器，稍等一下就可以看到右下角出现了一个可爱的萌萌哒的妹纸！本来录了一个GIF，可惜上传上来变成了PNG格式……想看动态图的话只能直接看我的博客了，不过因为所有东西都在Github上托管的原因，可能Live2D不能马上加载出来。

live2d