pjax

layout/_layout.swig

@@ -22,6 +22,12 @@
       </main>
 
       <footer id="footer" class="footer">
+      <script>
+        page_obj = {
+          layout: "{{ page.layout }}",
+          comments: "{{ page.comments }}"
+        };
+      </script>
         {%- include '_partial/footer.swig' -%}
       </footer>
 
@@ -40,5 +46,6 @@
     {%- include '_script/libs.swig' -%}
     {%- include '_script/theme.swig' -%}
     {%- include '_script/aplayer.swig' -%}
-  </body>
+    {%- include '_script/pjax.swig' -%}
+ </body>
 </html>

layout/_partial/footer.swig

@@ -3,7 +3,8 @@
 
 <div class="copyright">
 
-  {%- if theme.valine.statistic and not is_home() -%}
+  {%- if theme.valine.statistic -%}
+    {%- if is_post() or is_page() -%}
   <span id="/{{ page.path }}" class="statistic leancloud_visitors">
     <em>Visitors </em> <i class="leancloud-visitors-count">??</i> 
     <span class="division"> |</span>
@@ -11,6 +12,7 @@
   </span>
   <br>
   {%- endif -%}
+  {%- endif -%}
 
   <span class="power-by">
     {{ __('footer.powered', '<a class="hexo-link" href="https://hexo.io/">Hexo</a>') }}

layout/_partial/slideout.swig

@@ -7,6 +7,9 @@
     <span></span>
     <span></span>
   </div>
+  <div class="loading-bar">
+    <div class="progress"></div>
+  </div>
 </div>
 
 <nav id="mobile-menu" class="mobile-menu slideout-menu">

layout/_script/_analytics/baidu-analytics.swig

@@ -1,5 +1,5 @@
 {%- if theme.baidu_analytics -%}
-  <script id="baidu_analytics">
+  <script id="baidu_analytics" data-pjax>
     var _hmt = _hmt || [];
     (function() {
       var hm = document.createElement("script");

layout/_script/_analytics/google-analytics.swig

@@ -1,11 +1,13 @@
 {%- if theme.google_analytics -%}
 <!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id={{ theme.google_analytics }}"></script>
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ theme.google_analytics }}" data-pjax></script>
 <script>
+pjax_google_analytics = () => {
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
 
   gtag('config', '{{ theme.google_analytics }}');
+}
 </script>
 {%- endif -%}

layout/_script/_comments/valine.swig

