分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

L2Dwidget.js ?L2D网页动画人物添加

发布时间:2023-09-06 02:32责任编辑:胡小海关键词:js动画

hexo 添加live2d看板动画

https://www.jianshu.com/p/3a6342e16e57

首先贴出官网代码

官网地址配置:https://www.npmjs.com/package/hexo-helper-live2d

按如下步骤执行

1?? 首先检查博客主目录下面的 package.json里是否有
"hexo-helper-live2d": "^3.0.3",依赖,有的话可以先卸载
使用命令:npm uninstall hexo-helper-live2d
之后再安装:npm install --save hexo-helper-live2d
注意:命令都是在你的博客主目录执行

 
我的博客目录结构:d:/github/blog

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

此时再去 node_moduels目录下,可以看到有如下文件夹,这些都是动画主配置
 
node_modules目录

2??下载各种动画model:
地址:https://github.com/xiazeyu/live2d-widget-models.git

3??下载好之后将packages里的所有动画模板拷贝到博客的node_modules目录里


 
packages目录

4??配置博客站点配置文件,_config.yml

live2d: ?enable: true ?pluginModelPath: assets/ ?model: ???use: live2d-widget-model-epsilon2_1 ?#模板目录,在node_modules里 ?display: ???position: right ???width: 150 ????height: 300 ?mobile: ???show: false ?#是否在手机进行显示

5??开始部署
当使用hexo clean或者 hexo g命令的时候,这时候就可以看到如下日志了

 
构建日志

INFO HEXO-HELPER-LIVE2D: Loaded model from npm-module(1), live2d-widget-model-epsilon2_1@1.0.5 from ‘D:\github\blog\node_modules\live2d-widget-model-epsilon2_1\assets‘
说明已经加载到了配置的动画模板,到此就完成了。


L2Dwidget.js ?L2D网页动画人物添加

原文地址:https://www.cnblogs.com/xiaqiuchu/p/10356578.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved