Hexo Butterfly 主题集成 WOW.js 滚动动画配置指南
环境依赖安装
要在 Butterfly 主题中引入滚动触发动画，首先需要获取对应的 Hexo 插件。请在您的 Hexo 项目根目录下执行以下命令来安装依赖包：
npm install hexo-butterfly-wowjs --save修改主题配置
安装完成后，需要修改站点的核心配置文件（_config.yml）或 Butterfly 主题的专属配置文件（_config.butterfly.yml）。将以下 YAML 格式的配置项追加到文件末尾，并根据需求调整参数：
# 滚动动画模块设置
wowjs:
enable: true # 启用或禁用该动画模块
priority: 5 # 脚本注入优先级，数值越小越先执行
mobile: false # 是否在移动设备上激活动画（建议关闭以优化性能）
animateitem: # 动画目标元素及效果列表
- class: aside-content # 目标 DOM 元素的 class 名称
style: animate__fadeInUp # 应用的 Animate.css 动画类名
duration: 800ms # 动画播放总时长
delay: 200ms # 触发前的等待时间
offset: 50 # 距离视口底部多少像素时触发动画
iteration: 1 # 动画循环播放次数
- class: flink-list
style: animate__fadeIn
duration: 1.2s
# 依赖库的 CDN 地址，可按需替换为自定义源
animate_css: https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/animate.min.css
wow_js: https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/wow.min.js
wow_init_js: https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/wow_init.js
配置参数详解
下表详细列出了上述配置项的具体含义及合法取值范围，帮助您进行精细化控制：
| 配置字段 | 数据类型/可选值 | 功能描述 |
|---|---|---|
enable |
Boolean (true/false) | 全局开关，控制是否加载 WOW.js 动画脚本。 |
priority |
Number | Hexo 过滤器执行权重。默认值为 10，数字越小代表执行顺序越靠前。 |
mobile |
Boolean (true/false) | 移动端适配开关。考虑到手机性能，默认设置为 false（禁用）。 |
animateitem.class |
String | 指定需要绑定动画效果的 HTML 元素的 class 属性值。 |
animateitem.style |
String | 具体的动画表现名称，需严格遵循 Animate.css 的命名规范（如 animate__bounceIn）。 |
animateitem.duration |
String (带 s 或 ms 单位) | 定义单次动画的持续时长，例如 1.5s 或 500ms。 |
animateitem.delay |
String (带 s 或 ms 单位) | 元素进入可视区域后，延迟多久开始播放动画。 |
animateitem.offset |
Number | 触发动画的阈值，表示元素距离浏览器视口底部的像素距离。 |
animateitem.iteration |
Number | 设定动画的重复执行次数，默认为 1 次。 |
animate_css |
URL String | Animate.css 样式表的 CDN 引入地址。 |
wow_js |
URL String | WOW.js 核心逻辑库的 CDN 引入地址。 |
wow_init_js |
URL String | 用于初始化 WOW 实例的辅助脚本 CDN 地址。 |
