插件效果
插件的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. Arch Linux配置Java学习环境

    1. JDK JDK8:主流版本 $ sudo pacman -S jdk8-openjdk JDK11:将会是下一个主流版本 $ sudo pacman -S jdk11-openjdk JDK19 ...

  2. java RSA生成公钥和私钥

    1.随机生成密钥对 /** * 随机生成密钥对 * @throws NoSuchAlgorithmException */ public static void genKeyPair() throws ...

  3. vue本地开发配置及项目部署

    一,  二,本地模拟配置代理,请求qq音乐的接口数据  三,axios请求头封装               参考http://www.axios-js.com/zh-cn/docs/#%E4%BB% ...

  4. Linux grep命令详细教程

    [本文出自天外归云的博客园] 简介 Linux grep命令是一种非常常用的文本搜索工具,它可以在给定的文件中搜索匹配的字符串,并输出匹配的行.grep是全称"global search r ...

  5. [Pytorch框架] 3.3 通过Sin预测Cos

    文章目录 3.3 通过Sin预测Cos 3.3 通过Sin预测Cos %matplotlib inline import torch import torch.nn as nn from torch. ...

  6. Docker快速部署Hadoop环境

    文章目录 安装环境 安装过程 拉取镜像 在Docker中创建网络,方便通信 创建Master节点 创建slave1和slave2节点 分别进入三个容器修改hosts文件 在Master执行集群初始化 ...

  7. 是时候,升级你的 Windows 了「GitHub 热点速览」

    不知道多少小伙伴用着 Windows 操作系统,可能会有一个烦恼是有时候操作系统过慢,因为众多拖慢 Windows 系统的组件.Atlas 作为一个修改版的 Windows 系统,能极大提高操作系统运 ...

  8. iOS中的3种定时器

    在iOS中有3种常见的定时器,它们会根据不同的场景进行选择使用. 1.DispatchSourceTimer: 基于GCD实现. 2.CADisplayLink:基于屏幕刷新实现. 3.Timer:基 ...

  9. Vue拖拽排序

    转载至https://www.crazyming.com/note/757/ 使用拖拽功能来实现排序. 需要先学习w3cschool 关于拖拽的教程:http://www.w3school.com.c ...

  10. 2022-05-04:比如,str = “ayxbx“, 有以下4种切法 : a | yxbx、ay | xbx、ayx | bx、ayxb | x, 其中第1、3、4种切法符合:x和y的个数,至少在

    2022-05-04:比如,str = "ayxbx", 有以下4种切法 : a | yxbx.ay | xbx.ayx | bx.ayxb | x, 其中第1.3.4种切法符合: ...