feat: Add pjax support

_config.yml

@@ -627,6 +627,26 @@ quicklink:
   #   - (uri, el) => el.hasAttribute('nofollow')
   ignores:
 
+# Pjax
+# See: https://github.com/MoOx/pjax/
+pjax:
+  enable: true
+  # ! -----------------------------------------------------
+  # ! If you don't understand, please ignore the following.
+  # ! -----------------------------------------------------
+  # Please see: https://github.com/MoOx/pjax/#options
+  elements:
+  selectors:
+  switches:
+  switchesOptions:
+  history: true
+  scrollTo: false
+  scrollRestoration: false
+  cacheBust: false
+  debug: false
+  currentUrlFullReload: false
+  timeout: 0
+
 # Google AdSense
 google_adsense:
   enable: false
@@ -787,3 +807,9 @@ cdn:
   # Example:
   # quicklink: //cdn.jsdelivr.net/npm/quicklink@latest/dist/quicklink.umd.js
   quicklink:
+
+  # Using version: latest
+  # See: https://github.com/MoOx/pjax/
+  # Example:
+  # pjax: //cdn.jsdelivr.net/npm/pjax@latest/pjax.min.js
+  pjax:

layout/_common/layout.pug

@@ -20,3 +20,6 @@ html(lang=config.language)
     include ../_third-party/comments/index.pug
     include ../_third-party/math/index.pug
     include ../_third-party/search/index.pug
+
+    if theme.pjax && theme.pjax.enable
+      include ../_third-party/pjax.pug

layout/_scripts/common.pug

 script(src=`${url_for(theme.js)}/utils.js?v=${stun_env("version")}`)
 script(src=`${url_for(theme.js)}/stun-boot.js?v=${stun_env("version")}`)
-script(src=`${url_for(theme.js)}/copy.js?v=${stun_env("version")}`)
 script(src=`${url_for(theme.js)}/scroll.js?v=${stun_env("version")}`)
 script(src=`${url_for(theme.js)}/header.js?v=${stun_env("version")}`)
 

layout/_third-party/pjax.pug

+-
+  var pjaxArgs = {
+    'elements': [
+      'a:not([target=_blank])'
+    ],
+    'selectors': [
+      'title',
+      'meta[name=description]',
+      '#main'
+    ],
+    'history': theme.pjax.history,
+    'scrollTo': theme.pjax.scrollTo,
+    'scrollRestoration': theme.pjax.scrollRestoration,
+    'cacheBust': theme.pjax.cacheBust,
+    'debug': theme.pjax.debug,
+    'currentUrlFullReload': theme.pjax.currentUrlFullReload,
+    'timeout': theme.pjax.timeout
+  };
+
+  if (theme.pjax.elements) {
+    pjaxArgs.elements.push(theme.pjax.elements);
+  }
+  if (theme.pjax.selectors) {
+    pjaxArgs.selectors.push(theme.pjax.selectors);
+  }
+  if (theme.pjax.selectors) {
+    pjaxArgs.switches = theme.pjax.selectors;
+  }
+  if (theme.pjax.selectors) {
+    pjaxArgs.switchesOptions = theme.pjax.selectors;
+  }
+
+  pjaxArgs = JSON.stringify(pjaxArgs)
+
+if theme.pjax && theme.pjax.enable
+  - var pjax_js = "https://cdn.jsdelivr.net/npm/pjax@latest/pjax.min.js"
+  - if (theme.cdn.pjax) pjax_js = theme.cdn.pjax
+  script(src=pjax_js)
+
+script.
+  var header = document.querySelector('#header');
+  var headerHeight = header.offsetHeight;
+  var pjax = new Pjax(!{ pjaxArgs });
+  // 加载进度条的计时器
+  var loadingTimer = null;
+
+  // 重置页面 Y 方向上的滚动偏移量
+  document.addEventListener('pjax:send', function () {
+    $('html').velocity('scroll', {
+      duration: 500,
+      offset: $('#header').height(),
+      easing: 'easeInOutCubic'
+    });
+
+    var loadingBarWidth = 0;
+    var MAX_LOADING_WIDTH = 95;
+
+    $('.loading-bar .progress').css('transform', 'translateX(-100%)');
+    $('.loading-bar').addClass('loading');
+
+    clearInterval(loadingTimer);
+    loadingTimer = setInterval(function () {
+      loadingBarWidth += 2;
+
+      if (loadingBarWidth > MAX_LOADING_WIDTH) {
+        loadingBarWidth = MAX_LOADING_WIDTH;
+      }
+      $('.loading-bar .progress').css(
+        'transform', 'translateX(' + (loadingBarWidth - 100) + '%)'
+      );
+    }, 100);
+  }, false);
+
+  document.addEventListener('pjax:complete', function () {
+    clearInterval(loadingTimer);
+    $('.loading-bar .progress').css('transform', 'translateX(0%)');
+    setTimeout(function () {
+      $('.loading-bar').removeClass('loading');
+      $('.loading-bar .progress').css('transform', 'translateX(-100%)');
+    }, 400);
+
+    // 重载失效的函数，使其再执行一次
+    Stun.utils.pjaxReloadBoot();
+    Stun.utils.pjaxReloadScroll();
+    Stun.utils.pjaxReloadSidebar();
+  }, false);

