breaking changes: 增加 pace.js 加載動畫條 closed #935

README.md

@@ -89,7 +89,7 @@ npm i hexo-theme-butterfly
 - [x] Typewriter Effect: activate_power_mode
 - [x] Background effects (Canvas ribbon/canvas_ribbon_piao/canvas_nest)
 - [x] Mouse click effects (Fireworks/Heart/Text)
-- [x] Preloader/Loading Animation
+- [x] Preloader/Loading Animation/pace.js
 - [x] Busuanzi visitor counter
 - [x] Medium Zoom/Fancybox
 - [x] Mermaid

README_CN.md

@@ -89,7 +89,7 @@ theme: butterfly
 - [x] 打字特效 activate_power_mode
 - [x] 多種背景特效（靜止彩帶/動態彩帶/Canvas Nest）
 - [x] 多種鼠標點擊特效（煙花/文字/愛心）
-- [x] 內置一種 Preloader 加載動畫
+- [x] 內置一種 Preloader 加載動畫和 pace.js 加載動畫條
 - [x] 不蒜子訪問統計
 - [x] 兩種大圖模式（Medium Zoom/Fancybox）
 - [x] Mermaid 圖表顯示
@@ -97,7 +97,7 @@ theme: butterfly
 - [x] 圖片懶加載
 - [x] Instantpage/Pangu/Snackbar彈窗/PWA......
 
-## ✨ 贡献者
+## ✨ 貢獻者
 
 <a href="https://github.com/jerryc127/hexo-theme-butterfly/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=jerryc127/hexo-theme-butterfly" />

_config.yml

@@ -640,7 +640,14 @@ subtitle:
   sub:
 
 # Loading Animation (加載動畫)
-preloader: false
+preloader:
+  enable: false
+  # source
+  # 1. fullpage-loading
+  # 2. pace (progress bar)
+  source: 1
+  # pace theme (see https://codebyzach.github.io/pace/)
+  pace_css_url:
 
 # aside (側邊欄)
 # --------------------------------------

layout/includes/additional-js.pug

@@ -30,9 +30,6 @@ div
   else if theme.local_search.enable
     script(src=url_for(theme.asset.local_search))
 
-  if theme.preloader
-    != partial("includes/loading/loading-js", {}, { cache: true })
-
   .js-pjax
     if needLoadCountJs
       != partial("includes/third-party/card-post-count/index", {}, { cache: true })

layout/includes/layout.pug

@@ -8,8 +8,8 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
   head
     include ./head.pug
   body
-    if theme.preloader
-      !=partial('includes/loading/loading', {}, {cache: true})
+    if theme.preloader.enable
+      !=partial('includes/loading/index', {}, {cache: true})
 
     if theme.background
       #web_bg

layout/includes/loading/fullpage-loading.pug

@@ -0,0 +1,28 @@
+#loading-box
+  .loading-left-bg
+  .loading-right-bg
+  .spinner-box
+    .configure-border-1
+      .configure-core
+    .configure-border-2
+      .configure-core
+    .loading-word= _p('loading')
+
+script.
+  const preloader = {
+    endLoading: () => {
+      document.body.style.overflow = 'auto';
+      document.getElementById('loading-box').classList.add("loaded")
+    },
+    initLoading: () => {
+      document.body.style.overflow = '';
+      document.getElementById('loading-box').classList.remove("loaded")
+
+    }
+  }
+  window.addEventListener('load',()=> { preloader.endLoading() })
+
+  if (!{theme.pjax && theme.pjax.enable}) {
+    document.addEventListener('pjax:send', () => { preloader.initLoading() })
+    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
+  }

layout/includes/loading/index.pug

@@ -0,0 +1,4 @@
+if theme.preloader.source === 1
+  include ./fullpage-loading.pug
+else
+  include ./pace.pug

layout/includes/loading/loading-js.pug

@@ -1,13 +0,0 @@
-script.
-  var preloader = {
-    endLoading: () => {
-      document.body.style.overflow = 'auto';
-      document.getElementById('loading-box').classList.add("loaded")
-    },
-    initLoading: () => {
-      document.body.style.overflow = '';
-      document.getElementById('loading-box').classList.remove("loaded")
-
-    }
-  }
-  window.addEventListener('load',preloader.endLoading())

layout/includes/loading/loading.pug

@@ -1,9 +0,0 @@
-#loading-box
-  .loading-left-bg
-  .loading-right-bg
-  .spinner-box
-    .configure-border-1
-      .configure-core
-    .configure-border-2
-      .configure-core
-    .loading-word= _p('loading')

layout/includes/loading/pace.pug

@@ -0,0 +1,2 @@
+link(rel="stylesheet", href=url_for(theme.preloader.pace_css_url || theme.asset.pace_default_css))
+script(src=url_for(theme.asset.pace_js))

layout/includes/third-party/pjax.pug

@@ -30,7 +30,6 @@ script.
     window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
     window.scrollCollect && window.removeEventListener('scroll', scrollCollect)
 
-    typeof preloader === 'object' && preloader.initLoading()
     document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
     
     if (window.aplayers) {
@@ -76,8 +75,6 @@ script.
 
     // prismjs
     typeof Prism === 'object' && Prism.highlightAll()
-
-    typeof preloader === 'object' && preloader.endLoading()
   })
 
   document.addEventListener('pjax:error', (e) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.5.0-b1",
+  "version": "4.5.0-b2",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

plugins.yml

@@ -5,7 +5,7 @@ algolia_search_v4:
 instantsearch_v4:
   name: instantsearch.js
   file: dist/instantsearch.production.min.js
-  version: 4.45.0
+  version: 4.46.1
 pjax:
   name: pjax
   file: pjax.min.js
@@ -42,12 +42,12 @@ waline_js:
   name: '@waline/client'
   file: dist/waline.js
   other_name: waline
-  version: 2.6.3
+  version: 2.10.0
 waline_css:
   name: '@waline/client'
   file: dist/waline.css
   other_name: waline
-  version: 2.6.3
+  version: 2.10.0
 sharejs:
   name: butterfly-extsrc
   file: sharejs/dist/js/social-share.min.js
@@ -73,7 +73,7 @@ katex_copytex:
 mermaid:
   name: mermaid
   file: dist/mermaid.min.js
-  version: 9.1.6
+  version: 9.1.7
 canvas_ribbon:
   name: butterfly-extsrc
   file: dist/canvas-ribbon.min.js
@@ -187,4 +187,14 @@ artalk_js:
 artalk_css:
   name: artalk
   file: dist/Artalk.css
-  version: 2.3.4
+  version: 2.3.4
+pace_js:
+  name: pace-js
+  other_name: pace
+  file: pace.min.js
+  version: 1.2.4
+pace_default_css:
+  name: pace-js
+  other_name: pace
+  file: themes/blue/pace-theme-minimal.css
+  version: 1.2.4

source/css/_layout/loading.styl

@@ -1,4 +1,4 @@
-if hexo-config('preloader')
+if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1
   .loading-bg
     position: fixed
     z-index: 1000