prev-next

layout/_partial/archive.ejs

@@ -31,24 +31,34 @@
     <% } %>
     <% page.posts.each(function(post){ %>
         <div class='post-wrapper'>
-    <%- partial('post', {post: post}) %>
+            <%- partial('post', {post: post}) %>
         </div>
     <% }) %>
 </section>
 
 <% if (page.total > 1) { %>
-    <nav id="page-nav">
-        <% if (page.prev != 0) { %>
-            <a class="prev" rel="prev" href="<%= url_for(page.prev_link) %>">
-                <span class="icon icon-chevron-left"></span>
-                <span class="text">PREVIOUS</span>
-            </a>
-        <% } %>
-        <% if (page.next != 0) { %>
-            <a class="next" rel="next" href="<%= url_for(page.next_link) %>">
-                <span class="text">NEXT</span>
-                <span class="icon icon-chevron-right"></span>
-            </a>
-        <% } %>
-    </nav>
+    <br>
+    <div class="prev-next">
+        <div class="prev-next">
+            <% if (page.prev != 0) { %>
+                <a class="prev" rel="prev" href="<%= url_for(page.prev_link) %>">
+                    <section class="post prev" >
+                        <i class="fa fa-chevron-left" aria-hidden="true"></i>&nbsp;上一页&nbsp;
+                    </section>
+                </a>
+            <% } %>
+            <p class="current">
+                <%= page.current%> / <%= page.total%>
+            </p>
+            <% if (page.next != 0) { %>
+                <a class="next" rel="next" href="<%= url_for(page.next_link) %>">
+                    <section class="post next">
+                        &nbsp;下一页&nbsp;<i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    </section>
+                </a>
+            <% } %>
+
+        </div>
+    </div>
+
 <% } %>

source/less/_article.less

@@ -287,6 +287,7 @@
         }
     }
     .prev-next{
+        width: 100%;
         display: flex;
         justify-content: space-between;
         align-content: flex-start;
@@ -330,15 +331,22 @@
         }
         .prev{
             text-align: left;
+            margin-left: 0;
             margin-right: @gap/2;
+            border-top-right-radius: @border-radius-width;
+            border-bottom-right-radius: @border-radius-width;
         }
         .next{
             text-align: right;
             margin-left: @gap/2;
+            margin-right: 0;
+            border-top-left-radius: @border-radius-width;
+            border-bottom-left-radius: @border-radius-width;
         }
 
     }
 }
+
 /* Tomorrow Night Eighties Theme */
 /* Original theme - https://github.com/chriskempson/tomorrow-theme */
 /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */

source/less/_main.less

@@ -140,7 +140,12 @@
                 padding-right: @gap;
                 width:~"calc(100% - 0 * @{gap})";
               }
-
+              .auto-padding {
+                  padding-left: @gap;
+                  padding-right: @gap;
+                  border-bottom-left-radius: 0;
+                  border-bottom-right-radius: 0;
+              }
             }
 
         }
@@ -261,4 +266,37 @@
         padding-right: 0;
         .mobile-post();
     }
+
+    .prev-next{
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        color: fade(@theme-text-main, 50%);
+        .prev{
+            text-align: left;
+            margin-left: 0;
+            margin-right: @gap/2;
+            border-top-right-radius: 32px;
+            border-bottom-right-radius: 32px;
+        }
+        .next{
+            text-align: right;
+            margin-left: @gap/2;
+            margin-right: 0;
+            border-top-left-radius: 32px;
+            border-bottom-left-radius: 32px;
+        }
+        section{
+            color: fade(@theme-text-main, 80%);
+            padding: @gap;
+            border-radius: @border-radius-width;
+        }
+        @media(max-width:@on-phone) {
+            section{
+                border-radius: 0;
+            }
+        }
+    }
+
 }