🎇 fixed #12255

src/main/webapp/skins/9IPHP/css/base.css

@@ -18,7 +18,7 @@
  * skin style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 0.1.1.0, Feb 18, 2017
+ * @version 0.2.1.0, Mar 14, 2017
 */
 /* start common */
 html {
@@ -574,10 +574,6 @@ a[class*=" icon-"]:hover {
     background-position: -96px -48px;
 }
 
-.b3-solo-list {
-    display: none;
-}
-
 #commentForm,
 #replyForm {
     width: 100%;
@@ -944,6 +940,30 @@ aside .tag.tooltipped {
     margin-right: 10px;
     line-height: 22px;
 }
+
+aside.has-toc > ul > li {
+    list-style: none;
+    float: left;
+    width: 50%;
+    margin: 0;
+    cursor: pointer;
+    line-height: 18px;
+    font-size: 16px;
+    text-align: center;
+    font-weight: 400;
+}
+
+aside.has-toc ul > li.current {
+    color: #ff4d3a;
+}
+
+aside .b3-solo-list {
+    font-size: 14px;
+}
+
+aside.has-toc > section:last-child {
+    margin-top: 20px;
+}
 /* end side */
 
 /* start article list */

src/main/webapp/skins/9IPHP/js/common.js

@@ -72,20 +72,22 @@ var Skin = {
             $('.responsive .list').slideToggle();
         });
     },
-    _initArticleCommon: function () {
+    _initArticleCommon: function (tocLabel, siteViewLabel) {
         // TOC
         if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
             // add color to sidebar menu
-            $('.sidebar-toggle').addClass('has-toc');
+            $('aside').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');
-            $sectionF.height($(window).height() - 90);
+            var articleTocHTML = '<ul class="fn-clear"><li class="current" data-tab="toc">' + tocLabel
+            + '</li><li data-tab="site">' + siteViewLabel + '</li></ul><section></section>';
+            $('aside').prepend(articleTocHTML);
+            var $sectionF = $('aside section:first').html($('.b3-solo-list')),
+                    $sectionL = $('aside section:last');
+            $sectionF.height($(window).height() - 154).css({ 'overflow': 'auto', 'width':  $('aside').width() + 'px'});
+            $sectionL.hide();
             // 切换 tab
-            $('.sidebar > ul > li').click(function () {
+            $('aside > ul > li').click(function () {
                 if ($(this).data('tab') === 'toc') {
                     $sectionL.animate({
                         "opacity": '0',
@@ -95,7 +97,7 @@ var Skin = {
                         $sectionF.animate({
                             "opacity": '1',
                             "top": '0'
-                        }, 300);
+                        }, 300).show();
                     });
                 } else {
                     $sectionF.animate({
@@ -106,16 +108,31 @@ var Skin = {
                         $sectionL.animate({
                             "opacity": '1',
                             "top": '0'
-                        }, 300);
-                    });
+                        }, 300).show();
+                    }).hide();
                 }
-                $('.sidebar > ul > li').removeClass('current');
+                $('aside > ul > li').removeClass('current');
                 $(this).addClass('current');
             });
+
+            $(window).scroll(function () {
+                if ($(window).scrollTop() > 125) {
+                    $('aside section:eq(0)').css({
+                        position: "fixed",
+                        top: "51px",
+                        backgroundColor: "#fff"
+                    })
+                } else {
+                    $('aside section:eq(0)').css({
+                        position: "inherit",
+                        borderLeft: 0
+                    })
+                }
+            });
         }
     },
-    initArticle: function () {
-        this._initArticleCommon();
+    initArticle: function (tocLabel, siteViewLabel) {
+        this._initArticleCommon(tocLabel, siteViewLabel);
     }
 };
 Skin.init();
\ No newline at end of file

