From 594a3508b2aa620c1960d8ded57ec0fafba79e7e Mon Sep 17 00:00:00 2001
From: xaoxuu <xaoxuu@gmail.com>
Date: Wed, 29 Aug 2018 00:08:58 +0800
Subject: [PATCH] prev-next

---
 layout/_partial/article.ejs | 51 +++++++++++++++++++++++++++----------
 source/less/_article.less   | 45 ++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
index cd260f0..5297819 100755
--- a/layout/_partial/article.ejs
+++ b/layout/_partial/article.ejs
@@ -29,22 +29,45 @@
         <% } %>
 
         <% if(post.prev || post.next){ %>
-            <div class="art-item-footer">
+            <div class="prev-next">
                 <% if(post.prev){ %>
-                    <span class="art-item-left">
-                        <i class="fa fa-chevron-left fa-fw" aria-hidden="true"></i>&nbsp;
-                        <a href="<%=url_for(post.prev.path)%>" rel="prev" title="<%=post.prev.title%>">
-                            <%= post.prev.title %>
-                        </a>
-                    </span>
+                    <section class="prev" >
+                        <span class="art-item-left">
+                            <i class="fa fa-chevron-left fa-fw" aria-hidden="true"></i>&nbsp;上一篇
+                            <h4>
+                                <a href="<%=url_for(post.prev.path)%>" rel="prev" title="<%=post.prev.title%>">
+                                    <%= post.prev.title %>
+                                </a>
+                            </h4>
+                            <% if (post.prev.tags && post.prev.tags.length) { %>
+                                <div class="tags">
+                                    <% post.prev.tags.each(function(item){ %>
+                                        <a href="<%- url_for(item.path) %>"><i class="fa fa-tag fa-fw"></i>&nbsp;<%=item.name %></a>
+                                    <%})%>
+                                </div>
+                            <% } %>
+                        </span>
+                    </section>
                 <% } %>
                 <% if(post.next){ %>
-                    <span class="art-item-right" aria-hidden="true">
-                        <a href="<%=url_for(post.next.path) %>" rel="next" title="<%=post.next.title %>">
-                            <%=post.next.title  %>
-                        </a>&nbsp;
-                        <i class="fa fa-chevron-right fa-fw" aria-hidden="true"></i>
-                    </span>
+                    <section class="next">
+                        <span class="art-item-right" aria-hidden="true">
+                            下一篇&nbsp;<i class="fa fa-chevron-right fa-fw" aria-hidden="true"></i>
+                            <h4>
+                                <a href="<%=url_for(post.next.path)%>" rel="prev" title="<%=post.next.title%>">
+                                    <%= post.next.title %>
+                                </a>
+                            </h4>
+                            <% if (post.next.tags && post.next.tags.length) { %>
+                                <div class="tags">
+                                    <% post.next.tags.each(function(item){ %>
+                                        <a href="<%- url_for(item.path) %>"><i class="fa fa-tag fa-fw"></i>&nbsp;<%=item.name %></a>
+                                    <%})%>
+                                    &nbsp;
+                                </div>
+                            <% } %>
+                        </span>
+                    </section>
                 <%} %>
             </div>
         <%} %>
@@ -57,7 +80,7 @@
 
 <!-- 显示推荐文章和评论 -->
 <% if (post && ((config.recommended_posts && config.recommended_posts.autoDisplay == false && post.recommended_posts != false) || (post.comments && (config.disqus_shortname || config.livere_shortname || config.valine)) )) { %>
-    <article class="post white-box article-type-<%= post.layout %>>">
+    <article class="post white-box comments">
         <section class="article typo">
 
             <% if (config.recommended_posts && config.recommended_posts.autoDisplay == false && post.recommended_posts != false) { %>
diff --git a/source/less/_article.less b/source/less/_article.less
index f298cc3..5206017 100755
--- a/source/less/_article.less
+++ b/source/less/_article.less
@@ -286,6 +286,51 @@
             line-height: 1.6em;
         }
     }
+    .prev-next{
+        display: flex;
+        justify-content: space-around;
+        section{
+            width: 50%;
+            padding: @gap/2;
+            background-color: @theme-bg-code-block;
+            border-radius: @border-radius-width;
+            p{
+                font-size: @base-font-size;
+                line-height: @base-line-height;
+                margin: 0;
+            }
+            h4{
+                margin-top: @gap/2;
+                margin-bottom: @gap/2;
+                position: relative;
+                font-family: @base-font-family;
+                font-weight: bold;
+                font-size: @font-size-h4;
+                // a{
+                // color: @theme-text-main;
+                // }
+            }
+            .enable-trans();
+            border: 1px solid transparent;
+            &:hover{
+                border: 1px solid fade(@theme-bg-quote, 40%);
+            }
+            .tags{
+                background: transparent;
+                padding: 0;
+                    margin-top: @gap/2;
+                    margin-bottom: 0;
+            }
+        }
+        .prev{
+            text-align: left;
+            margin-right: @gap/2;
+        }
+        .next{
+            text-align: right;
+            margin-left: @gap/2;
+        }
+    }
 }
 /* Tomorrow Night Eighties Theme */
 /* Original theme - https://github.com/chriskempson/tomorrow-theme */