hexo-添加Live2d看板动画 (添加宠物)- yaliy
2019-04-11 本文已影响0人
Jayce_xi
1.看看成果
2.安装相关依赖
在你博客的根目录运行以下命令:
npm install --save hexo-helper-live2d
安装成功后,你可以在你的博客根文件夹/node_modules/
底下找到live2d-widget
这个文件夹。
3.安装你想要的live2d动画小人、小狗。。。anyway
npm install live2d-widget-model-haru
live2d-widget-model-haru这个是一个动画的样式model,你可以在网上搜到很多。
安装成功后,你可以在你的博客根文件夹/node_modules/
底下找到live2d-widget-model-haru
这个文件夹。
这里很多model供你选择,这里可以动画预览或者你可以自己再找找。
4.修改主配置文件(根目录下)_config.yml
在主配置文件(根目录下)_config.yml
中添加
# 7.live2d配置宠物
live2d:
# 当enable 为true的时候,会启用yaliya主题自带宠物shizuku,橘头发小姐姐,而且不可以配置位置,所以需要讲enable注释掉
# enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
model:
# live2d-widget-model-wanko 是一只趴在碗里的狗狗
use: live2d-widget-model-wanko # 通过修改use来确定使用哪种model
# hibiki 是一个御姐
# use: live2d-widget-model-hibiki
# haruto 海军服女孩,有点难看
# use: live2d-widget-model-haruto
display:
position: left
width: 150
height: 300
# 一个比较可爱的位置
# hOffset: 200
# vOffset: -100
# 第二个位置配置,这个在左侧边栏位置很居中
hOffset: 80 # 调节水平位置
vOffset: -50 # 调节垂直位置
mobile:
show: false
5.yaliya 主题中的一个小坑
yaliya 主题本身已经配置了一个live2d,当你在主配置文件(根目录下)_config.yml
中添加:
live2d:
enable: true
当enable 为true的时候,会启用yaliya主题自带宠物shizuku,橘头发小姐姐,而且不可以配置位置,需要你自己去修改css等,比较麻烦,所以需要将将enable注释掉(网上教学会带上这个参数,自己弄了一小会儿才搞明白的)
6.最后布置上线
先进行线下测试:
hexo clean && hexo g && hexo s
访问localhost:4000来进行测试,成功后,上线:
hexo clean && hexo g && hexo d
7.觉得好的话
骚年不点个心心再走么?