Permalink
Browse files

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/
  • Loading branch information...
MOxFIVE committed Dec 21, 2015
1 parent 4490fdb commit 993b30488f43a9fa3d5616e4bd155e48413e7ae6
Showing with 54 additions and 4 deletions.
  1. +19 −0 layout/_partial/post-nav-button.ejs
  2. +35 −4 source/css/_partial/main.styl
@@ -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>
<% } %>
@@ -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;
}
};
}
}

0 comments on commit 993b304

Please sign in to comment.