Hexo添加Live2D看板娘最新教程
目录
- 前言
- 介绍
- Live2D
- 看板娘
- 添加Live2D看板娘
- 准备工作
- 安装依赖
- 下载model文件
- 添加live2d看板娘到hexo
- 查看效果
- 发布
- 结束语
- 参考
前言
上次我们搭建了hexo博客,今天来添加一个Live2D看板娘。在网上看了一些教程,不过hexo更新之后更简单,以前的一些教程有些过时了,所以想写一篇更新的教程。
介绍
Live2D
Live2D是一种应用于电子游戏的绘图渲染技术,由日本Cybernoids公司开发,通过一系列的连续图像和人物建模来生成一种类似二维图像的三维模型,换句话说就是2D的素材实现一定程度的3D效果,但只能是一定程度3D,因为Live 2D人物无法大幅度转身。
很多知名的动漫都是Live2D游戏改编的或者反过来的,例如:《我的妹妹不可能有那么可爱》、《我的朋友很少》、《樱花庄的宠物女孩》等。
《路人女主的养成方法》中安艺伦也一行人制作的游戏就是Live2D游戏,当然,这部轻小说本身也被做成了Live2D游戏。
live2d官方网站就是live2d.com,里面提供了live2d开发和编辑软件(如Live2D Cubism editor和Live2D Euclideditor),还有开发使用教程等,对相关制作感兴趣的可以看看。
更详细的介绍请看二次元live2d看板娘中的web前端技术
看板娘
看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一。简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义。
添加Live2D看板娘
准备工作
- 检查博客主目录下的
package.json
是否有"hexo-helper-live2d": "^3.0.3"
,依赖:
有的话可以先卸载:npm uninstall hexo-helper-live2d
安装依赖
- 安装依赖:
npm install --save hexo-helper-live2d
安装过程中可能遇到一些依赖性问题,按提示做就行
遇到这种就运行npm audit fix
,如果还不成功,会提示你用npm audit fix --force
,一般这个时候就成功了。
成功了之后可以看到当前目录的node_modules/
下有个live2d-widget
目录,这是动画的主配置:
这个时候是没有模型文件的,所以下一步是下载模型文件
下载model文件
- 下载模型文件:
模型文件可直接用npm安装:如下
npm install live2d-widget-model-shizuku
model名字可在live2d-widget-models中找到,也可点击live2d看板娘模型预览来选择你喜欢的模型进行安装。
安装完成可以在node_modules/
下看到live2d-widget-model-shizuku
文件夹
添加live2d看板娘到hexo
- 配置Hexo的主
_config.yml
或者使用的主题的_config.yml
添加以下代码到配置文件中:## Live2D看板娘 live2d:enable: truepluginModelPath: assets/model:#模板目录,在node_modules里use: live2d-widget-model-shizuku display:position: rightwidth: 300 height: 600mobile:# 在手机端显示show: false rect:opacity:0.7
查看效果
使用hexo g
生成文件,使用hexo server
即可在本地查看效果:
打开浏览器访问:http://localhost:4000
即可看到效果:
发布
在本地找到满意的效果后,使用hexo d
将其发布到你的hexo服务器上,即可在外网查看了。可在我的hexo博客预览,只不过我现在用的github作服务器,访问速度有点慢。
没有安装过hexo的同学,可参见教程hexo最全搭建教程,安装过程中的一些错误我做了记录,请见使用Hexo搭建博客遇到的问题及解决。
结束语
那么到这里,添加Live2d看板娘教程就结束了。
如果对你有帮助,请点个赞再走,谢谢。
参考
- 二次元live2d看板娘效果中的web前端技术
- 博客园添加live2d看板娘
- Hexo添加Live2D看板娘+模型预览
Hexo添加Live2D看板娘最新教程相关推荐
- 网页添加Live2D看板娘简易教程
看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一.简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用类似品牌形象代言人的含义. 如果想在自己的博客上 ...
- hexo+yilia添加live2d看板娘
文章目录 安装 1.安装插件 2.选择模型 3.配置 4.效果图 补充 取消看板娘 暂时不用 卸载插件 添加live2d看板娘,插件:hexo-helper-live2d,github仓库:https ...
- 搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细步骤
一.安装hexo 1.下载安装软件 git:https://git-scm.com/downloads node:https://nodejs.org/en/ 2.安装好两个工具之 ...
- html网页制作看板娘原理,博客网页上添加live2D看板娘
一:前言 "看板娘",简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用类似品牌形象代言人的含义.所用的技术是live2D,live2d并不 ...
- html的美图片加上2d动画,网站上面添加一个动漫小女孩的html代码 WordPress添加live2d看板娘...
在你博客程序头部文件(header.php)引入界面样式,在 head 标签内插入如下代码 在你博客程序页脚文件(footer.php)引入脚本,在最后一个 标签前插入如下代码: var messag ...
- 博客园添加live2D看板娘和樱花飘落背景
写在前面 本文主要描述了怎么给博客园添加看板娘和樱花飘落特效,文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文使用的东西 live2d(看板娘) 樱花飘落 博客园 文章目录 写在前面 本文使用 ...
- 博客园添加Live2d看板娘
最近给自己的博客添加了个动态的小萝莉,给大家分享一下,效果请见我的博客左下角: (当然你也可以在自己的html页面引入下面的js来添加小萝莉) 1.首先最重要的一点你要申请一个博客园账号. 2.其次申 ...
- hexo添加live2d看板动画
hexo的next主题添加看板动画 git定位到根目录文件,并输入以下命令 1 npm install --save hexo-helper-live2d 下载各种模型:npm install + 模 ...
- 网页/博客Hexo添加live2d游戏角色看板娘,简易添加,碧蓝航线等live2d新型游戏角色模型(moc3)
目前博客上常见live2d看板娘很多都已经是比较老的了(旧版的是moc文件的)并且相应的插件不支持新版模型(moc3文件),如碧蓝航线的live2d模型.本篇介绍在网页里引入moc3文件的方法 示例网 ...
最新文章
- 吴恩达“官宣”荣升准爸爸~
- django多线程_Django两种启动方式(runserver和uwsgi)的区别
- angular 标准目录结构_Angular-cli新建项目目录结构详解
- 支付和清算就是信息流和资金流
- 前端学习(1562):ng-hide,ng-show
- 你应该了解的python 垃圾回收机制
- [转]Http请求中Content-Type讲解以及在Spring MVC中的应用
- chain rule 到 Markov chain
- vim命令大全(最全)
- LIMS实验室系统无纸化管理给实验室带来的帮助
- css让div背景变成半透明
- 新浪微博开放平台php sdk,新浪微博开放平台
- FBReader工程结构解析
- 隐藏CAD图层内容,2种方法搞定
- 【PTA】【C语言】求闰年数
- 大数据与云计算学习(1)
- java进程和ksoftirqd进程的CPU突然涨高的原因
- 本地用户和组 无法访问计算机 无效的语法,找不到Windows NT用户或组“DOMAIN \ USER”?...
- AToken全观:小米雷军也投区块链钱包 AToken有机会的
- MYSQL 1045 - Access denied for user ‘root‘@‘localhost‘ (using password: YES)