美文网首页
hexo-添加Live2d看板动画 (添加宠物)- yaliy

hexo-添加Live2d看板动画 (添加宠物)- yaliy

作者: Jayce_xi | 来源:发表于2019-04-11 17:55 被阅读0次

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

    骚年不点个心心再走么?

    相关文章

      网友评论

          本文标题:hexo-添加Live2d看板动画 (添加宠物)- yaliy

          本文链接:https://www.haomeiwen.com/subject/rqjxwqtx.html