From 14172486dfb480aa80d467592963f57cc0bb734d Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Fri, 22 Nov 2019 17:53:41 +0800
Subject: [PATCH] Add post navigation display configuration

---
 _config.yml                                   |  4 ++
 layout/_macro/post.swig                       | 22 +--------
 scripts/helpers/engine.js                     | 20 ++++++++
 .../css/_common/components/post/post-nav.styl | 48 +++++++++----------
 source/css/_schemes/Gemini/index.styl         |  9 ----
 5 files changed, 48 insertions(+), 55 deletions(-)

diff --git a/_config.yml b/_config.yml
index f625ff08d7..cd96c1b3de 100644
--- a/_config.yml
+++ b/_config.yml
@@ -305,6 +305,10 @@ post_edit:
   url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name # Link for view source
   #url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name # Link for fork & edit
 
+# Show previous post and next post in post footer if exists
+# Available values: left | right | false
+post_navigation: left
+
 
 # ---------------------------------------------------------------
 # Custom Page Settings
diff --git a/layout/_macro/post.swig b/layout/_macro/post.swig
index 18dce24aa0..21148b4a97 100644
--- a/layout/_macro/post.swig
+++ b/layout/_macro/post.swig
@@ -250,27 +250,7 @@
 
         {{ partial('_partials/post/post-footer.swig', {}, {cache: theme.cache.enable}) }}
 
-        {%- if post.prev or post.next %}
-          <div class="post-nav">
-            <div class="post-nav-next post-nav-item">
-              {%- if post.next %}
-                <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
-                  <i class="fa fa-chevron-left"></i> {{ post.next.title }}
-                </a>
-              {%- endif %}
-            </div>
-
-            <span class="post-nav-divider"></span>
-
-            <div class="post-nav-prev post-nav-item">
-              {%- if post.prev %}
-                <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
-                  {{ post.prev.title }} <i class="fa fa-chevron-right"></i>
-                </a>
-              {%- endif %}
-            </div>
-          </div>
-        {%- endif %}
+        {{ post_nav(post) }}
       </footer>
     {% else %}
       <footer class="post-footer">
diff --git a/scripts/helpers/engine.js b/scripts/helpers/engine.js
index f38446a8a4..0f8bef53e7 100644
--- a/scripts/helpers/engine.js
+++ b/scripts/helpers/engine.js
@@ -30,6 +30,26 @@ hexo.extend.helper.register('post_edit', function(src) {
   });
 });
 
+hexo.extend.helper.register('post_nav', function(post) {
+  const theme = hexo.theme.config;
+  if (theme.post_navigation === false || (!post.prev && !post.next)) return '';
+  const prev = theme.post_navigation === 'right' ? post.prev : post.next;
+  const next = theme.post_navigation === 'right' ? post.next : post.prev;
+  const left = prev ? `
+    <a href="${this.url_for(prev.path)}" rel="prev" title="${prev.title}">
+      <i class="fa fa-chevron-left"></i> ${prev.title}
+    </a>` : '';
+  const right = next ? `
+    <a href="${this.url_for(next.path)}" rel="next" title="${next.title}">
+      ${next.title} <i class="fa fa-chevron-right"></i>
+    </a>` : '';
+  return `
+    <div class="post-nav">
+      <div class="post-nav-item">${left}</div>
+      <div class="post-nav-item">${right}</div>
+    </div>`
+});
+
 hexo.extend.helper.register('gitalk_md5', function(path) {
   let str = this.url_for(path);
   str = encodeURI(str);
diff --git a/source/css/_common/components/post/post-nav.styl b/source/css/_common/components/post/post-nav.styl
index 7b862d3417..bebafeca56 100644
--- a/source/css/_common/components/post/post-nav.styl
+++ b/source/css/_common/components/post/post-nav.styl
@@ -1,24 +1,16 @@
 .post-nav {
   border-top: 1px solid $gainsboro;
-  display: table;
+  display: flex;
+  justify-content: space-between;
   margin-top: 15px;
-  width: 100%;
-}
-
-.post-nav-divider {
-  display: table-cell;
-  width: 10%;
+  padding-top: 10px;
 }
 
 .post-nav-item {
-  display: table-cell;
-  padding: 10px 0 0 0;
-  vertical-align: top;
-  width: 45%;
+  flex: 1;
 
   a {
     border-bottom: none;
-    color: $link-color;
     display: block;
     font-size: $font-size-small;
     line-height: 1.6;
@@ -36,24 +28,30 @@
 
   .fa {
     font-size: $font-size-smallest;
-    margin-right: 5px;
   }
-}
 
-.post-nav-next {
-  a {
-    padding-left: 5px;
-  }
-}
+  &:first-child {
+    margin-right: 15px;
 
-.post-nav-prev {
-  text-align: right;
+    a {
+      padding-left: 5px;
+    }
 
-  a {
-    padding-right: 5px;
+    .fa {
+      margin-right: 5px;
+    }
   }
 
-  .fa {
-    margin-left: 5px;
+  &:last-child {
+    margin-left: 15px;
+    text-align: right;
+
+    a {
+      padding-right: 5px;
+    }
+
+    .fa {
+      margin-left: 5px;
+    }
   }
 }
diff --git a/source/css/_schemes/Gemini/index.styl b/source/css/_schemes/Gemini/index.styl
index 4859ebb5a8..f12f5c018d 100644
--- a/source/css/_schemes/Gemini/index.styl
+++ b/source/css/_schemes/Gemini/index.styl
@@ -68,15 +68,6 @@ $use-seo = hexo-config('seo');
   padding-top: initial;
 }
 
-// Post navigation items.
-.post-nav-divider {
-  width: 4%;
-}
-
-.post-nav-item {
-  width: 48%;
-}
-
 // Post delimiters.
 .post-eof {
   display: none;