src/main/webapp/skins/9IPHP/js/common.min.js

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var Skin={_initCommon:function(i){$("body").on("click",".content-reset img",function(){window.open(this.src)});var t=$("header .banner"),n=$("header .navbar");$(window).scroll(function(){return $(window).scrollTop()>125?i.show():i.hide(),!($(window).width()<701)&&void($(window).scrollTop()>t.height()?(n.addClass("pin"),$(".main-wrap").parent().css("margin-top","86px")):(n.removeClass("pin"),$(".main-wrap").parent().css("margin-top","0")))})},init:function(){this._initCommon($(".icon-up")),$(".navbar nav a").each(function(){this.href===location.href&&(this.className="current")}),$(".responsive .list a").each(function(){this.href===location.href&&$(this).parent().addClass("current")}),$(".responsive .icon-list").click(function(){$(".responsive .list").slideToggle()})},_initArticleCommon:function(){if($(".b3-solo-list li").length>0&&$(window).width()>1e3){$(".sidebar-toggle").addClass("has-toc");var i='<ul><li class="current" data-tab="toc">'+Label.tocLabel+'</li><li data-tab="site">'+Label.siteViewLabel+"</li></ul><section></section>";$(".sidebar").prepend(i);var t=$(".sidebar section:first").html($(".b3-solo-list")),n=$(".sidebar section:last");t.height($(window).height()-90),$(".sidebar > ul > li").click(function(){"toc"===$(this).data("tab")?n.animate({opacity:"0",top:"-50px"},300,function(){t.show().css("top","-50px"),t.animate({opacity:"1",top:"0"},300)}):t.animate({opacity:"0",top:"-50px"},300,function(){t.hide().css("top","-50px"),n.animate({opacity:"1",top:"0"},300)}),$(".sidebar > ul > li").removeClass("current"),$(this).addClass("current")})}},initArticle:function(){this._initArticleCommon()}};Skin.init();
+var Skin={_initCommon:function(i){$("body").on("click",".content-reset img",function(){window.open(this.src)});var t=$("header .banner"),n=$("header .navbar");$(window).scroll(function(){return $(window).scrollTop()>125?i.show():i.hide(),!($(window).width()<701)&&void($(window).scrollTop()>t.height()?(n.addClass("pin"),$(".main-wrap").parent().css("margin-top","86px")):(n.removeClass("pin"),$(".main-wrap").parent().css("margin-top","0")))})},init:function(){this._initCommon($(".icon-up")),$(".navbar nav a").each(function(){this.href===location.href&&(this.className="current")}),$(".responsive .list a").each(function(){this.href===location.href&&$(this).parent().addClass("current")}),$(".responsive .icon-list").click(function(){$(".responsive .list").slideToggle()})},_initArticleCommon:function(i,t){if($(".b3-solo-list li").length>0&&$(window).width()>1e3){$("aside").addClass("has-toc");var n='<ul class="fn-clear"><li class="current" data-tab="toc">'+i+'</li><li data-tab="site">'+t+"</li></ul><section></section>";$("aside").prepend(n);var o=$("aside section:first").html($(".b3-solo-list")),s=$("aside section:last");o.height($(window).height()-154).css({overflow:"auto",width:$("aside").width()+"px"}),s.hide(),$("aside > ul > li").click(function(){"toc"===$(this).data("tab")?s.animate({opacity:"0",top:"-50px"},300,function(){o.show().css("top","-50px"),o.animate({opacity:"1",top:"0"},300).show()}):o.animate({opacity:"0",top:"-50px"},300,function(){o.hide().css("top","-50px"),s.animate({opacity:"1",top:"0"},300).show()}).hide(),$("aside > ul > li").removeClass("current"),$(this).addClass("current")}),$(window).scroll(function(){$(window).scrollTop()>125?$("aside section:eq(0)").css({position:"fixed",top:"51px",backgroundColor:"#fff"}):$("aside section:eq(0)").css({position:"inherit",borderLeft:0})})}},initArticle:function(i,t){this._initArticleCommon(i,t)}};Skin.init();
\ No newline at end of file

src/main/webapp/skins/9IPHP/lang/lang_en_US.properties

@@ -16,10 +16,11 @@
 
 #
 # Description: B3log Solo language configurations(en_US).
-# Version: 1.0.0.0, Feb 17, 2017
+# Version: 1.1.0.0, Mar 14, 2017
 # Author: Liyuan Li
 #
 
+siteViewLabel=Site
 onlineVisitorLabel=Visitor
 tocLabel=Article ToC
 readLabel=Read More

src/main/webapp/skins/9IPHP/lang/lang_zh_CN.properties

@@ -16,10 +16,11 @@
 
 #
 # Description: B3log Solo default language configurations(zh_CN).
-# Version: 1.0.0.0, Feb 17, 2017
+# Version: 1.1.0.0, Mar 14, 2017
 # Author: Liyuan Li
 #
 
+siteViewLabel=\u7AD9\u70B9\u6982\u8981
 onlineVisitorLabel=\u8BBF\u5BA2
 tocLabel=\u6587\u7AE0\u76EE\u5F55
 readLabel=\u9605\u8BFB\u5168\u6587

src/main/webapp/skins/9IPHP/macro-comments.ftl

@@ -91,7 +91,7 @@
                         };
                         (function () {
                             page.load();
-                            Skin.initArticle();
+                            Skin.initArticle("${tocLabel}", "${siteViewLabel}");
                             // emotions
                             page.replaceCommentsEm("#comments .comment-content");
                             <#nested>

src/main/webapp/skins/9IPHP/side.ftl

 <aside>
+    <section>
         <#if noticeBoard??>
             <div class="ad content-reset">
                 ${noticeBoard}
@@ -75,4 +76,5 @@
                 </main>
             </div>
         </#if>
+    </section>
 </aside>
\ No newline at end of file