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. 解决Vue在IE中报错出现不支持=>等ES6语法和“Promise”未定义等问题

    在做VUE项目中大家可能会发现除了IE内核浏览器之外项目都能正常显示,但是到IE就萎了,这主要是IE不支持ES6的原因. 要解决这个我们要先引入browser.js,这样你可以使用ES2015(jav ...

  2. CentOS 安装 Mongodb详解 --- 有Linux基础

    安装包:https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-3.4.1.tgz 安装过程 安装pstree小工具,以及其使用 关闭 ...

  3. springboot非web项目

    使用CommandRunner @SpringBootApplication public class CrmApplication implements ApplicationRunner { @A ...

  4. docker-compose快速部署环境笔记

    # 在含有 docker-compose.yml 的文件夹下 构建容器# 如有使用 Dockerfile 在修改 Dockerfile 文件之后再次执行如下即可应用修改docker-compose u ...

  5. Android Stuido中断点调试和高级调试

    写一个简单的调试程序 import android.os.Bundle; import android.support.v7.app.AppCompatActivity; public class M ...

  6. Dropdown 下拉菜单

    将动作或菜单折叠到下拉菜单中. 基础用法 移动到下拉菜单上,展开更多操作. 通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单.默认情况下,下拉按钮只要ho ...

  7. Eclipse使用高版本的jdk编译低版本的class文件的方法

    如题,在这两天使用eclipse工具编译代码时,编译出来的class文件拿UE工具查看,版本为1.8版本的,而本地使用的tomcat版本是1.6的,运行中报错Unsupported major.min ...

  8. 作业类型维护流程(CO)

    一.建立作业类型——kl01 目的: 藉由做作業類型執行生產報工 目錄路徑: 會計à成本控制à成本中心會計à主檔資料à作業類型à個別處理à KL01 - 建立 Transaction   Code: ...

  9. centos 7安装python3及相关模块

    一.python3安装 1.cd /usr/bin 2.mv python python.bak 3.https://www.python.org/ftp/python/网站选择合适的版本 4.wge ...

  10. 【Python开发】Python之re模块 —— 正则表达式操作

    Python之re模块 -- 正则表达式操作 这个模块提供了与 Perl 相似l的正则表达式匹配操作.Unicode字符串也同样适用. 正则表达式使用反斜杠" \ "来代表特殊形式 ...