feat: post-nav-button 文章导航切换按钮

buttons in post: next/prev article, home
MOxFIVE · Oct 17, 2015 · 4aad43d · 4aad43d
1 parent e4e5226
commit 4aad43d
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 1 deletion.
diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
@@ -97,3 +97,4 @@
     <a href="#footer" title="转到底部"><i class="fa fa-arrow-down"></i></a>
     </div>
 <% } %>
+<%- partial('_partial/post-nav-button') %>
diff --git a/layout/_partial/post-nav-button.ejs b/layout/_partial/post-nav-button.ejs
@@ -0,0 +1,28 @@
+<% if (is_post()){ %>
+  <% if (post.prev && !post.next){ %>
+    <div  class="post-nav-button">
+    <a href="<%- url_for(post.prev.path) %>" title="上一篇: <%= post.prev.title %>">
+    <i class="fa fa-angle-left"></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 href="<%- url_for(post.next.path) %>" title="下一篇: <%= post.next.title %>">
+    <i class="fa fa-angle-right"></i>
+    </a>
+    </div>
+  <% } %>
+    <% if (post.prev && post.next){ %>
+    <div  class="post-nav-button">
+    <a href="<%- url_for(post.prev.path) %>" title="上一篇: <%= post.prev.title %>">
+    <i class="fa fa-angle-left"></i>
+    </a>
+    <a href="<%- url_for(post.next.path) %>" title="下一篇: <%= post.next.title %>">
+    <i class="fa fa-angle-right"></i>
+    </a>
+    </div>
+  <% } %>
+<% } %>
diff --git a/source/css/_partial/main.styl b/source/css/_partial/main.styl
@@ -379,4 +379,26 @@
     color: #88acdb;
     opacity: 1; 
   }
-}
+}
+.post-nav-button {
+    position: fixed;
+    left: 300px;
+    top: 61.8%;
+    text-align: center;
+  a {
+    display: block;
+    width: 29px;
+    font-size: 28px;
+  }
+  .fa {
+    color: rgba(255, 255, 255, .8);
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+  a:hover {
+    background: rgba(147, 181, 224, .3); 
+    .fa {
+      color: white;
+    }
+    }
+  }
diff --git a/source/css/_partial/mobile.styl b/source/css/_partial/mobile.styl
@@ -308,4 +308,7 @@
     color: none;
     opacity: 1; 
   }
+}
+.post-nav-button {
+  display: none;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -97,3 +97,4 @@ @@
         <a href="#footer" title="转到底部"><i class="fa fa-arrow-down"></i></a>
         </div>
     <% } %>
+    <%- partial('_partial/post-nav-button') %>