魔改步骤

  1. 安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令：

    1
    npm install hexo-butterfly-wowjs --save

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    wowjs:
      enable: true #控制动画开关。true是打开，false是关闭
      priority: 10 #过滤器优先级
      mobile: false #移动端是否启用，默认移动端禁用
      animateitem:
        - class: recent-post-item #必填项，需要添加动画的元素的class
          style: animate__zoomIn #必填项，需要添加的动画
          duration: 2s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
          delay: 1s #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
          offset: 100 #选填项，开始动画的距离（相对浏览器底部）
          iteration: 2 #选填项，动画重复的次数
        - class: card-widget
          style: animate__zoomIn
    animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
    wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
    wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

  3. 参数释义

    参数备选值 / 类型释义
    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

外挂标签用法

1
2
3
{% wow [animete],[duration],[delay],[offset],[iteration] %}
内容
{% endwow %}
  1. animate: 动画样式，效果详见 animate.css 参考文档
  2. duration: 选填项，动画持续时间，单位可以是 ms 也可以是 s。例如 3s，700ms。
  3. delay: 选填项，动画开始的延迟时间，单位可以是 ms 也可以是 s。例如 3s，700ms。
  4. offset: 选填项，开始动画的距离（相对浏览器底部）
  5. iteration: 选填项，动画重复的次数

注意，后面四个虽然是选填项，但是当有跨位选填时，次序不能乱。详见示例。
支持嵌套其他外挂标签。

  1. flip 动画效果。

    flip动画效果。

  2. zoomIn 动画效果，持续 5s，延时 5s，离底部 100 距离时启动，重复 10 次。

    zoomIn 动画效果，持续 5s，延时 5s，离底部 100 距离时启动，重复 10 次

  3. slideInRight 动画效果，持续 5s，延时 5s。

    slideInRight 动画效果，持续 5s，延时 5s。

  4. heartBeat 动画效果，延时 5s，重复 10 次。

    heartBeat 动画效果，延时 5s，重复 10 次。

  1. flip 动画效果。

    1
    2
    3
    4
    5
    {% wow animate__flip %}
    {% note success modern%}
    flip 动画效果。
    {% endnote %}
    {% endwow %}

  2. zoomIn 动画效果，持续 5s，延时 5s，离底部 100 距离时启动，重复 10 次。

    1
    2
    3
    4
    5
    {% wow animate__zoomIn,5s,5s,100,10 %}
    {% note info modern%}
    zoomIn 动画效果，持续 5s，延时 5s，离底部 100 距离时启动，重复 10 次
    {% endnote %}
    {% endwow %}

  3. slideInRight 动画效果，持续 5s，延时 5s。

    1
    2
    3
    4
    5
    {% wow animate__slideInRight,5s,5s %}
    {% note warning modern%}
    slideInRight 动画效果，持续 5s，延时 5s。
    {% endnote %}
    {% endwow %}

  4. heartBeat 动画效果，延时 5s，重复 10 次。

    1
    2
    3
    4
    5
    {% wow animate__heartBeat,,5s,,10 %}
    {% note danger modern%}
    heartBeat 动画效果，延时 5s，重复 10 次。
    {% endnote %}
    {% endwow %}