From 3ce85d9e721943a0a05e51df459bf8e80e48e160 Mon Sep 17 00:00:00 2001
From: MHuiG <616001163@qq.com>
Date: Thu, 8 Sep 2022 08:38:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20pacejs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An automatic web page progress bar.
https://github.com/CodeByZach/pace

BREAKING CHANGE: 移除 nprogress
---
 _cdn.yml                                    |  25 +--
 _config.yml                                 |   9 +-
 layout/_partial/scripts/index.ejs           |   4 +
 layout/_plugins/pace/script.ejs             |   7 +
 layout/_plugins/pjax/animate.ejs            |  31 ----
 layout/_plugins/pjax/index.ejs              |   3 -
 scripts/events/lib/cdn.js                   |  10 +-
 source/css/_style/_plugins/index.styl       |   4 +-
 source/css/_style/_plugins/pjaxanimate.styl | 160 --------------------
 9 files changed, 45 insertions(+), 208 deletions(-)
 create mode 100644 layout/_plugins/pace/script.ejs
 delete mode 100644 layout/_plugins/pjax/animate.ejs
 delete mode 100644 source/css/_style/_plugins/pjaxanimate.styl

diff --git a/_cdn.yml b/_cdn.yml
index cac9b391e..81236ab07 100644
--- a/_cdn.yml
+++ b/_cdn.yml
@@ -253,13 +253,6 @@ pjax:
   npm: true
   static: true
   cdnjs: true
-nprogress:
-  name: nprogress
-  file: nprogress.min.js
-  version: 0.2.0
-  npm: true
-  static: true
-  cdnjs: true
 font-awesome-animation:
   name: font-awesome-animation
   file: css/font-awesome-animation.min.css
@@ -427,8 +420,22 @@ artitalk:
   npm: true
   static: false
   cdnjs: false
-
-
+pace_js:
+  name: pace-js
+  cdnjs_name: pace
+  file: pace.min.js
+  version: 1.2.4
+  npm: true
+  static: false
+  cdnjs: true
+pace_css:
+  name: pace-js
+  cdnjs_name: pace
+  file: themes/${pace_color}/pace-theme-${pace_theme}.css
+  version: 1.2.4
+  npm: true
+  static: false
+  cdnjs: true
 
 
 
diff --git a/_config.yml b/_config.yml
index 3aa1c342f..1dd3e1218 100755
--- a/_config.yml
+++ b/_config.yml
@@ -838,11 +838,18 @@ plugins:
     cover: true          # 封面是否pjax处理 false：每次切换页面封面都重载，适合封面较少的情况 true：封面经过Pjax处理，适合封面较多的情况
     timeout: 5000        # The timeout in milliseconds for the XHR requests. Set to 0 to disable the timeout.
     cacheBust: false     # When set to true, Pjax appends a timestamp  to skip the browser cache.
-    animation: false     # false, nprogress, circle
     exclude:             # 被屏蔽的 url 地址将不启用 pjax 跳转，可以在控制台下使用 window.location.pathname 获取
       # - '/artitalk/'   # artitalk 不支持 pjax
       # - '/bbtalk/'     # bbtalk 不支持 pjax
 
+  # pace
+  # An automatic web page progress bar.
+  # https://github.com/CodeByZach/pace
+  pace:
+    enable: true
+    color: blue # black, blue, green, orange, pink, purple, red, silver, white, yellow
+    theme: minimal # big-counter, bounce, barber-shop, center-atom, center-circle, center-radar, center-simple, corner-indicator, fill-left, flat-top, flash, loading-bar, mac-osx, material, minimal
+
   # 暗黑模式 darkmode
   # 开关按钮：在 navbar.menu 中添加：
   # - name: 暗黑模式 # 可自定义
diff --git a/layout/_partial/scripts/index.ejs b/layout/_partial/scripts/index.ejs
index 93d43d8ea..3a9bb387d 100644
--- a/layout/_partial/scripts/index.ejs
+++ b/layout/_partial/scripts/index.ejs
@@ -119,6 +119,10 @@
   <%- partial('../../_plugins/swiper/script') %>
 <% } %>
 
