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网页动画人物添加的更多相关文章

  1. 为自己的网页博客添加L2Dwidget.js看板娘

    如果是博客园,直接在设置-->页脚 HTML 代码,加上下面代码: 1 <!-- L2Dwidget.js L2D网页动画人物 --> 2 <script src=" ...

  2. 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  3. html+css+js实现网页拼图游戏

    代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...

  4. html5网页动画总结--jQuery旋转插件jqueryrotate

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  5. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  6. CSS3网页动画

    CSS3网页动画 概要:CSS3变形是一些效果的集合 如:平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform)他们可以分别操控元素发生平移.旋转.缩放.倾斜等变化. 网页中能够实现 ...

  7. 第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求

    第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求 selenium模块 selenium模块为 ...

  8. 基于jquery和svg超炫的网页动画

    今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: ...

  9. Node.js 动态网页爬取 PhantomJS 使用入门(转)

    Node.js 动态网页爬取 PhantomJS 使用入门 原创NeverSettle101 发布于2017-03-24 09:34:45 阅读数 8309  收藏 展开 版权声明:本文为 winte ...

随机推荐

  1. vmware安装centos虚拟机,没有ip地址

    如果centos没有ip地址,就不能通过xshell等工具进行连接,且在上面部署的项目,外部也不能正常访问 两种方式可以解决 第一种,在安装的时候,在INSTALLATION SUMMARY界面的SY ...

  2. VisualVM通过密码JMX远程连接JVM

    如果本地安装了JDK,则在${java.home}/bin/下可找到jvisualvm.exe,双击打开即可使用.否则,去官网下载一个,解压即可使用.现有一个springboot程序springboo ...

  3. android data binding jetpack IV 绑定一个方法另一种写法和参数传递

    android data binding jetpack VIII BindingConversion android data binding jetpack VII @BindingAdapter ...

  4. Jdbc中大文本类型的处理

    Oracle中大文本数据类型, Clob    长文本类型   (MySQL中不支持,使用的是text) Blob    二进制类型 MySQL数据库, Text    长文本类型 Blob    二 ...

  5. CSS操作表格的边框和表格的属性示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 2019.11.07【每天学点SAP小知识】Day2 - ABAP 7.40新语法 - 内表

    今天学习一下内表的表达式在ABAP 7.4之后的语法: SELECT * FROM mara INTO TABLE @DATA(gt_mara)UP TO 10 ROWS. DATA gt_mara_ ...

  7. python中日志logging模块的性能及多进程详解

    python中日志logging模块的性能及多进程详解 使用Python来写后台任务时,时常需要使用输出日志来记录程序运行的状态,并在发生错误时将错误的详细信息保存下来,以别调试和分析.Python的 ...

  8. Centos 在线安装 nginx

    centos 在线安装 nginx 安装nginx ​ 参考文档: http://nginx.org/en/linux_packages.html 中的RHEL/CentOS章节,按照步骤安装repo ...

  9. jdk1.8-ArrayDeque

    一:类的继承关系 UML图 类的继承关系: )))))) ]) & ()) == ) & ()) == ) & ()] = e) ) & (); return resu ...

  10. 并发编程之原子Atomic&Unsafe

    1.原子更新基本类型类   用于通过原子的方式更新基本类型,Atomic包提供了以下三个类: AtomicBoolean:原子更新布尔类型. AtomicInteger:原子更新整型. AtomicL ...