feat: mini post list 迷你文章列表

Add a mini archives/post list in left column, Show or hide the list via button in post nav bar. 点击左边栏右侧的对应按钮，可调出一个迷你归档页，方便文章切换。 http://moxfive.xyz/2015/11/09/web-style-guide/
MOxFIVE · Dec 21, 2015 · 993b304 · 993b304
1 parent 4490fdb
commit 993b304
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 4 deletions.
diff --git a/layout/_partial/post-nav-button.ejs b/layout/_partial/post-nav-button.ejs
@@ -4,13 +4,15 @@
                 <a href="<%- url_for(post.prev.path) %>" title="上一篇: <%= post.prev.title %>">
                 <i class="fa fa-angle-left"></i>
                 </a>
+                <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>
                 <a href="/" title="回到主页"><i class="fa fa-home"></i></a>
             </div>
         <% } %>
 
         <% if (!post.prev && post.next){ %>
             <div  class="post-nav-button">
                 <a href="/" title="回到主页"><i class="fa fa-home"></i></a>
+                <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>
                 <a href="<%- url_for(post.next.path) %>" title="下一篇: <%= post.next.title %>">
                 <i class="fa fa-angle-right"></i>
                 </a>
@@ -22,9 +24,26 @@
                 <a href="<%- url_for(post.prev.path) %>" title="上一篇: <%= post.prev.title %>">
                 <i class="fa fa-angle-left"></i>
                 </a>
+                <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>
                 <a href="<%- url_for(post.next.path) %>" title="下一篇: <%= post.next.title %>">
                 <i class="fa fa-angle-right"></i>
                 </a>
             </div>
         <% } %>
+        <%- list_posts({amount: 999}) %>
+        <script src="http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
+        <script>
+            $(".post-list").addClass("toc-article");
+            $(".post-list-item a").attr("target","_blank");
+            $(".post-nav-button > a:nth-child(2)").click(function() {
+                $(".fa-bars, .fa-times").toggle();
+                $(".post-list").toggle(300);
+                if ($(".toc").length > 0) {
+                    $("#toc, #tocButton").toggle(200);
+                }
+                else {
+                    $(".switch-btn, .switch-area").toggle(200);
+                }
+            })
+        </script>
 <% } %>
diff --git a/source/css/_partial/main.styl b/source/css/_partial/main.styl
@@ -377,9 +377,11 @@
     top: 61.8%;
     right: 0;
     text-align: center;
+    line-height: 42px;
     a {
         display: block;
         width: 29px;
+        height: 42px;
         font-size: 28px;
         background: rgba(215, 216, 215, .4);
         border-bottom: 1px solid white;
@@ -389,8 +391,6 @@
     }
     .fa {
         color: rgba(255, 255, 255, .8);
-        padding-top: 6px;
-        padding-bottom: 6px;
     }
     a:hover {
         background: rgba(147, 181, 224, .3); 
@@ -427,14 +427,21 @@
     left: 300px;
     top: 61.8%;
     text-align: center;
+    line-height: 42px;
     a {
         display: block;
         width: 29px;
+        height: 42px;
         font-size: 28px;
+        .fa-times {
+            display: none;
+        }
+        border-bottom: 1px solid transparent;
+        &:last-child {
+            border-bottom: none;
+        }
     }
     .fa {
-        padding-top: 16px;
-        padding-bottom: 16px;
         color: rgba(255, 255, 255, .8);
     }
     a:hover {
@@ -443,4 +450,28 @@
             color: white;
         }
     }
+}
+
+.post-list {
+    display: none;
+    text-align: left;
+    font-size: .9em;
+    line-height: 1.3em;
+    list-style: decimal;
+    li {
+        margin: .4em 0 .1em .7em;
+        a {
+            color: gray;
+            &:hover {
+                color: ;
+                text-decoration: none;
+            }
+        }
+        &:hover {
+            background: ;
+            a {
+                color: #88acdb;
+            }
+        };
+   }
 }