为hexo添加看板娘

1.准备工作
1
2
3
//检查博客主目录下的package.json下是否有"hexo-helper-live2d": "^3.0.3"依赖
//有的话可以先卸载
npm uninstall hexo-helper-live2d
2.安装依赖
1
2
3
4
//在hexo根目录下用Git执行命令
npm inatall --save hexo-helper-live2d
//安装过程中可能会遇到一些依赖问题，按照提示做就可以了
//成功了之后可以看到当前目录的node_modules/下有个live2d-widget目录  但是这时候里面是没有模型文件的，所以下一步就是下载模型文件
3.模型下载
1
2
3
4
//名字可以在https://github.com/xiazeyu/live2d-widget-models//model下面找到
//模型文件可以直接用npm下载 如下
npm install live2d-widget-model-tororo
//安装完成可以在node_modules/下看到live2d-widget-model-tororo文件夹
4.添加live2d看板娘到hexo
1
//在Hexo的_config.yml文件或者主题下的_config.yml文件下添加配置，这里建议在hexo根目录下的配置文件中进行配置，当更换主题时也不不要重新配置

添加下面的代码到配置文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
## Live2D看板娘
live2d:
  enable: true
  pluginModelPath: assets/
  model:
    #模板目录，在node_modules里
    use: live2d-widget-model-shizuku  
  display:
    position: right
    width: 300 
    height: 600
  mobile:
    # 在手机端显示
    show: false   
  rect:
    opacity:0.7
5.查看效果
1
2
3
hexo g  //生成文件
hexo s //在本地查看效果
//在浏览器访问http://localohost:4000就可以看到效果了
6.发布

在本地找到满意的效果后，使用hexo d将其发布到你的hexo服务器上，即可在外网查看了。可在我的hexo博客预览，只不过我现在用的github作服务器，访问速度有点慢。