在Hexo博客上添加可爱的Live 2D模型

在查找资料的偶然间,我发现一个博客上有非常可爱的Live 2D模型,当时我就被打动了,马上开启审查元素,试图找出这个Live 2D模型的信息,可是找了半天没找到。最后通过截图->谷歌图片的方式,终于一层一层的找到了相关资料,我正好有一个Hexo博客,所以今天就来在博客上添加一波Live 2D模型!

首先,安装npm包:

npm install --save hexo-helper-live2d

然后在hexo的配置文件_config.yml中添加如下配置,详细配置可以参考文档

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

然后下载模型,模型名称可以到这里参考,一些模型的预览可以在这里

npm install live2d-widget-model-shizuku

所有模型列表如下:

  • 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

下载完之后,在Hexo根目录中新建文件夹live2d_models,然后在node_modules文件夹中找到刚刚下载的live2d模型,将其复制到live2d_models中,然后编辑配置文件中的model.use项,将其修改为live2d_models文件夹中的模型文件夹名称。

一切就绪之后,用hexo server命令启动服务器,稍等一下就可以看到右下角出现了一个可爱的萌萌哒的妹纸!本来录了一个GIF,可惜上传上来变成了PNG格式……想看动态图的话只能直接看我的博客了,不过因为所有东西都在Github上托管的原因,可能Live2D不能马上加载出来。

live2d

推荐阅读更多精彩内容

  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    挣奶粉的打工人阅读 15,233评论 7 163
  • 最近项目用到了二维码扫描的功能,就研究了下二维码扫描的技术。市面上用的最多的还是zxing包,不过zxing包功能...
    Andry阅读 520评论 0 1
  • 深圳惠州艾米龙手表回收世界十大名表回收 奢侈品回收,首选佛阳子聚奢网!全国连锁,十年品牌值得信赖! 地址:深圳市罗...
    深圳聚奢阅读 18评论 0 0
  • “零知识证明”-zero-knowledge proof,是由S.Goldwasser、S.Micali及C.Ra...
    a树阅读 367评论 0 0
  • 目录 雷辰施施然坐下了,初寒此时变得很知趣,默默的当一棵不会说话的竹子。 “你怎么会在这儿?”雷辰问。 “山中凉爽...
    冷清持阅读 375评论 2 17