Hexo博客yilia主题首页添加helper-live2d模型插件

插件效果
插件的github地址
插件作者提供了较为详细的安装步骤,我结合自己操作和图示,提供大家。

效果展示:红框内为2d模型,可以随鼠标移动而变化

安装模块:

hexo博客根目录选择cmd命令窗口或者git bash 输入以下代码,安装插件

操作:

npm install --save hexo-helper-live2d

下载模型

作者提供了三个下载模型的办法,我选择操作比较简单的一种
npm 模块名 的方法

作者提供以下模型的模型包,模型包预览地址见下面的链接,选择你想用的模型,记住名字,选择对应的后缀模型包

作者各种模型包展示

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 模型的包名来安装,比如我选择的的是live2d-widget-model-koharu 模型包

操作:

在hexo博客根目录选择cmd命令窗口或者git bash 输入以下代码

npm install live2d-widget-model-koharu

执行安装就完事了

配置

请向Hexo_config.yml 文件添加配置.

操作:

打开个人Hexo博客文件根目录下的 _config.yml 文件,在最后添加一下代码
示例:

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

注:在移动端可能会干扰阅览,可以选择取消移动端显示,true改为fasle

  mobile:
    show: fasle

你需要配置的是use: live2d-widget-model-koharu
use后为你选择的安装包的全称

插件部署与配置就完成了

效果预览

本地预览

hexo clean && hexo g && hexo s 

博客部署

博客部署

hexo clean && hexo g && hexo d 

我的个人博客文章地址,欢迎访问
我的CSDN文章地址,欢迎访问
我的简书文章地址,欢迎访问
我的GitHub主页,欢迎访问

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AomanHao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值