From 23d9163a2dc2a329a6a150d0be3bb528d8fd096d Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Mon, 17 Aug 2020 10:46:46 +0800
Subject: [PATCH] Refactor post-footer using flex layout

---
 layout/_macro/post.njk                        | 35 ++++++++--------
 layout/_partials/post/post-copyright.njk      |  4 +-
 .../_common/components/post/post-footer.styl  | 41 +++++++++++++++++++
 .../_common/components/post/post-tags.styl    | 13 ------
 source/css/_common/components/post/post.styl  | 21 +---------
 5 files changed, 61 insertions(+), 53 deletions(-)
 create mode 100644 source/css/_common/components/post/post-footer.styl
 delete mode 100644 source/css/_common/components/post/post-tags.styl

diff --git a/layout/_macro/post.njk b/layout/_macro/post.njk
index b1c0269..61835dc 100644
--- a/layout/_macro/post.njk
+++ b/layout/_macro/post.njk
@@ -201,22 +201,24 @@
       {{ partial('_partials/post/post-related.njk') }}
     {%- endif %}
 
-    {%- if not is_index %}
-      {{- next_inject('postBodyEnd') }}
+    <footer class="post-footer">
+      {%- if is_index %}
+        <div class="post-eof"></div>
+      {% else %}
+        {{- next_inject('postBodyEnd') }}
 
-      {%- if post.reward_settings.enable %}
-        {{ partial('_partials/post/post-reward.njk') }}
-      {%- endif %}
+        {%- if post.reward_settings.enable %}
+          {{ partial('_partials/post/post-reward.njk') }}
+        {%- endif %}
 
-      {%- if theme.creative_commons.license and theme.creative_commons.post %}
-        {{ partial('_partials/post/post-copyright.njk') }}
-      {%- endif %}
+        {%- if theme.creative_commons.license and theme.creative_commons.post %}
+          {{ partial('_partials/post/post-copyright.njk') }}
+        {%- endif %}
 
-      {%- if theme.follow_me %}
-        {{ partial('_partials/post/post-followme.njk', {}, {cache: theme.cache.enable}) }}
-      {%- endif %}
+        {%- if theme.follow_me %}
+          {{ partial('_partials/post/post-followme.njk', {}, {cache: theme.cache.enable}) }}
+        {%- endif %}
 
-      <footer class="post-footer">
         {%- if post.tags and post.tags.length %}
           {%- set tag_indicate = '<i class="fa fa-tag"></i>' if theme.tag_icon else '#' %}
           <div class="post-tags">
@@ -248,12 +250,9 @@
             </div>
           </div>
         {%- endif %}
-      </footer>
-    {% else %}
-      <footer class="post-footer">
-        <div class="post-eof"></div>
-      </footer>
-    {%- endif %}
+
+      {%- endif %}
+    </footer>
   </article>
   {######################}
   {### END POST BLOCK ###}
diff --git a/layout/_partials/post/post-copyright.njk b/layout/_partials/post/post-copyright.njk
index 2e7d575..9c25edd 100644
--- a/layout/_partials/post/post-copyright.njk
+++ b/layout/_partials/post/post-copyright.njk
@@ -1,8 +1,8 @@
 {%- set ccIcon = '<i class="fab fa-fw fa-creative-commons"></i>' %}
 {%- set ccText = theme.creative_commons.license | upper %}
 
-<div>
-<ul class="post-copyright">
+<div class="post-copyright">
+<ul>
   <li class="post-copyright-author">
     <strong>{{ __('post.copyright.author') + __('symbol.colon') }} </strong>
     {{- page.author or author }}
diff --git a/source/css/_common/components/post/post-footer.styl b/source/css/_common/components/post/post-footer.styl
new file mode 100644
index 0000000..bf661ba
--- /dev/null
+++ b/source/css/_common/components/post/post-footer.styl
@@ -0,0 +1,41 @@
+// Flexbox layout makes it possible to reorder the child
+// elements of .post-footer through the `order` CSS property
+// Fix issue #16
+// To do: use `gap` instead of `margin-bottom`
+// See https://caniuse.com/#feat=flexbox-gap
+.post-footer {
+  flex-column();
+}
+
+.post-eof {
+  background: $grey-light;
+  height: 1px;
+  margin: $post-eof-margin-top auto $post-eof-margin-bottom;
+  width: 8%;
+
+  .post-block:last-of-type & {
+    display: none;
+  }
+}
+
+if (hexo-config('creative_commons.post')) {
+  .post-copyright ul {
+    list-style: none;
+    padding: .5em 1em;
+    post-card();
+  }
+}
+
+.post-tags {
+  margin-top: 40px;
+  text-align: center;
+
+  a {
+    display: inline-block;
+    font-size: $font-size-smaller;
+
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}
diff --git a/source/css/_common/components/post/post-tags.styl b/source/css/_common/components/post/post-tags.styl
deleted file mode 100644
index 0431cc6..0000000
--- a/source/css/_common/components/post/post-tags.styl
+++ /dev/null
@@ -1,13 +0,0 @@
-.post-tags {
-  margin-top: 40px;
-  text-align: center;
-
-  a {
-    display: inline-block;
-    font-size: $font-size-smaller;
-
-    &:not(:last-child) {
-      margin-right: 10px;
-    }
-  }
-}
diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/post.styl
index 2080f70..7b7af2d 100644
--- a/source/css/_common/components/post/post.styl
+++ b/source/css/_common/components/post/post.styl
@@ -16,25 +16,6 @@
   text-align: center;
 }
 
-if (hexo-config('creative_commons.post')) {
-  .post-copyright {
-    list-style: none;
-    padding: .5em 1em;
-    post-card();
-  }
-}
-
-.post-eof {
-  background: $grey-light;
-  height: 1px;
-  margin: $post-eof-margin-top auto $post-eof-margin-bottom;
-  width: 8%;
-
-  .post-block:last-of-type & {
-    display: none;
-  }
-}
-
 .use-motion {
   if (hexo-config('motion.transition.post_block')) {
     .post-block, .pagination, .comments {
@@ -66,7 +47,7 @@ if (hexo-config('creative_commons.post')) {
 @import 'post-gallery';
 @import 'post-header';
 @import 'post-nav';
-@import 'post-tags';
+@import 'post-footer';
 @import 'post-widgets';
 @import 'post-reward';