Hexo安装live2d插件

今天看见别人的博客页面上有一只动态、萌萌的小猫模型,在多方波折之后终于在自己的博客上也弄了一只,现在分享一下步骤!

说明

  • 动态模型通过一个Hexo插件live2d来实现的,作者制作了10多个精美的模型,具体的展示可以看作者的博客

  • Github项目地址

  • 我的博客上使用的是hijiki模型

安装

1.安装模块

  • 首先我们需要安装live2d模块,我们需要在blog根目录下运行下面的命令:

    1
    npm install --save hexo-helper-live2d

2.安装模型

  • 作者为我们提供了下面的多种模型,大家可以根据自己的喜好来选择,具体效果展示

    • live2d-widget-model-chitose
    • live2d-widget-model-epsilon2_1
    • live2d-widget-model-gf
    • live2d-widget-model-haru/01 (use npm install —save live2d-widget-model-haru)
    • live2d-widget-model-haru/02 (use npm install —save live2d-widget-model-haru)
    • live2d-widget-model-haruto
    • live2d-widget-model-hibiki
    • live2d-widget-model-hijiki
    • live2d-widget-model-izumi
    • live2d-widget-model-koharu
    • live2d-widget-model-miku
    • live2d-widget-model-ni-j
    • live2d-widget-model-nico
    • live2d-widget-model-nietzsche
    • live2d-widget-model-nipsilon
    • live2d-widget-model-nito
    • live2d-widget-model-shizuku
    • live2d-widget-model-tororo
    • live2d-widget-model-tsumiki
    • live2d-widget-model-unitychan
    • live2d-widget-model-wanko
    • live2d-widget-model-z16
  • 我们可以使用运行npm install 模型名的方式来安装对应的模型,我这里运行的是

    1
    npm install live2d-widget-model-hijiki

3.配置_config.yml

  • 打开blog根目录下的config.yml文件,在最后追加下面的代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    live2d:
    enable: true
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    tagMode: false
    debug: false
    model:
    use: live2d-widget-model-hijiki #换成自己安装的模型
    display:
    position: right
    width: 150
    height: 300
    mobile:
    show: true
------------- 本文结束 感谢您的阅读 -------------

本文标题:Hexo安装live2d插件

文章作者:Perry

发布时间:2019年03月24日 - 14:34

最后更新:2019年09月19日 - 13:47

原始链接:https://perry96.com/archives/c6b94142.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%