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.觉得好的话

骚年不点个心心再走么?

上一篇下一篇

猜你喜欢

热点阅读