#12122 yilia ToC

yilia/css/yilia.css

@@ -420,7 +420,8 @@ pre code, pre tt {
     font-size: 30px;
 }
 
-.side a:hover {
+.side a:hover,
+.side .toc a:hover {
     color: #b0a0aa;
 }
 
@@ -487,6 +488,50 @@ pre code, pre tt {
 .side footer > div {
     margin-bottom: 10px;
 }
+
+.side .toc-btn {
+    float: right;
+    margin: 0 10px;
+    font-size: 14px;
+    display: none;
+}
+
+.side .toc {
+    height: 100%;
+    width: 300px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    overflow: hidden;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAgMAAAAog1vUAAAACVBMVEUAAAABAQETExM20mnVAAAAA3RSTlMOECJvSrphAAABBElEQVR4AWyRwQ3CQAwEJ5/rIVQTyuAfHunmXlRAoaxkMfJJkQ4Dznl3x+G4xlzOxvZ5vZdzMJ7fx3Im+7a2jpNzrINzZ+6r/DnIp7dyg9zsg9Ehel0+bsS1t5KJZOuDSU4Iunz4qC8BU6nLAqZSkgKmUsYCplLxBEylIARMxV8+w/sqoKo+6G0aTGhm5JAM//gARxxHYU3Q3igY0sCIIhYCC49rcUW4PBeJK3bd+CIKsDle8H91N62bwTv5Xxv1QQAAAAQQsH9rAU6DH3CIG9WFbm2Pcyf00PcOn3avFYDDRJgOOcE8fIX8VFCY00r5TlFFPt2NwqXDwFyGjNUlzfBdHo1oSKi9zm79GKMAAAAASUVORK5CYII=) repeat #5d5d5d;
+}
+
+.side .toc li {
+    border-bottom: 1px solid #717171;
+    border-top: 1px solid #5d5d5d;
+}
+
+.side .toc a {
+    font-size: 14px;
+    color: #e5e5e5;
+    display: block;
+}
+
+.side .b3-solo-list {
+    padding: 0;
+    margin-top: 50px;
+}
+
+.abstract .b3-solo-list {
+    display: none;
+}
+
+.side .toc .close {
+    color: #fff;
+    float: right;
+    padding: 0 10px;
+}
 /* end side */
 
 /* start main */

yilia/js/yilia.js

@@ -30,6 +30,8 @@ var Yilia = {
      */
     init: function () {
         Util.killIE();
+        
+        this._initToc();
         this.resetTags();
         
         $(window).scroll(function () {
@@ -54,6 +56,17 @@ var Yilia = {
 
         $(window).scroll();
     },
+    _initToc: function () {
+        if ($('.b3-solo-list li').length === 0) {
+            return false;
+        }
+        
+        $('.side footer').after('<div class="toc"><a href="javascript:$(\'.side .toc\').hide()" class="close">X</a></div>');
+
+         $('.side .toc a').after($('.b3-solo-list'));
+
+        $('.side .toc-btn').show();
+    },
     resetTags: function () {
         $("a.tag").each(function (i) {
             $(this).addClass("color" + Math.ceil(Math.random() * 4));

yilia/js/yilia.min.js

@@ -1,16 +1 @@
-/*
- * Copyright (c) 2010-2016, b3log.org & hacpai.com
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var Yilia={init:function(){Util.killIE(),this.resetTags(),$(window).scroll(function(){$("article").length>0&&0===$("article.post").length&&$("article:not(.show)").each(function(){$(this).offset().top<=$(window).scrollTop()+$(window).height()-$(this).height()/7&&$(this).addClass("show")}),$(window).scrollTop()>$(window).height()?$(".icon-goup").show():$(".icon-goup").hide(),1===$("article.post").length&&$("article.post").addClass("show")}),$(window).scroll()},resetTags:function(){$("a.tag").each(function(t){$(this).addClass("color"+Math.ceil(4*Math.random()))})},share:function(){$(".share span").click(function(){var t=$(this).data("type"),i=encodeURIComponent($("title").text()),o=$(".post-title a").attr("href")?$(".post-title a").attr("href"):location,e=$(".post-content img:eq(0)").attr("src"),n={};n.tencent="http://share.v.t.qq.com/index.php?c=share&a=index&title="+i+"&url="+o+"&pic="+e,n.weibo="http://v.t.sina.com.cn/share/share.php?title="+i+"&url="+o+"&pic="+e,n.google="https://plus.google.com/share?url="+o,n.twitter="https://twitter.com/intent/tweet?status="+i+" "+o,window.open(n[t],"_blank","top=100,left=200,width=648,height=618")})}};Yilia.init();
+var Yilia={init:function(){Util.killIE(),this._initToc(),this.resetTags(),$(window).scroll(function(){$("article").length>0&&0===$("article.post").length&&$("article:not(.show)").each(function(){$(this).offset().top<=$(window).scrollTop()+$(window).height()-$(this).height()/7&&$(this).addClass("show")}),$(window).scrollTop()>$(window).height()?$(".icon-goup").show():$(".icon-goup").hide(),1===$("article.post").length&&$("article.post").addClass("show")}),$(window).scroll()},_initToc:function(){return 0===$(".b3-solo-list li").length?!1:($(".side footer").after('<div class="toc"><a href="javascript:$(\'.side .toc\').hide()" class="close">X</a></div>'),$(".side .toc a").after($(".b3-solo-list")),void $(".side .toc-btn").show())},resetTags:function(){$("a.tag").each(function(t){$(this).addClass("color"+Math.ceil(4*Math.random()))})},share:function(){$(".share span").click(function(){var t=$(this).data("type"),i=encodeURIComponent($("title").text()),o=$(".post-title a").attr("href")?$(".post-title a").attr("href"):location,e=$(".post-content img:eq(0)").attr("src"),s={};s.tencent="http://share.v.t.qq.com/index.php?c=share&a=index&title="+i+"&url="+o+"&pic="+e,s.weibo="http://v.t.sina.com.cn/share/share.php?title="+i+"&url="+o+"&pic="+e,s.google="https://plus.google.com/share?url="+o,s.twitter="https://twitter.com/intent/tweet?status="+i+" "+o,window.open(s[t],"_blank","top=100,left=200,width=648,height=618")})}};Yilia.init();

yilia/lang/lang_en_US.properties

@@ -16,10 +16,11 @@
 
 #
 # Description: B3log Solo language configurations(en_US).
-# Version: 1.0.0.1, Jun 19, 2015
+# Version: 1.1.0.1, Oct 11, 2016
 # Author: Liyuan Li
 #
 
+tocLabel=Article ToC
 subscribeLabel=Subscribe
 dynamicLabel=Dynamic
 adminConsoleLabel=Admin

yilia/lang/lang_zh_CN.properties

@@ -16,10 +16,11 @@
 
 #
 # Description: B3log Solo default language configurations(zh_CN).
-# Version: 1.0.0.1, Jun 19, 2015
+# Version: 1.1.0.1, Oct 11, 2016
 # Author: Liyuan Li
 #
 
+tocLabel=\u6587\u7ae0\u76ee\u5f55
 subscribeLabel=\u8ba2\u9605
 dynamicLabel=\u52a8\u6001
 adminConsoleLabel=\u540e\u53f0\u7ba1\u7406

yilia/side.ftl

@@ -1,5 +1,7 @@
 <div class="side">
-    <div class="overlay"></div>
+    <div class="overlay">
+        <a href="javascript:$('.side .toc').show()" class="toc-btn">${tocLabel}</a>
+    </div>
     <header class="content">
         <a href="${servePath}">
             <img class="avatar" src="${adminUser.userAvatar}" title="${userName}"/>