Hexo 博客live-2d 添加与展示

Hexo 博客live-2d 添加与展示

 

1.live-2d 插件下载

在hexo根目录下执行安装，这里需要提前下载好npm

npm install --save hexo-helper-live2d

 

2.live-2d 模型安装

喜欢的模型可以到网上寻找，我安装的是 live2d-widget-model-miku

npm install live2d-widget-model-haruto

 

3.live-2d 模型配置

A.在hexo根目录下创建 live2d_models 的文件夹

mkdir live2d_models

B.进入hexo根目录下的node_modules文件夹，复制刚才下载的模型到上面创建的文件夹

cp -r live2d-widget-model-hibiki ../live2d_models/live2d-widget-model-hibiki

C.在hexo根目录下的_config.yml中添加以下内容:

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-haruto
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

如果无法显示就改为下面的内容:

live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-hibiki
  display:
    position: right
    width: 300
    height: 600
  mobile:
    show: true

这里只需要把use后面改为自己刚才下载的模型即可

 

4.本地查看效果

在hexo根目录执行

hexo s

看到如下提示后，在本地浏览器打开http地址，即可看到新添加的live-2d模型

 

5.上传到git

本地查看无误后即可上传，这样线上的博客也会相应更新

hexo clean
hexo g -d

 

看到如上信息则上传完成

 

6.hexo常用命令

上面用到了两个命令

hexo s == hexo server  生成本地预览界面 s是缩写

hexo d == hexo deploy 部署到github 同步线上博客

暂时用到了这两个，后面发布博客，美化博客会继续更新同步相关操作~

有一些细节的问题也可以到官网查看 https://www.npmjs.com/package/hexo-helper-live2d ~