Butterfly主题添加动画加载效果

安装插件

安装插件,在博客根目录[Blogroot]下打开终端,运行以下指令:

npm install hexo-butterfly-wowjs --save

添加配置

添加配置信息,以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

wowjs:enable: true #控制动画开关。true是打开,false是关闭priority: 10 #过滤器优先级mobile: false #移动端是否启用,默认移动端禁用animateitem:- class: recent-post-item #必填项,需要添加动画的元素的classstyle: animate__zoomIn #必填项,需要添加的动画duration: 1s #选填项,动画持续时间,单位可以是ms也可以是s。例如3s,700ms。delay: 0s #选填项,动画开始的延迟时间,单位可以是ms也可以是s。例如3s,700ms。offset: 100 #选填项,开始动画的距离(相对浏览器底部)iteration: 1 #选填项,动画重复的次数- class: card-widgetstyle: animate__zoomInanimate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.csswow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.jswow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

参考释义

参数备选值/类型释义
enabletrue/false【必选】控制开关
prioritynumber【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
mobiletrue/false【可选】控制移动端是否启用,默认移动端禁用
animateitem.classclass【可选】添加动画类名,只支持给class添加
animateitem.styletext【可选】动画样式,具体类型参考animate.css
animateitem.durationtime,单位为s或ms【可选】动画持续时间,单位可以是ms也可以是s。例如3s,700ms
animateitem.delaytime,单位为s或ms【可选】动画开始的延迟时间,单位可以是ms也可以是s。例如3s,700ms
animateitem.offsetnumber,单位为px【可选】开始动画的距离(相对浏览器底部)
animateitem.iterationnumber,单位为s或ms【可选】动画重复的次数
animate_cssURL【可选】animate.css的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
wow_jsURL【可选】wow.min.js的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
wow_init_jsURL【可选】wow_init.js的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

此文章参考于「Add Blog Animation – Wowjs」。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/42903.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简单介绍 Dagger2 的入门使用

依赖注入 在介绍 Dagger2 这个之前,必须先解释一下什么是依赖注入,因为这个库就是用来做依赖注入的。所以这里先简单用一句话来介绍一下依赖注入: 依赖注入是一种设计模式,它允许对象在运行时注入其依赖项。而不是在编译时确定&a…

Andorid 11 InputDispatcher FocusedApplication设置过程分析

在Input ANR中,有一类ANR打印的reason 为 “xx does not have a focused window” ,表明 输入事件 5s 内,只有FocusedApplication,而没找到focused window。本文分析下FocusedApplication的设置过程。 setFocusedApp 源码路径&am…

iOS 应用内存超过多少会收到系统内存警告 ?

iOS 应用内存超过多少会收到系统内存警告 ? 在 iOS 应用中,系统内存警告的触发是由 iOS 操作系统动态决定的,并不是一个固定的阈值。系统会根据当前设备的可用内存、正在运行的其他应用程序的内存需求以及当前应用程序的内存占用情况来判断是…

用PlantUML可视化显示JSON

概述 PlantUML除了绘制UML中的一些标准图之外,也可以以图形化的方式显示一些其他图形或数据形式的结构,这其中就包括JSON。 它以一种简单且优美的图形形式,表达了JSON的结构。你可以用它来作为设计JSON数据文件的依据,辅助设计或…

day01:项目概述,环境搭建

文章目录 软件开发整体介绍软件开发流程角色分工软件环境 外卖平台项目介绍项目介绍定位功能架构 产品原型技术选型 开发环境搭建整体结构:前后端分离开发前后端混合开发缺点前后端分离开发 前端环境搭建Nginx 后端环境搭建熟悉项目结构使用Git进行版本控制数据库环…

【C++】AVL树(旋转、平衡因子)

🌈个人主页:秦jh_-CSDN博客🔥 系列专栏:https://blog.csdn.net/qinjh_/category_12575764.html?spm1001.2014.3001.5482 ​ 目录 前言 AVL树的概念 节点 插入 AVL树的旋转 新节点插入较高左子树的左侧---左左:…

【C++】stack和queue的模拟实现 双端队列deque的介绍

🔥个人主页: Forcible Bug Maker 🔥专栏: STL || C 目录 🌈前言🔥stack的模拟实现🔥queue的模拟实现🔥deque(双端队列)deque的缺陷 🌈为什么选择…

基于Go 1.19的站点模板爬虫

