插件效果
插件的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模型插件的更多相关文章

  1. hexo博客yilia主题深度设置

    转载:Shuyan http://dongshuyan.com/2019/05/24/hexo博客注意事项/ 1.微信分享异常 这里是themes\yilia\layout\ _partial\pos ...

  2. Hexo博客yilia主题添加Gitment评论系统

    一开始搭建hexo+yilia博客使用的评论功能是通过来必力实现的.来必力免费,功能多,一开始的体验效果很好,但是后来打开网站发现来必力加载的越来越慢(来必力是韩国的公司,可能是国内限制),遂打算换一 ...

  3. Hexo博客maupassant主题添加Google Adsense广告

    自从在 Github Page 落户以后,很长一段时间使用的是极简且有点艺术范儿的 fexo 主题,而不是大名鼎鼎的 next 主题.后来偶然发现了符合我审美的Hexo博客 maupassant 主题 ...

  4. hexo博客yili主题个性化自定义教程(1) ——借鉴中学习,初认yili主题

    文章转载于:hexo博客yili主题个性化自定义教程(1) --借鉴中学习,初认yili主题 这个博客跌跌撞撞也弄了好多天了,由于Next主题不知道什么情况,被我玩坏了.所以换了一个主题. 大名鼎鼎的 ...

  5. 关于Hexo博客NEXT主题(Gmini)站点图标不显示,显示错误的解决办法

    关于Hexo博客NEXT主题(Gmini)站点图标不显示,显示错误的解决办法   最近闲着没事自己利用Hexo和Github搭了个博客,但是在NEXT(Gmini)主题优化时,出了很多错误,图标不显示 ...

  6. hexo博客更换主题

    前边我们已经学会了博客的搭建了,这次我们来看看怎么样让我们的博客更漂亮,更个性化.那就是来更换博客的主题,让我们的博客与众不同起来.我们可以去hexo的主题官网去挑选你自己喜欢的主题风格.里边收录了很 ...

  7. Hexo博客skapp主题部署填坑指南

    相信大家都很喜欢 hexo skapp 的主题,由于作者采用结巴分词,加上需要依赖各种各样的环境 所以可能大家踩过很多坑,也许每个人踩得坑不一样,这里使用 Docker 容器 centos 来部署, ...

  8. hexo博客pure主题解决不蒜子计数不显示的问题

    最近在建个人博客网站,想统计自己的博客页面访问量,就用到了不蒜子页面访问统计.可是遇到了糟心事,居然不显示!!! 不蒜子官网示例:两行代码,搞定计数 <script async src=&quo ...

  9. Hexo博客NexT主题美化之评论系统

    前言 更多效果展示,请访问我的博客 https://kangmingxian.github.io/ 效果图:   image Valine 诞生于2017年8月7日,是一款基于Leancloud的快速 ...

  10. hexo博客更新主题后上传Git操作

    克隆主题: git clone https://github.com/SuperKieran/TKL.git _config.yml文件中主题改为新增主题 # Extensions ## Plugin ...

随机推荐

  1. 【Spring5】框架新功能

    Spring5框架新功能 整个Spring5框架的代码基于Java8,运行时兼容JDK9,许多不建议使用的类和方法在代码库中删除. Spring5自带了通用的日志封装:log4j2 已经移除了log4 ...

  2. 最新版新款影视直播粉红色UI的CMS源码/带教程/支付已接

    demo软件园每日更新资源,请看到最后就能获取你想要的: 1.最新版新款影视直播粉红色UI的麻豆CMS源码/带教程/支付已接 基于苹果CMS v10影视系统框架开发的前端模板,带会员中心,可设置试看付 ...

  3. jdbc-plus是一款基于JdbcTemplate增强工具包, 基于JdbcTemplate已实现分页、多租户等插件,可自定义扩展插件

    jdbc-plus简介 jdbc-plus是一款基于JdbcTemplate增强工具包, 基于JdbcTemplate已实现分页.多租户等插件,可自定义扩展插件.项目地址: https://githu ...

  4. 如何借助分布式存储 JuiceFS 加速 AI 模型训练

    传统的机器学习模型,数据集比较小,模型的算法也比较简单,使用单机存储,或者本地硬盘就足够了,像 JuiceFS 这样的分布式存储并不是必需品. 随着近几年深度学习的蓬勃发展,越来越多的团队开始遇到了单 ...

  5. CefSharp自定义缓存实现

    大家好,我是沙漠尽头的狼. 上文介绍了<C#使用CefSharp内嵌网页-并给出C#与JS的交互示例>,本文介绍CefSharp的缓存实现,先来说说添加缓存的好处: 提高页面加载加速:Ce ...

  6. ChatGPT Plugin 插件开发:基于 ASP.NET Core Minimal API

    前言 这是一篇ChatGPT插件开发教程,描述如何使用 ASP.NET Core Minimal API 开发 ChatGPT 插件,以最简单的 Todo List 指导示例作为入门教程. 这个Tod ...

  7. 获取scrollTop的方法(兼容所有浏览器)

    /** *获取scrollTop的值,兼容所有浏览器 */ function getScrollTop() { var scrollTop = document.documentElement.scr ...

  8. Prometheus采集Java程序指标信息

    采集Java程序JVM信息 创建 Spring Boot Application 应用程序 进行 https://start.spring.io 使用版本 Spring Boot v2.7.11和JD ...

  9. Selenium - 元素定位(3) - CSS进阶

    Selenium - 元素定位 CSS 定位进阶 元素示例 属性定位 # css 通过id属性定位 driver.find_element_by_css_selector("#kw" ...

  10. vue全家桶进阶之路19:webpack资源打包工具

    Vue.js 是一个前端开发框架,它可以帮助我们快速构建单页应用和复杂的交互界面.而 Webpack 则是一个前端资源打包工具,它可以将多个 JavaScript.CSS.HTML.图片等资源打包成一 ...