+<% if (theme.plugins.pace.enable) { %>
+  <%- partial('../../_plugins/pace/script') %>
+<% } %>
+
 <!-- pjax 标签必须存在于所有页面 否则 pjax error -->
 <pjax>
 <% if (page.plugins) { %>
diff --git a/layout/_plugins/pace/script.ejs b/layout/_plugins/pace/script.ejs
new file mode 100644
index 000000000..0989c5af1
--- /dev/null
+++ b/layout/_plugins/pace/script.ejs
@@ -0,0 +1,7 @@
+<script>
+  volantis.js("<%- theme.cdn.pace_js %>").then(() => {
+    Pace.options.restartOnPushState = false;
+    volantis.pjax.send(Pace.restart);
+  })
+  volantis.css("<%- theme.cdn.pace_css %>");
+</script>
\ No newline at end of file
diff --git a/layout/_plugins/pjax/animate.ejs b/layout/_plugins/pjax/animate.ejs
deleted file mode 100644
index 081c6d097..000000000
--- a/layout/_plugins/pjax/animate.ejs
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- 样式位于：source/css/_plugins/pjaxanimate.styl -->
-
-<div class="pjax-animate">
-  <% if (theme.plugins.pjax.animation == 'nprogress') { %>
-    <script src="<%- theme.cdn.nprogress %>"></script>
-    <div id="loading-bar-wrapper"><script>NProgress.configure({parent:"#loading-bar-wrapper",trickleSpeed: 100})</script></div>
-    <script>
-      window.ShowLoading = function() {
-        NProgress.start();
-      };
-      window.HideLoading = function() {
-        NProgress.done();
-      }
-    </script>
-  <%} else if (theme.plugins.pjax.animation == 'circle') { %>
-    <div class="loading-circle"><div id="loader-circle"></div></div>
-    <script>
-      window.ShowLoading = function() {
-        document.querySelector(".loading-circle").style.display="block"
-      };
-      window.HideLoading = function() {
-        document.querySelector(".loading-circle").style.display="none"
-      }
-    </script>
-  <% } %>
-	<script>
-		volantis.pjax.push(window.HideLoading,'HideLoading');
-		volantis.pjax.send(window.ShowLoading,'ShowLoading');
-		volantis.pjax.error(window.HideLoading,'HideLoading');
-	</script>
-</div>
diff --git a/layout/_plugins/pjax/index.ejs b/layout/_plugins/pjax/index.ejs
index 49707adbe..554230a41 100644
--- a/layout/_plugins/pjax/index.ejs
+++ b/layout/_plugins/pjax/index.ejs
@@ -10,9 +10,6 @@
 %>
 
 <%- js(theme.cdn.pjax) %>
-<% if (theme.plugins.pjax.animation){ %>
-<%- partial('animate') %>
-<% } %>
 <script>
     var pjax;
     document.addEventListener('DOMContentLoaded', function () {
diff --git a/scripts/events/lib/cdn.js b/scripts/events/lib/cdn.js
index a161d2dcb..c96beae79 100644
--- a/scripts/events/lib/cdn.js
+++ b/scripts/events/lib/cdn.js
@@ -143,6 +143,8 @@ function match_cdn_source(key) {
             version = theme_version
           }
           const timestamp = hexo.theme.config.getStartTime;
+          const pace_color = hexo.theme.config?.plugins?.pace?.color;
+          const pace_theme = hexo.theme.config?.plugins?.pace?.theme;
           const value = {
             version,
             name,
@@ -150,8 +152,14 @@ function match_cdn_source(key) {
             min_file,
             prefix,
             timestamp,
+            pace_color,
+            pace_theme,
           }
-          return format?.replace(/\$\{(.+?)\}/g, (match, $1) => value[$1]) || null
+          let res = format;
+          while (/\$\{(.+?)\}/g.test(res)) {
+            res = res?.replace(/\$\{(.+?)\}/g, (match, $1) => value[$1]) || null
+          }
+          return res
         }
       }
     }
diff --git a/source/css/_style/_plugins/index.styl b/source/css/_style/_plugins/index.styl
index ff4ca3498..61ebb004f 100644
--- a/source/css/_style/_plugins/index.styl
+++ b/source/css/_style/_plugins/index.styl
@@ -8,13 +8,11 @@ if hexo-config('plugins.message.enable')
   @import 'message'
 if hexo-config('plugins.aplayer.enable')
   @import 'aplayer'
-if hexo-config('plugins.pjax.enable') and hexo-config('plugins.pjax.animation')
-  @import 'pjaxanimate'
 if hexo-config('comments.service')=='gitalk'
   @import 'gitalk'
 if hexo-config('custom_css.cursor.enable')
   @import 'cursor'
-if hexo-config('rightmenu.enable') or hexo-config('rightmenus.enable')
+if hexo-config('rightmenus.enable')
   @import '_rightmenu/*'
 
 
diff --git a/source/css/_style/_plugins/pjaxanimate.styl b/source/css/_style/_plugins/pjaxanimate.styl
deleted file mode 100644
index 2f7a713bc..000000000
--- a/source/css/_style/_plugins/pjaxanimate.styl
+++ /dev/null
@@ -1,160 +0,0 @@
-// nprogress
-/* Make clicks pass-through */
-#nprogress
-  pointer-events: none
-
-#nprogress .bar
-  background: $color-theme
-  position: fixed
-  z-index: 3000
-  top: 0
-  left: 0
-  width: 100%
-  height: 100%
-
-/* Fancy blur effect */
-#nprogress .peg
-  display: block
-  position: absolute
-  right: 0px
-  width: 100px
-  height: 100%
-  opacity: 1.0
-  -webkit-transform: rotate(3deg) translate(0px, -4px)
-  -ms-transform: rotate(3deg) translate(0px, -4px)
-  transform: rotate(3deg) translate(0px, -4px)
-
-/* Remove these to get rid of the spinner */
-#nprogress .spinner
-  display: block
-  position: fixed
-  z-index: 3000
-  top: 15px
-  right: 15px
-
-
-#nprogress .spinner-icon
-  width: 18px
-  height: 18px
-  box-sizing: border-box
-  border: solid 2px transparent
-  border-top-color: #29d
-  border-left-color: #29d
-  border-radius: 50%
-
-  -webkit-animation: nprogress-spinner 400ms linear infinite
-  animation: nprogress-spinner 400ms linear infinite
-
-
-.nprogress-custom-parent
-  overflow: hidden
-  position: relative
-
-.nprogress-custom-parent #nprogress .spinner,
-.nprogress-custom-parent #nprogress .bar
-  position: absolute
-
-
-@-webkit-keyframes nprogress-spinner
-  0%
-    -webkit-transform: rotate(0deg)
-  100%
-    -webkit-transform: rotate(360deg)
-
-@keyframes nprogress-spinner
-  0%
-    transform: rotate(0deg)
-  100%
-    transform: rotate(360deg)
-
-
-
-#loading-bar-wrapper
-  position: fixed
-  width: 100px
-  top: 8px
-  left: 50%
-  transform: translateX(-50%)
-  height: 8px
-  border-radius: 8px
-  z-index: 2000
-  background: transparent
-  &.nprogress-custom-parent
-    background: var(--color-card)
-    box-shadow: $boxshadow-card
-
-// circle
-.loading-circle
-  display none
-  height 100%
-  width 100%
-  position fixed
-  top 0
-  left 0
-  z-index 999999
-  background-color rgba(250,250,250,.9)
-  img
-    width 280px
-    height 210px
-    position relative
-    top 45%
-    left 50%
-    margin-left -140px
-    margin-top -105px
-
-#loader-circle
-  display block
-  position relative
-  left 50%
-  top 50%
-  width 150px
-  height 150px
-  margin -75px 0 0 -75px
-  border-radius 50%
-  border 3px solid transparent
-  border-top-color #ff5a5a
-  -webkit-animation spin 1s linear infinite
-  animation spin 1s linear infinite
-  &:before
-    content ""
-    position absolute
-    top 5px
-    left 5px
-    right 5px
-    bottom 5px
-    border-radius 50%
-    border 3px solid transparent
-    border-top-color #5af33f
-    -webkit-animation spin 3s linear infinite
-    animation spin 3s linear infinite
-  &:after
-    content ""
-    position absolute
-    top 15px
-    left 15px
-    right 15px
-    bottom 15px
-    border-radius 50%
-    border 3px solid transparent
-    border-top-color #6dc9ff
-    -webkit-animation spin 2s linear infinite
-    animation spin 2s linear infinite
-
-@-webkit-keyframes spin
-  0%
-    -webkit-transform: rotate(0deg)
-    -ms-transform: rotate(0deg)
-    transform: rotate(0deg)
-  100%
-    -webkit-transform: rotate(360deg)
-    -ms-transform: rotate(360deg)
-    transform: rotate(360deg)
-@keyframes spin
-  0%
-    -webkit-transform: rotate(0deg)
-    -ms-transform: rotate(0deg)
-    transform: rotate(0deg)
-  100%
-    -webkit-transform: rotate(360deg)
-    -ms-transform: rotate(360deg)
-    transform: rotate(360deg)