hexo博客编辑——如何在hexo页面添加live2d

1、安装依赖环境

2、下载动画model

3、修改配置

一、安装依赖环境

检查主目录下的package.json里是否有 "hexo-helper-live2d": "^3.1.1"这条依赖配置

若没有，使用命令npm install --save hexo-helper-live2d安装依赖环境

二、下载动画model

1、进入动画model的存放目录

cd /home/hexo/node_modules

2、下载所需要的live2d的模板

下载地址：live2d模板下载地址

比如我这里选择了miku的模型，在node_modules目录下执行以下命令：

npm install live2d-widget-model-miku

三、修改配置

为了使live2d配置生效，我们还需要修改主目录下的_config.yml配置

vi /home/hexo/_config.yml

在配置文件中添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
live2d:
  enable: true
  pluginModelPath: assets/
  model:
    #模板目录，在node_modules里
    use: live2d-widget-model-miku
  display:
    position: right
    width: 300
    height: 600
  mobile:
    #是否在手机端显示
    show: false
  rect:
    opacity: 0.7

四、开始部署

最后，使用hexo g命令加载配置，完成部署，在页面上就能看到添加的live2d动画了