L2Dwidget.js L2D网页动画人物添加
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
注意:命令都是在你的博客主目录执行
安装完成之后在package.json
会看到安装的model
此时再去 node_moduels
目录下,可以看到有如下文件夹,这些都是动画主配置
2️⃣下载各种动画model:
地址:https://github.com/xiazeyu/live2d-widget-models.git
3️⃣下载好之后将packages里的所有动画模板拷贝到博客的node_modules目录里
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网页动画人物添加的更多相关文章
- 为自己的网页博客添加L2Dwidget.js看板娘
如果是博客园,直接在设置-->页脚 HTML 代码,加上下面代码: 1 <!-- L2Dwidget.js L2D网页动画人物 --> 2 <script src=" ...
- 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- html+css+js实现网页拼图游戏
代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- CSS3网页动画
CSS3网页动画 概要:CSS3变形是一些效果的集合 如:平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform)他们可以分别操控元素发生平移.旋转.缩放.倾斜等变化. 网页中能够实现 ...
- 第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求
第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求 selenium模块 selenium模块为 ...
- 基于jquery和svg超炫的网页动画
今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: ...
- Node.js 动态网页爬取 PhantomJS 使用入门(转)
Node.js 动态网页爬取 PhantomJS 使用入门 原创NeverSettle101 发布于2017-03-24 09:34:45 阅读数 8309 收藏 展开 版权声明:本文为 winte ...
随机推荐
- 基于 XML 的 AOP 配置(1)
本文连接:https://www.cnblogs.com/qzhc/p/11969734.html 接下来我将用一个很简单的实例 1. 环境搭建 1.1. 第一步:准备必要的代码 业务层代码: Acc ...
- Nginx-rtmp直播之业务流程分析
1. 综述 1.1 直播原理 使用 obs 向 nginx 推送一个直播流,该直播流经 nginx-rtmp 的 ngx_rtmp_live_module 模块转发给 application live ...
- Spring Boot学习笔记(1)
@SpringBootApplication用于注解Spring启动类,如下所示 @SpringBootApplication public class Application { public st ...
- Java-JVM 运行时内存结构(Run-Time Data Areas)
Java 虚拟机定义了在程序执行期间使用的各种运行时数据区域. 其中一些数据区域所有线程共享,在 Java 虚拟机(JVM)启动时创建,仅在 Java 虚拟机退出时销毁. 还有一些数据区域是每个线程的 ...
- leetcode-hard-array-239. Sliding Window Maximum
mycode 89.27% class Solution(object): def maxSlidingWindow(self, nums, k): """ :type ...
- mysql解决删除数据后,主键不连续问题
题记:强迫症需求,一个小技巧. 亲测有效 SET @i=; UPDATE table_name SET `); ALTER TABLE table_name AUTO_INCREMENT=; 注意:主 ...
- docker批量删除容器、镜像(转载)
1.删除所有容器 docker rm `docker ps -a -q` 2.删除所有镜像 docker rmi `docker images -q` 3.按条件删除镜像 没有打标签 docker r ...
- 红米note4高配版 电量用完,充不进去电,解决办法
红米note4高配版 电量用完,充不进去电,解决办法 1.拆机,电池连线拆开,再安上,反复两次.就ok. 2.尾插坏了,买个尾插,换上.就好. 修手机的一次1,2百,太贵
- Jmeter实现WebSocket协议的接口
1.下载websocket插件的jar包 网盘链接:https://pan.baidu.com/s/1FDcTHdQcDo6izgROMgB96w 密码:uags 该包下载完成后直接放在jmeter的 ...
- Cisco的动态Nat、PAT
Lab_C(config)# interface Ethernet0/0 ip address 192.168.30.2 255.255.255.0 router rip network 172. ...