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

buttons in post: next/prev article, home

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') %>

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>
+  <% } %>
+<% } %>

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;
+    }
+    }
+  }

source/css/_partial/mobile.styl

@@ -308,4 +308,7 @@
     color: none;
     opacity: 1; 
   }
+}
+.post-nav-button {
+  display: none;
 }