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主页,欢迎访问
Hexo博客yilia主题首页添加helper-live2d模型插件的更多相关文章
- hexo博客yilia主题深度设置
转载:Shuyan http://dongshuyan.com/2019/05/24/hexo博客注意事项/ 1.微信分享异常 这里是themes\yilia\layout\ _partial\pos ...
- Hexo博客yilia主题添加Gitment评论系统
一开始搭建hexo+yilia博客使用的评论功能是通过来必力实现的.来必力免费,功能多,一开始的体验效果很好,但是后来打开网站发现来必力加载的越来越慢(来必力是韩国的公司,可能是国内限制),遂打算换一 ...
- Hexo博客maupassant主题添加Google Adsense广告
自从在 Github Page 落户以后,很长一段时间使用的是极简且有点艺术范儿的 fexo 主题,而不是大名鼎鼎的 next 主题.后来偶然发现了符合我审美的Hexo博客 maupassant 主题 ...
- hexo博客yili主题个性化自定义教程(1) ——借鉴中学习,初认yili主题
文章转载于:hexo博客yili主题个性化自定义教程(1) --借鉴中学习,初认yili主题 这个博客跌跌撞撞也弄了好多天了,由于Next主题不知道什么情况,被我玩坏了.所以换了一个主题. 大名鼎鼎的 ...
- 关于Hexo博客NEXT主题(Gmini)站点图标不显示,显示错误的解决办法
关于Hexo博客NEXT主题(Gmini)站点图标不显示,显示错误的解决办法 最近闲着没事自己利用Hexo和Github搭了个博客,但是在NEXT(Gmini)主题优化时,出了很多错误,图标不显示 ...
- hexo博客更换主题
前边我们已经学会了博客的搭建了,这次我们来看看怎么样让我们的博客更漂亮,更个性化.那就是来更换博客的主题,让我们的博客与众不同起来.我们可以去hexo的主题官网去挑选你自己喜欢的主题风格.里边收录了很 ...
- Hexo博客skapp主题部署填坑指南
相信大家都很喜欢 hexo skapp 的主题,由于作者采用结巴分词,加上需要依赖各种各样的环境 所以可能大家踩过很多坑,也许每个人踩得坑不一样,这里使用 Docker 容器 centos 来部署, ...
- hexo博客pure主题解决不蒜子计数不显示的问题
最近在建个人博客网站,想统计自己的博客页面访问量,就用到了不蒜子页面访问统计.可是遇到了糟心事,居然不显示!!! 不蒜子官网示例:两行代码,搞定计数 <script async src=&quo ...
- Hexo博客NexT主题美化之评论系统
前言 更多效果展示,请访问我的博客 https://kangmingxian.github.io/ 效果图: image Valine 诞生于2017年8月7日,是一款基于Leancloud的快速 ...
- hexo博客更新主题后上传Git操作
克隆主题: git clone https://github.com/SuperKieran/TKL.git _config.yml文件中主题改为新增主题 # Extensions ## Plugin ...
随机推荐
- 颜值即正义,献礼就业季,打造多颜色多字体双飞翼布局技术简历模版(Resume)
一年好景君须记,最是橙黄橘绿时.金三银四,秣马厉兵,没有一个好看的简历模板怎么行?无论是网上随便下载还是花钱买,都是一律千篇的老式模版,平平无奇,味同嚼蜡,没错,蜡都要沿着嘴角流下来了.本次我们基于H ...
- 一个可用于生产项目 基于 .NET 6 自研ORM
Fast Framework 作者 Mr-zhong 代码改变世界.... 一.前言 Fast Framework 基于NET6.0 封装的轻量级 ORM 框架 支持多种数据库 SqlServer O ...
- java处理集合工具
public static <K, V> Map<K, V> parseListToMap(Collection<V> list, Function<V, K ...
- JVM有意思的图-持续更新
放一些JVM有意思的图 通过一行代码联想JVM:
- live555中ts流详细解析
live555中ts流详细解析 该文档主要是对live555源码下testProgs中testMPEG2TransportStreamer服务器端的详细分析.主要分析ts流实现的总体调用流程.(重新整 ...
- 解密Prompt系列6. lora指令微调扣细节-请冷静,1个小时真不够~
上一章介绍了如何基于APE+SELF自动化构建指令微调样本.这一章咱就把微调跑起来,主要介绍以Lora为首的低参数微调原理,环境配置,微调代码,以及大模型训练中显存和耗时优化的相关技术细节 标题这样写 ...
- 【Python基础】列表的基本使用
列表是由一系列元素组成的有序集合.列表可以包含任意类型的元素.它是可变的,可以随时添加.删除.替换元素.列表可以使用方括号([])括起来,并使用逗号分隔元素. list1 = [1, 2, 3, &q ...
- 【由浅入深学MySQL】- MySQL连接查询详解
本系列为:MySQL数据库详解,为千锋教育资深Java教学老师独家创作 致力于为大家讲解清晰MySQL数据库相关知识点,含有丰富的代码案例及讲解.如果感觉对大家有帮助的话,可以[点个关注]持续追更~ ...
- 2021-11-18:给定一个长度len,表示一共有几位。所有字符都是小写(a~z),可以生成长度为1,长度为2,长度为3...长度为len的所有字符串。如果把所有字符串根据字典序排序,每个字符串都有
2021-11-18:给定一个长度len,表示一共有几位.所有字符都是小写(a~z),可以生成长度为1,长度为2,长度为3-长度为len的所有字符串.如果把所有字符串根据字典序排序,每个字符串都有所在 ...
- 2014年蓝桥杯C/C++大学B组省赛真题(地宫寻宝)
题目描述: X 国王有一个地宫宝库.是 n x m 个格子的矩阵.每个格子放一件宝贝.每个宝贝贴着价值标签. 地宫的入口在左上角,出口在右下角. 小明被带到地宫的入口,国王要求他只能向右或向下行走. ...