🎨 fixed #12459

gulpfile.js

@@ -55,4 +55,13 @@ gulp.task('default', function () {
             .pipe(concat('admin-lib.min.js'))
             .pipe(gulp.dest('./src/main/webapp/js/lib/compress/'));
 
+
+  // concat js
+  var jsPjax = ['./src/main/webapp/js/lib/jquery/jquery-3.1.0.min.js',
+    './src/main/webapp/js/lib/jquery/jquery.pjax.js',
+    './src/main/webapp/js/lib/nprogress/nprogress.js'];
+  gulp.src(jsPjax)
+  .pipe(uglify())
+  .pipe(concat('pjax.min.js'))
+  .pipe(gulp.dest('./src/main/webapp/js/lib/compress/'));
 });
\ No newline at end of file

src/main/webapp/js/common.js

@@ -28,6 +28,87 @@
  * @static
  */
 var Util = {
+  _isArticlePage: function (href) {
+    var isArticle = true;
+    if (href.indexOf(latkeConfig.servePath + '/tags/') > -1) {
+      isArticle = false;
+    }
+    if (href.indexOf(latkeConfig.servePath + '/tags.html') > -1) {
+      isArticle = false;
+    }
+    if (href.indexOf(latkeConfig.servePath + '/category/') > -1) {
+      isArticle = false;
+    }
+    if (href.indexOf(latkeConfig.servePath + '/archives.html') > -1) {
+      isArticle = false;
+    }
+    if (href.indexOf(latkeConfig.servePath + '/archives/') > -1) {
+      isArticle = false;
+    }
+    if (href.indexOf(latkeConfig.servePath + '/links.html') > -1) {
+      isArticle = false;
+    }
+    if (href === latkeConfig.servePath) {
+      isArticle = false;
+    }
+    if (/^[0-9]*$/.test(href.replace(latkeConfig.servePath + '/', ''))) {
+      isArticle = false;
+    }
+    return isArticle;
+  },
+  /**
+   * pjax
+   */
+  initPjax: function (cb, articelCB) {
+    if ($('#pjax').length === 1) {
+      $.pjax({
+        selector: 'a',
+        container: '#pjax',
+        show: '',
+        cache: false,
+        storage: true,
+        titleSuffix: '',
+        filter: function(href){
+          return Util._isArticlePage(href);
+        },
+        callback: function () {
+          cb()
+        },
+      });
+      NProgress.configure({ showSpinner: false });
+      $('#pjax').bind('pjax.start', function(){
+        NProgress.start();
+      });
+      $('#pjax').bind('pjax.end', function(){
+        NProgress.done();
+      });
+      return;
+    }
+    if ($('#pjaxArticle').length === 1) {
+      $.pjax({
+        selector: 'a',
+        container: '#pjaxArticle',
+        show: '',
+        cache: false,
+        storage: true,
+        titleSuffix: '',
+        filter: function(href){
+          return !Util._isArticlePage(href);
+        },
+        callback: function () {
+          articelCB();
+        },
+      });
+      NProgress.configure({ showSpinner: false });
+      $('#pjaxArticle').bind('pjax.start', function(){
+        NProgress.start();
+      });
+      $('#pjaxArticle').bind('pjax.end', function(){
+        NProgress.done();
+      });
+      return;
+    }
+  },
   /**
    * 按需加载 MathJax 及 flow
    * @returns {undefined}

src/main/webapp/js/lib/nprogress/nprogress.css

+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #d23f31;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #d23f31, 0 0 5px #d23f31;
+  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: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #d23f31;
+  border-left-color: #d23f31;
+  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); }
+}

src/main/webapp/skins/Medium/archive-articles.ftl

@@ -29,6 +29,8 @@
 </head>
 <body>
 <#include "header.ftl">
+<div id="pjax">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
 <#include "nav.ftl">
 <div class="main">
 <#if noticeBoard??>
@@ -54,6 +56,8 @@
     </div>
 <#include "bottom2.ftl">
 </div>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
 <#include "footer.ftl">
 </body>
 </html>

src/main/webapp/skins/Medium/archives.ftl

@@ -28,6 +28,8 @@
 </head>
 <body>
 <#include "header.ftl">
+<div id="pjax">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
 <#include "nav.ftl">
 <div class="main">
 <#if noticeBoard??>
@@ -66,6 +68,8 @@
     </#if>
     </div>
 <#include "bottom.ftl">
+</div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
 </body>

src/main/webapp/skins/Medium/article.ftl

@@ -51,6 +51,8 @@
 </head>
 <body>
 <#include "header.ftl">
+<div id="pjaxArticle">
+    <#if pjax><!---- pjax {#pjaxArticle} start ----></#if>
 <div class="main post__main">
 <#if noticeBoard??>
     <div class="board">
@@ -82,7 +84,9 @@
                 </div>
             </#if>
             </section>
-            <footer class="post__tags">
+            <footer data-oid="${article.oId}"
+                    class="post__tags"
+                    data-tag="<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>">
             <#list article.articleTags?split(",") as articleTag>
                 <a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
                 ${articleTag}</a>
@@ -212,7 +216,10 @@
               data-avatar="${article.authorThumbnailURL}"></span>
     </div>
 </div>
-<script type="text/javascript" src="${staticServePath}/js/lib/jquery/jquery.min.js" charset="utf-8"></script>
+
+        <#if pjax><!---- pjax {#pjaxArticle} end ----></#if>
+</div>
+<script type="text/javascript" src="${staticServePath}/js/lib/compress/pjax.min.js" charset="utf-8"></script>
 <script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"
         charset="utf-8"></script>
 <script type="text/javascript"
@@ -251,17 +258,19 @@
     Skin.initArticle();
 </script>
 <@comment_script oId=article.oId>
+    Skin.initComment = function (articleOId, articleTags) {
         page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
         <#if 0 != randomArticlesDisplayCount>
         page.loadRandomArticles("<div class='module__title'><span>${randomArticlesLabel}</span></div>");
         </#if>
         <#if 0 != externalRelevantArticlesDisplayCount>
-    page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>"
-    , "<div class='module__title'><span>${externalRelevantArticlesLabel}</span></div>");
+        page.loadExternalRelevantArticles(articleTags, "<div class='module__title'><span>${externalRelevantArticlesLabel}</span></div>");
         </#if>
         <#if 0 != relevantArticlesDisplayCount>
-    page.loadRelevantArticles('${article.oId}', '<div class="module__title"><span>${relevantArticlesLabel}</span></div>');
+        page.loadRelevantArticles(articleOId, '<div class="module__title"><span>${relevantArticlesLabel}</span></div>');
         </#if>
+    }
+    Skin.initComment('${article.oId}', "<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>")
 </@comment_script>
 ${plugins}
 </body>

src/main/webapp/skins/Medium/category-articles.ftl

@@ -29,6 +29,8 @@
 </head>
 <body>
 <#include "header.ftl">
+<div id="pjax">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
 <#include "nav.ftl">
 <div class="main">
 <#if noticeBoard??>
@@ -48,6 +50,8 @@
     <#include "article-list.ftl">
     </div>
 <#include "bottom2.ftl">
+</div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
 </body>

src/main/webapp/skins/Medium/css/base.css

@@ -1356,3 +1356,78 @@ blockquote {
         padding-left: 0;
     }
 }
+
+
+/* Make clicks pass-through */
+#nprogress {
+    pointer-events: none;
+}
+
+#nprogress .bar {
+    background: #d23f31;
+
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px #d23f31, 0 0 5px #d23f31;
+    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: 1031;
+    top: 15px;
+    right: 15px;
+}
+
+#nprogress .spinner-icon {
+    width: 18px;
+    height: 18px;
+    box-sizing: border-box;
+
+    border: solid 2px transparent;
+    border-top-color: #d23f31;
+    border-left-color: #d23f31;
+    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); }
+}

