Add post navigation display configuration

_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

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">

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);

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

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;