source/js/scroll.js

@@ -85,16 +85,21 @@ $(document).ready(function () {
     headerNavScroll();
   }, 100));
 
-  // Click the heading.
-  $('.content')
-    .find('h1,h2,h3,h4,h5,h6')
-    .on('click', function () {
-      scrollHeadingToTop('#' + $(this).attr('id'));
+  Stun.utils.pjaxReloadScroll = function () {
+    // Click the heading.
+    $('.content')
+      .find('h1,h2,h3,h4,h5,h6')
+      .on('click', function () {
+        scrollHeadingToTop('#' + $(this).attr('id'));
+      });
+  
+    // Click the post toc.
+    $('.toc-link').on('click', function (e) {
+      e.preventDefault();
+      scrollHeadingToTop($(this).attr('href'));
     });
+  };
 
-  // Click the post toc.
-  $('.toc-link').on('click', function (e) {
-    e.preventDefault();
-    scrollHeadingToTop($(this).attr('href'));
-  });
+  // Initializaiton
+  Stun.utils.pjaxReloadScroll();
 });

source/js/sidebar.js

@@ -142,28 +142,33 @@ $(document).ready(function () {
     readProgress();
   }, 150));
 
-  var $tocWrapper = $('.sidebar-toc');
-  var $view = $('.sidebar-overview');
-
-  $('.sidebar-nav-toc').on('click', function () {
-    $('.sidebar-nav-toc').toggleClass('current');
-    $('.sidebar-nav-overview').toggleClass('current');
-
-    $tocWrapper.css('display', 'block');
-    $tocWrapper.velocity('fadeIn');
-
-    $view.css('display', 'none');
-    $view.velocity('fadeOut');
-  });
-
-  $('.sidebar-nav-overview').on('click', function () {
-    $('.sidebar-nav-toc').toggleClass('current');
-    $('.sidebar-nav-overview').toggleClass('current');
-
-    $tocWrapper.css('display', 'none');
-    $tocWrapper.velocity('fadeOut');
+  Stun.utils.pjaxReloadSidebar = function () {
+    var $tocWrapper = $('.sidebar-toc');
+    var $view = $('.sidebar-overview');
+
+    $('.sidebar-nav-toc').on('click', function () {
+      $('.sidebar-nav-toc').toggleClass('current');
+      $('.sidebar-nav-overview').toggleClass('current');
+  
+      $tocWrapper.css('display', 'block');
+      $tocWrapper.velocity('fadeIn');
+  
+      $view.css('display', 'none');
+      $view.velocity('fadeOut');
+    });
+  
+    $('.sidebar-nav-overview').on('click', function () {
+      $('.sidebar-nav-toc').toggleClass('current');
+      $('.sidebar-nav-overview').toggleClass('current');
+  
+      $tocWrapper.css('display', 'none');
+      $tocWrapper.velocity('fadeOut');
+  
+      $view.css('display', 'block');
+      $view.velocity('fadeIn');
+    });
+  };
 
-    $view.css('display', 'block');
-    $view.velocity('fadeIn');
-  });
+  // Initialization
+  Stun.utils.pjaxReloadSidebar();
 });

source/js/stun-boot.js

@@ -6,21 +6,26 @@ $(document).ready(function () {
     Stun.utils.addIconToExternalLink('#footer');
   }
 
-  Stun.utils.addCopyButtonToCopyright();
-  Stun.utils.registerCopyEvent();
-  CONFIG.reward && Stun.utils.registerShowReward();
-  CONFIG.gallery_waterfall && Stun.utils.galleryWaterFall();
-  CONFIG.lazyload && Stun.utils.lazyLoadImages();
+  Stun.utils.pjaxReloadBoot = function () {
+    this.addCopyButtonToCopyright();
+    this.registerCopyEvent();
+    CONFIG.reward && this.registerShowReward();
+    CONFIG.gallery_waterfall && this.galleryWaterFall();
+    CONFIG.lazyload && this.lazyLoadImages();
 
-  if (CONFIG.external_link) {
-    var WRAPPER = '.archive-inner, .post-title';
+    if (CONFIG.external_link) {
+      var WRAPPER = '.archive-inner, .post-title';
 
-    Stun.utils.addIconToExternalLink(WRAPPER);
-  }
+      this.addIconToExternalLink(WRAPPER);
+    }
 
-  if (CONFIG.fancybox) {
-    Stun.utils.wrapImageWithFancyBox();
-  } else if (CONFIG.zoom_image) {
-    Stun.utils.registerClickToZoomImage();
-  }
+    if (CONFIG.fancybox) {
+      this.wrapImageWithFancyBox();
+    } else if (CONFIG.zoom_image) {
+      this.registerClickToZoomImage();
+    }
+  };
+
+  // Initializaiton
+  Stun.utils.pjaxReloadBoot();
 });