From efbe2c0338207cd9295bd22620ea334b2ed2a725 Mon Sep 17 00:00:00 2001 From: liuyib <1656081615@qq.com> Date: Wed, 28 Aug 2019 16:27:52 +0800 Subject: [PATCH] feat: Add pjax support --- _config.yml | 26 +++++++++++ layout/_common/layout.pug | 3 ++ layout/_scripts/common.pug | 1 - layout/_third-party/pjax.pug | 86 ++++++++++++++++++++++++++++++++++++ source/js/scroll.js | 25 ++++++----- source/js/sidebar.js | 51 +++++++++++---------- source/js/stun-boot.js | 33 ++++++++------ 7 files changed, 177 insertions(+), 48 deletions(-) create mode 100644 layout/_third-party/pjax.pug diff --git a/_config.yml b/_config.yml index d4def14..4d92fab 100644 --- a/_config.yml +++ b/_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: diff --git a/layout/_common/layout.pug b/layout/_common/layout.pug index 4e0e288..53dc5e1 100644 --- a/layout/_common/layout.pug +++ b/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 diff --git a/layout/_scripts/common.pug b/layout/_scripts/common.pug index 6b71305..4f4b025 100644 --- a/layout/_scripts/common.pug +++ b/layout/_scripts/common.pug @@ -1,6 +1,5 @@ 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")}`) diff --git a/layout/_third-party/pjax.pug b/layout/_third-party/pjax.pug new file mode 100644 index 0000000..b1e764f --- /dev/null +++ b/layout/_third-party/pjax.pug @@ -0,0 +1,86 @@ +- + 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); diff --git a/source/js/scroll.js b/source/js/scroll.js index ee1c788..e14bc8d 100644 --- a/source/js/scroll.js +++ b/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(); }); diff --git a/source/js/sidebar.js b/source/js/sidebar.js index 18d1519..877f2c1 100644 --- a/source/js/sidebar.js +++ b/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(); }); diff --git a/source/js/stun-boot.js b/source/js/stun-boot.js index 1c5f02a..d25a72d 100644 --- a/source/js/stun-boot.js +++ b/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(); }); -- GitLab