安裝插件
安裝插件,在博客根目錄[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
參考釋義
| 參數 | 備選值/類型 | 釋義 |
|---|---|---|
| enable | true/false | 【必選】控制開關 |
| priority | number | 【可選】過濾器優先級，數值越小，執行越早，默認為10，選填 |
| mobile | true/false | 【可選】控制移動端是否啟用，默認移動端禁用 |
| animateitem.class | class | 【可選】添加動畫類名，只支持給class添加 |
| animateitem.style | text | 【可選】動畫樣式，具體類型參考animate.css |
| animateitem.duration | time，單位為s或ms | 【可選】動畫持續時間，單位可以是ms也可以是s。例如3s，700ms |
| animateitem.delay | time，單位為s或ms | 【可選】動畫開始的延遲時間，單位可以是ms也可以是s。例如3s，700ms |
| animateitem.offset | number，單位為px | 【可選】開始動畫的距離（相對瀏覽器底部） |
| animateitem.iteration | number，單位為s或ms | 【可選】動畫重復的次數 |
| animate_css | URL | 【可選】animate.css的CDN鏈接,默認為https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css |
| wow_js | URL | 【可選】wow.min.js的CDN鏈接,默認為https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js |
| wow_init_js | URL | 【可選】wow_init.js的CDN鏈接,默認為https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js |
此文章參考于「Add Blog Animation – Wowjs」。