@@ -46,6 +46,7 @@ img.vimg:hover {
 
 </style>
 <script>
+pjax_valine = () => {
     new Valine({
       el: '#vcomments',
       appId: '{{ theme.valine.appId }}',
@@ -112,6 +113,7 @@ img.vimg:hover {
           // ... 更多表情
       } 
     });
+};
 </script>
 
 {%- endif -%}

layout/_script/comments.swig

@@ -1,8 +1 @@
-{%- if !is_home() and !is_archive() -%}
-  {%- include "_comments/disqus.swig" -%}
-  {%- include "_comments/changyan.swig" -%}
-  {%- include "_comments/livere.swig" -%}
-  {%- include "_comments/gitalk.swig" -%}
-  {%- include "_comments/utterances.swig" -%}
-  {%- include "_comments/valine.swig" -%}
-{%- endif -%}
+{%- include "_comments/valine.swig" -%}

layout/_script/loading-bar.swig

@@ -0,0 +1,42 @@
+var loadingBar = document.querySelector(".loading-bar");
+var progress = document.querySelector(".loading-bar .progress");
+var timer = null;
+
+
+// Pjax 开始时执行的函数
+var loadingbarStart = function () {
+  // 进度条默认已经加载 20%
+  var loadingBarWidth = 20;
+  // 进度条的最大增加宽度
+  var MAX_LOADING_WIDTH = 95;
+
+  // 显示进度条
+  loadingBar.classList.add("loading");
+  // 初始化进度条的宽度
+  progress.style.width = loadingBarWidth + "%";
+
+  clearInterval(timer);
+  timer = setInterval(function () {
+    // 进度条的增加速度（可以改为一个随机值，显得更加真实）
+    loadingBarWidth += 3;
+
+    // 当进度条到达 95% 后停止增加
+    if (loadingBarWidth > MAX_LOADING_WIDTH) {
+      loadingBarWidth = MAX_LOADING_WIDTH;
+    }
+
+    progress.style.width = loadingBarWidth + "%";
+  }, 500);
+};
+
+
+// Pjax 完成之后执行的函数
+var loadingbarStop = function () {
+  clearInterval(timer);
+  progress.style.width = "100%";
+  loadingBar.classList.remove("loading");
+
+  setTimeout(function () {
+    progress.style.width = 0;
+  }, 400);
+};

layout/_script/pjax.swig

@@ -0,0 +1,63 @@
+{%- if theme.pjax.enable -%}
+<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>
+<script>
+  new Pjax({
+    elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"])',
+    selectors: ["head title, #main", "#footer"],
+  });
+
+
+  /* 第一次载入页面加载的函数 */
+  pjax_ini = () => {
+    
+     /* 关闭侧边栏 */
+     window.slideout.close();
+
+     if(page_obj.comments == "true"){
+        {%- if theme.valine.enable -%}
+        pjax_valine();
+        {%- endif -%}
+     }
+     {%- if theme.google_analytics -%}
+       pjax_google_analytics();
+     {%- endif -%}
+  };
+
+  /* 第一次 执行 */
+  pjax_ini();
+
+
+  {%- if theme.pjax.loadingbar -%}
+    {%- include "loading-bar.swig" -%}
+  {%- endif -%}
+
+
+  /* Pjax 开始时，重新加载的函数 */
+  document.addEventListener("pjax:send", function () {
+    {%- if theme.pjax.loadingbar -%}
+      loadingbarStart(); 
+    {%- endif -%}
+
+  });
+
+
+  /* Pjax 完成后，重新加载的函数 */
+  document.addEventListener("pjax:complete", function () {
+    /* 重载带data-pjax的script，或者.pjax-reload属性内容的script */
+    $("script[data-pjax], .pjax-reload script").each(function () {
+        $(this).parent().append($(this).remove());
+    });
+    pjax_ini(); 
+    {%- if theme.pjax.loadingbar -%}
+      loadingbarStop();
+    {%- endif -%}
+  });
+
+
+  /* Pjax 出错，执行的函数 */
+  document.addEventListener("pjax:error", function () {
+    
+  });
+
+</script>
+{%- endif -%}

layout/_script/theme.swig

@@ -1 +1,2 @@
-<script type="text/javascript" src="{{ url_for('js/src') }}/kayo.js?v={{ theme.version }}"></script>
+<script type="text/javascript" src="{{ url_for('js/src') }}/kayo.js?v={{ theme.version }}" data-pjax></script>
+<script type="text/javascript" src="{{ url_for('js/src') }}/kayo-no-pjax.js?v={{ theme.version }}"></script>

layout/post.swig

@@ -12,6 +12,5 @@
         message: "此文章预计阅读 {{ readingTime(page.content, '分钟', 150) }}哦~"
   })}, 3000)})</script>
   {%- endif -%}
-
 {%- endblock -%}
 

source/css/_partial/_mobile.scss

@@ -75,3 +75,32 @@
     display: block;
   }
 }
+
+
+.loading-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 99999;
+    opacity: 0;
+    transition: opacity .4s linear;
+
+    .progress {
+        position: fixed;
+        top: $mobile-navbar-height;
+        left: 0;
+        width: 0;
+        height: 3px;
+        background-color: #77b6ff;
+        box-shadow: 0 0 10px rgba(119, 182, 255, .7);
+    }
+
+    &.loading {
+        opacity: 1;
+        transition: none;
+
+        .progress {
+            transition: width .4s ease;
+        }
+    }
+}

source/css/_partial/_slideout.scss

@@ -31,3 +31,4 @@
 .slideout-open .slideout-menu {
   display: block;
 }
+

source/js/src/kayo-no-pjax.js

@@ -0,0 +1,35 @@
+(function(){
+
+    var $nav = $('#mobile-navbar');
+    var $navIcon = $('.mobile-navbar-icon');
+
+    var slideout = new Slideout({
+      'panel': document.getElementById('mobile-panel'),
+      'menu': document.getElementById('mobile-menu'),
+      'padding': 180,
+      'tolerance': 70
+    });
+    slideout.disableTouch();
+    
+    window.slideout = slideout;
+
+    $navIcon.click(function () {
+      slideout.toggle();
+    });
+
+    slideout.on('beforeopen', function () {
+      $nav.addClass('fixed-open');
+      $navIcon.addClass('icon-click').removeClass('icon-out');
+    });
+
+    slideout.on('beforeclose', function () {
+      $nav.removeClass('fixed-open');
+      $navIcon.addClass('icon-out').removeClass('icon-click');
+    });
+
+    $('#mobile-panel').on('touchend', function () {
+      slideout.isOpen() && $navIcon.click();
+    });
+
+
+}())

source/js/src/kayo.js

@@ -8,7 +8,7 @@
   Kayo.prototype.setup = function() {
     var leancloud = this.config.leancloud;
 
-    this.navbar();
+    //this.navbar();
     this.responsiveTable();
 
     if (this.config.toc) {