创建一个基于Go 1.19的站点模板爬虫涉及到几个关键步骤:初始化项目,安装必要的包,编写爬虫逻辑,以及处理和存储抓取的数据。下面是一个简单的示例,使用goquery库来解析HTML,并使用net/http来发起HTTP请求。…

【containerd】解决敲击crictl images命令报错问题

【Containerd】解决输入crictl images命令报错问题 文章目录 【Containerd】解决输入crictl images命令报错问题问题复现解决办法验证结果参考链接 问题复现 [rootmaster01 ~]# crictl images WARN[0000] image connect using default endpoints: [unix:///var/run/dockershim…

七、Docker常规软件安装

目录 一、总体步骤 二、安装tomcat 1、docker hub上查找tomcat镜像 三、安装MySQL 1、查看MySQL镜像 2、拉取MySQL镜像到本地,本次拉取MySQL5.7 3、使用MySQL镜像创建容器 4、使用Windows数据库工具,连接MySQL实例 5、常见问题 6、创建MySQL容器实例 7、新…

DDP:微软提出动态detection head选择,适配计算资源有限场景 | CVPR 2022

DPP能够对目标检测proposal进行非统一处理,根据proposal选择不同复杂度的算子,加速整体推理过程。从实验结果来看,效果非常不错 来源:晓飞的算法工程笔记 公众号 论文: Should All Proposals be Treated Equally in Object Detect…

同声传译app哪个好免费?对话交流推荐这5个

暑期到,也是旅游出行的好日子~自打周边不少国家都开放免签政策之后,出国游也变得更加方便了~对于外语水平不高的朋友来讲,想要保证出行体验,其实手上只要备好一个同声传译app就OK! 倘若你还不清楚都有哪些同声传译app…

背部筋膜炎的症状及治疗

背部筋膜炎,也称为胸背肌筋膜炎,主要是由于劳损或风寒湿邪侵入引起的。其典型症状主要包括: 1、疼痛:背部筋膜一旦出现炎症性病变,会对周围交感神经组织产生刺激作用,从而引起不同程度的疼痛症状。 2、僵…

NAT:地址转换技术

为什么会引入NAT? NAT(网络地址转换)的引入主要是为了解决两个问题 IPv4地址短缺:互联网快速发展,可用的公网IP地址越来越少。网络安全:需要一种方法来保护内部网络不被直接暴露在互联网上。 IPv4 &…

低通滤波以及卡尔曼滤波

先讲解几个低通滤波,低通滤波比卡尔曼滤波简单,因为卡尔曼滤波涉及到两个输入量,一个是控制量,一个是观测量,而低通滤波是一个输入量 1,利用工具箱配置低通滤波 参考地址:https://blog.csdn.net…

SystemUIService启动-Android13

SystemUIService启动-Android13 1、SystemUIService启动2、其他SystemUI services启动2.1 Dagger依赖注入2.2 Recents为例 1、SystemUIService启动 SystemUI启动&#xff0c;及其SystemUIService启动 <!-- SystemUi service component --><string name"config_s…

应用层协议原理——可供应用程序使用的运输服务

前面讲过套接字是应用程序进程和运输层协议之间的接口。在发送端的应用程序将报文推进该套接字。在该套接字的另一侧&#xff0c;运输层协议负责使该报文进入接收进程的套接字。 包括因特网在内的很多网络提供了不止一种运输层协议。当开发一个应用时&#xff0c;必须选择一种可…

什么是海外仓管理自动化?策略及落地实施步骤指南

作为海外仓的管理者&#xff0c;你每天都面临提高海外仓运营效率、降低成本和满足客户需求的问题。海外仓自动化管理技术为这些问题提供了不错的解决思路&#xff0c;不过和任何新技术一样&#xff0c;从策略到落地实施&#xff0c;都有一个对基础逻辑的认识过程。 今天我们整…

重生奇迹mu的地图名

地图之一&#xff1a;勇者大陆 勇者大陆地处奇迹大陆中央。终年阴雨连绵&#xff0c;气候潮湿闷热。植物由充满黑暗阴森气氛的草地所构成。这里的NPC数量是所有地图中最多的。因为地步交通要冲&#xff0c;所以也是玩家聚集最多的地方。 这里是剑士、魔法师、魔剑士和圣导师初…

vue3关于在线考试 实现监考功能 推流拉流

vue3 关于在线考试 实现监考功能&#xff0c; pc端考试 本质是直播推流的功能 使用腾讯云直播: 在线文档 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><link rel"icon" href"/f…