Add TOC support

layout/_partial/post/article.ejs

@@ -1,5 +1,5 @@
 <div class="article">
-    <div>
+    <div class='main'>
         <h1 class="title"><%- page.title %></h1>
         <div class="stuff">
             <span><%- page.date.locale("zh-cn").format("MMMM DD, YYYY") %></span>
@@ -13,4 +13,10 @@
             </audio>
         </div>
     </div>
+    <% if (theme.TOC == true){ %>
+      <div class='side'>
+        <%- toc(page.content, {list_number: true}) %>
+      </div>
+    <%}%>
 </div>
+

source/css/diaspora.css

@@ -95,15 +95,15 @@ body.mu .icon-logo {color:#333;}
 #container:before {content:'';display:block;width:1px;height:200%;position:absolute;left:50%;background:#eaeaea;top:-50%;z-index:0;}
 #primary {position:relative;}
 #single {background:#fff;position:relative;overflow-x:hidden;}
-.section {position:relative;/*left:-100%;*/  width:200%;overflow:hidden;-webkit-transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);-moz-transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);}
-.article {width:50%;display:inline-block;vertical-align:top;position:relative;margin-top:50px;}
+.section {position:relative; width:100%;overflow:hidden;-webkit-transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);-moz-transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);}
+.article {width:100%;display:inline-block;vertical-align:top;position:relative;margin-top:50px;}
 body.touch,body.touch .article {margin-top:0;}
 .zoom:before {opacity:0;color:#fff;font-size:20px;display:block;z-index:3;left:50%;top:70%;padding:5px;margin-top:-15px;margin-left:-15px;position:absolute;background:rgba(0,0,0,.7);-webkit-transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);-moz-transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);transition:all 0.3s cubic-bezier(0.25,0.5,0.5,0.9);}
 .zoom:hover:before {opacity:1;top:50%;}
 .touch .zoom:hover:before {opacity:0;}
 .icon-arrow-left:before {content:'\e606';position:absolute;left:0;top:50%;margin-top:-30px;color:#666;}
 .icon-arrow-right:before {content:'\e605';position:absolute;right:0;top:50%;margin-top:-30px;color:#666;}
-.article > div {padding:30px 0;width:700px;margin:0 auto;}
+.article > div {padding:30px 0;margin:0 auto;}
 h1.title {font-size:30px;color:#333;line-height:1.3;position:relative;font-weight:bold;}
 .page .content:before {display:none;}
 .stuff {margin-top:20px;color:#666;font-size:13px;}
@@ -245,3 +245,32 @@ pre .string,pre .value,pre .inheritance,pre .header,pre .ruby .symbol,pre .xml .
 pre .css .hexcolor {color:#66cccc;}
 pre .function,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword,pre .perl .sub,pre .javascript .title,pre .coffeescript .title {color:#6699cc;}
 pre .keyword,pre .javascript .function {color:#cc99cc;}
+.toc {width:200px;padding:1em;line-height:2.3;}
+.toc .toc-item:hover {font-weight:900;}
+.toc li a {display:inline-block;color:#737373;text-decoration:none;transition:color,padding 0.2s ease-in-out;}
+.toc li a:hover {padding-left: 8px; border-left:3px solid black;}
+.article{
+  width:70%;
+  margin: 0 auto;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+}
+.article > div{
+  padding: 80px 15px;
+}
+.article > .side {
+  align-self: flex-start;
+  flex: 0 0 200px;
+}
+.main{
+  width:700px;
+}
+.toc{
+  position: fixed;
+  top: 60px;
+  right: 100px;
+}

source/js/diaspora.js

@@ -336,6 +336,7 @@ $(function() {
                 break;
             // home
             case (tag.indexOf('icon-home') != -1):
+                $('.toc').fadeOut(100);
                 if ($('#preview').hasClass('show')) {
                     history.back();
                 } else {
@@ -382,11 +383,27 @@ $(function() {
                 Diaspora.HS($(e.target), 'replace')
                 return false;
                 break;
+            // toc
+            case (tag.indexOf('toc-text') != -1 || tag.indexOf('toc-link') != -1
+                  || tag.indexOf('toc-number') != -1):
+                hash = '';
+                if (e.target.nodeName == 'SPAN'){
+                  hash = $(e.target).parent().attr('href')
+                }else{
+                  hash = $(e.target).attr('href')
+                }
+                to  = $("a.headerlink[href='" + hash + "']")
+                $("html,body").animate({
+                  scrollTop: to.offset().top - 50
+                }, 300);
+                return false;
+                break;
             // quick view
             case (tag.indexOf('pviewa') != -1):
                 $('body').removeClass('mu')
                 setTimeout(function() {
                     Diaspora.HS($(e.target), 'push')
+                    $('.toc').fadeIn(1000);
                 }, 300)
                 return false;
                 break;