改进 - https://hacpai.com/article/1473088343125#1473088705456 3.2 & 3.3

src/main/webapp/skins/next/css/next.css

@@ -386,6 +386,10 @@ img {
     -webkit-transform: translateZ(0);
 }
 
+.sidebar-toggle.has-toc .sidebar-toggle-line{
+    background: #87daff;
+}
+
 .sidebar-toggle-line {
     position: relative;
     display: inline-block;
@@ -570,6 +574,34 @@ img {
     font-size: 14px;
     line-height: 2;
 }
+
+.sidebar section {
+    opacity: 0;
+    position: relative;
+}
+
+.sidebar > ul > li {
+    display: inline-block;
+    cursor: pointer;
+    border-bottom: 1px solid transparent;
+    font-size: 14px;
+    color: #555;
+}
+
+.sidebar > ul > li:hover {
+    color: #f5f5f5;
+}
+
+.sidebar > ul > li.current {
+    color: #87daff;
+    border-bottom-color: #87daff;
+}
+
+.sidebar > ul > li:last-child {
+    margin-left: 10px;
+}
+
+
 /* end side */
 
 /* start list*/
@@ -714,6 +746,11 @@ img {
 
 .article-body {
     overflow: auto;
+    text-align: justify;
+}
+
+.article-body p {
+    margin: 0 0 25px 0;
 }
 /* end article */
 

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

@@ -39,7 +39,9 @@
         "em11Label": "${em11Label}",
         "em12Label": "${em12Label}",
         "em13Label": "${em13Label}",
-        "em14Label": "${em14Label}"
+        "em14Label": "${em14Label}",
+        "tocLabel": "${tocLabel}",
+        "siteViewLabel": "${siteViewLabel}"
     };
 </script>
 ${plugins}

src/main/webapp/skins/next/js/next.js

@@ -37,6 +37,7 @@ var NexT = {
                 $sidebar.animate({
                     right: -320
                 });
+                $sidebar.find('section').css('opacity', 0);
             } else {
                 $(this).addClass('sidebar-active');
                 $('body').animate({
@@ -44,6 +45,10 @@ var NexT = {
                 });
                 $sidebar.animate({
                     right: 0
+                }, function () {
+                    $sidebar.find('section:first').animate({
+                        'opacity': 1
+                    });
                 });
             }
         });
@@ -54,6 +59,7 @@ var NexT = {
 
         $(document).ready(function () {
             setTimeout(function () {
+                // logo animate
                 $('.logo-wrap').css('opacity', 1);
                 $('.logo-line-before i').animate({
                     'left': '0'
@@ -66,6 +72,11 @@ var NexT = {
                         });
                         $('.main').css('opacity', 1).animate({
                             'top': '0'
+                        }, function () {
+                            // 当有文章页面有目录时，回调不放这里，侧边栏就会一片空白
+                            if ($('.b3-solo-list li').length > 0 && $(window).width() > 700) {
+                                $('.sidebar-toggle').click();
+                            }
                         });
                     });
 
@@ -80,8 +91,43 @@ var NexT = {
     },
     initArticle: function () {
         if ($('.b3-solo-list li').length > 0 && $(window).width() > 700) {
-            $('.sidebar').html($('.b3-solo-list'));
-            $('.sidebar-toggle').click();
+            // add color to sidebar menu
+            $('.sidebar-toggle').addClass('has-toc');
+
+            // append toc to sidebar menu
+            var articleTocHTML = '<ul><li class="current" data-tab="toc">' + Label.tocLabel + '</li><li data-tab="site">' + Label.siteViewLabel + '</li></ul><section></section>';
+            $('.sidebar').prepend(articleTocHTML);
+            var $sectionF = $('.sidebar section:first').html($('.b3-solo-list')),
+                    $sectionL = $('.sidebar section:last');
+
+            // 切换 tab
+            $('.sidebar > ul > li').click(function () {
+                if ($(this).data('tab') === 'toc') {
+                    $sectionL.animate({
+                        "opacity": '0',
+                        "top": '-50px'
+                    }, 300, function () {
+                        $sectionF.show().css('top', '-50px');
+                        $sectionF.animate({
+                            "opacity": '1',
+                            "top": '0'
+                        }, 300);
+                    });
+                } else {
+                    $sectionF.animate({
+                        "opacity": '0',
+                        "top": '-50px'
+                    }, 300, function () {
+                        $sectionF.hide().css('top', '-50px');
+                        $sectionL.animate({
+                            "opacity": '1',
+                            "top": '0'
+                        }, 300);
+                    });
+                }
+                $('.sidebar > ul > li').removeClass('current');
+                $(this).addClass('current');
+            });
         }
     }
 };

src/main/webapp/skins/next/lang/lang_en_US.properties

@@ -16,11 +16,13 @@
 
 #
 # Description: B3log Solo language configurations(en_US).
-# Version: 1.0.1.2, Sep 4, 2015
+# Version: 1.1.1.2, Sep 6, 2016
 # Author: Liyuan Li
 # Author: Liang Ding
 #
 
+tocLabel=\u6587\u7ae0\u76ee\u5f55
+siteViewLabel=\u7ad9\u70b9\u6982\u89c8
 viewsLabel=Heat
 cmtLabel=Comments
 postTimeLabel=Post At

src/main/webapp/skins/next/lang/lang_zh_CN.properties

@@ -16,10 +16,12 @@
 
 #
 # Description: B3log Solo default language configurations(zh_CN).
-# Version: 1.0.0.1, Jul 30, 2016
+# Version: 1.1.1.2, Sep 6, 2016
 # Author: Liyuan Li
 #
 
+tocLabel=\u6587\u7ae0\u76ee\u5f55
+siteViewLabel=\u7ad9\u70b9\u6982\u89c8
 viewsLabel=\u70ed\u5ea6
 cmtLabel=\u6761\u8bc4\u8bba
 postTimeLabel=\u53d1\u8868\u4e8e