使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)

简介: 使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)

1.安装依赖


安装命令:npm install --save hexo-helper-live2d

卸载命令:npm uninstall hexo-helper-live2d

命令都是在你的博客主目录执行


安装完成之后在package.json会看到安装的model


2.下载模型


地址:https://github.com/xiazeyu/live2d-widget-models.git

博客主目录:使用 npm install {packagename}命令进行下载

例如:npm install live2d-widget-model-nico


45bd05c79dc84c668c3fb7570be00b53.png

模型选择:


live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01
live2d-widget-model-haru/02
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


3.使用模型


配置博客站点配置文件_config.yml


#看板娘
live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-shizuku    #模板目录,在node_modules里,自己选择
  display:
    position: left
    width: 300 
    height: 600
  mobile:
    show: false  #是否在手机进行显示


ab6cc537720b465ab592c8afe7af8d56.png

4.模型展示


收集了一些我认为不错的模型,大家可以参考一下,如果觉得不好看,看一看也可以避坑

use: live2d-widget-model-nito


0944c05289cd4797b34fc2b3cb56639c.png


use: live2d-widget-model-nipsilon

03e3feae5f6f40eabc236bf0648f1fcf.png


use: live2d-widget-model-nietzsche

ebb2d3eef0be4c6899b88197ba08e3b3.png

use: live2d-widget-model-nico

ea646cd29d4e4554bb8a70f63eade7ac.png

use: live2d-widget-model-z16

ef51061e99cd43ce97abd38c425dac4b.png

use: live2d-widget-model-hibiki

bbc639fa53644ab091bcb3ab910c0429.png

相关文章
|
开发者
使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)
使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)
289 0
|
JavaScript 网络协议 安全
基于若依(SpringBoot前后分离版-vue)的WebSocket消息推送实现
基于若依(SpringBoot前后分离版-vue)的WebSocket消息推送实现
5255 1
|
Java Spring
SpringBoot: 启动Banner在线生成工具
SpringBoot: 启动Banner在线生成工具
27152 1
SpringBoot: 启动Banner在线生成工具
|
开发工具 git
完美解决 fatal: unable to access ‘https://github.com/.../.git‘: Could not resolve host: github.com
完美解决 fatal: unable to access ‘https://github.com/.../.git‘: Could not resolve host: github.com
29592 1
|
编解码 网络安全 CDN
使用cdn为github pages加速
第一次使用cdn
1985 0
|
存储 Ubuntu 物联网
鸿蒙移植i.mx6ull(五) 移植概述
鸿蒙移植i.mx6ull(五) 移植概述
401 0
鸿蒙移植i.mx6ull(五) 移植概述
|
前端开发 JavaScript 程序员
CSS进阶向--纯css实现流光边框
CSS进阶向--纯css实现流光边框
2076 0
|
定位技术
基于Leaflet的轨迹模拟回放
在gis场景中,轨迹回放是一个很常见的场景。比如在导航软件中,在行程结束后根据运动轨迹生成运动图,在keep软件中,会自动记录用户的锻炼轨迹,在结束后可以看到自己的运动轨迹等等。这些需求都是设备在运行中自动记录相应的点,在结合gis模拟即可。
1188 0
基于Leaflet的轨迹模拟回放
|
9月前
|
移动开发 JavaScript 前端开发
分享66个JS时间轴特效,总有一款适合您
分享66个JS时间轴特效,总有一款适合您
481 0

热门文章

最新文章