src/main/webapp/skins/Medium/footer.ftl

@@ -39,7 +39,7 @@
     </footer>
 </div>
 
-<script type="text/javascript" src="${staticServePath}/js/lib/jquery/jquery.min.js" charset="utf-8"></script>
+<script type="text/javascript" src="${staticServePath}/js/lib/compress/pjax.min.js" charset="utf-8"></script>
 <script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"
         charset="utf-8"></script>
 <script type="text/javascript"

src/main/webapp/skins/Medium/index.ftl

@@ -32,6 +32,8 @@
 </head>
 <body>
 <#include "header.ftl">
+<div id="pjax">
+<#if pjax><!---- pjax {#pjax} start ----></#if>
 <#include "nav.ftl">
 <div class="main">
     <#if noticeBoard??>
@@ -44,6 +46,8 @@
     </div>
     <#include "bottom2.ftl">
 </div>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
 <#include "footer.ftl">
 </body>
 </html>
\ No newline at end of file

src/main/webapp/skins/Medium/js/common.js

@@ -45,6 +45,42 @@ var Skin = {
       }
     });
     $(window).scroll();
+
+    Util.initPjax(function () {
+      Util.parseMarkdown('content-reset');
+      if (location.href === latkeConfig.servePath + '/tags.html') {
+        Skin.initTags()
+      }
+    }, function () {
+      Util.parseMarkdown('content-reset');
+      Skin.initArticle();
+      Skin.initComment($('.post__tags').data('oid'), $('.post__tags').data('tag'))
+    })
+  },
+  initTags: function () {
+    var $tags = $('#tags');
+    var tagsArray = $tags.find('.tag')
+    // 根据引用次数添加样式，产生云效果
+    var max = parseInt(tagsArray.first().data('count'));
+    var distance = Math.ceil(max / 5);
+    for (var i = 0; i < tagsArray.length; i++) {
+      var count = parseInt($(tagsArray[i]).data('count'));
+      // 算出当前 tag 数目所在的区间，加上 class
+      for (var j = 0; j < 5; j++) {
+        if (count > j * distance && count <= (j + 1) * distance) {
+          tagsArray[i].className = 'tag tag__level' + j;
+          break;
+        }
+      }
+    }
+
+    // 按字母或者中文拼音进行排序
+    $tags.html(tagsArray.get().sort(function (a, b) {
+      var valA = $(a).text().toLowerCase();
+      var valB = $(b).text().toLowerCase();
+      // 对中英文排序的处理
+      return valA.localeCompare(valB);
+    }));
   },
   initArticle: function () {
     Skin._share('#articleShare')

src/main/webapp/skins/Medium/links.ftl

@@ -28,13 +28,15 @@
 </head>
 <body>
 <#include "header.ftl">
-<#include "nav.ftl">
-<div class="main">
-<#if noticeBoard??>
+<div id="pjax">
+<#if pjax><!---- pjax {#pjax} start ----></#if>
+    <#include "nav.ftl">
+    <div class="main">
+    <#if noticeBoard??>
         <div class="board">
         ${noticeBoard}
         </div>
-</#if>
+    </#if>
         <div class="wrapper content">
             <div class="module__title">
                 <span>
@@ -56,7 +58,9 @@
             </#list>
         </#if>
         </div>
-<#include "bottom.ftl">
+    <#include "bottom.ftl">
+    </div>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
 </body>

src/main/webapp/skins/Medium/page.ftl

@@ -41,7 +41,6 @@
             <section class="content-reset">
             ${page.pageContent}
             </section>
-
         </article>
     </div>
 </div>

src/main/webapp/skins/Medium/tag-articles.ftl

@@ -29,6 +29,8 @@
 </head>
 <body>
 <#include "header.ftl">
+<div id="pjax">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
 <#include "nav.ftl">
 <div class="main">
 <#if noticeBoard??>
@@ -49,6 +51,8 @@
     <#include "article-list.ftl">
     </div>
 <#include "bottom2.ftl">
+</div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
 </body>

src/main/webapp/skins/Medium/tags.ftl

@@ -28,6 +28,8 @@
 </head>
 <body>
 <#include "header.ftl">
+<div id="pjax">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
 <#include "nav.ftl">
 <div class="main">
 <#if noticeBoard??>
@@ -53,34 +55,12 @@
         </div>
     </div>
 <#include "bottom.ftl">
+</div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
 <script>
-    (function () {
-        var $tags = $('#tags');
-        var tagsArray = $tags.find('.tag')
-        // 根据引用次数添加样式，产生云效果
-        var max = parseInt(tagsArray.first().data('count'));
-        var distance = Math.ceil(max / 5);
-        for (var i = 0; i < tagsArray.length; i++) {
-            var count = parseInt($(tagsArray[i]).data('count'));
-            // 算出当前 tag 数目所在的区间，加上 class
-            for (var j = 0; j < 5; j++) {
-                if (count > j * distance && count <= (j + 1) * distance) {
-                    tagsArray[i].className = 'tag tag__level' + j;
-                    break;
-                }
-            }
-        }
-
-        // 按字母或者中文拼音进行排序
-        $tags.html(tagsArray.get().sort(function (a, b) {
-            var valA = $(a).text().toLowerCase();
-            var valB = $(b).text().toLowerCase();
-            // 对中英文排序的处理
-            return valA.localeCompare(valB);
-        }));
-    })();
+    Skin.initTags()
 </script>
 </body>
 </html>