From 19aac217ef4f58b435ca9e8d6b0309e37097e2b0 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Wed, 17 Nov 2021 23:20:02 +0800
Subject: [PATCH] feat: added tags display at the bottom of article details
 page in mobile and tablet (#84)

---
 layout/article-content.ejs                      | 10 ++++++++++
 .../css/layout/_partial/article-meta-info.styl  | 15 ++++++---------
 source/css/layout/article-content.styl          | 17 +++++++++++++++++
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/layout/article-content.ejs b/layout/article-content.ejs
index 275dd06..6016088 100644
--- a/layout/article-content.ejs
+++ b/layout/article-content.ejs
@@ -40,6 +40,16 @@
             </div>
         <% } %>
 
+        <% if (page.tags.length) { %>
+            <ul class="post-tags-box">
+                <% page.tags.forEach((tag) => { %>
+                    <li class="tag-item">
+                        <a href="<%- url_for(tag.path) %>">#<%= tag.name %></a>&nbsp;
+                    </li>
+                <% }); %>
+            </ul>
+        <% } %>
+
         <% if (page.prev || page.next) { %>
             <div class="article-nav">
                 <% if (page.prev) { %>
diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl
index c702a39..792dec8 100644
--- a/source/css/layout/_partial/article-meta-info.styl
+++ b/source/css/layout/_partial/article-meta-info.styl
@@ -27,18 +27,15 @@
     }
   }
 
+  .article-min2read, .article-tags {
+    +keep-tablet() {
+      display: none;
+    }
+  }
 
-  .article-wordcount, .article-tags {
+  .article-wordcount {
     +keep-mobile() {
       display: none;
     }
   }
-
-  .article-min2read, .article-categories {
-
-    +keep-tablet() {
-      display: none;
-    }
-
-  }
 }
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index 6337bb8..0be22b4 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -103,11 +103,28 @@ $article-title-font-size = 1.6rem;
     color: var(--default-text-color);
   }
 
+
+  .post-tags-box {
+    display: none;
+    margin-top: 1.3rem;
+    justify-content: center;
+    font-size: 1.1rem;
+
+    +keep-tablet() {
+      display: flex;
+    }
+
+    .tag-item {
+      margin: 0 0.25rem;
+    }
+  }
+
   .post-copyright-info {
     margin-top: $component-spacing-value;
     width: 100%;
   }
 
+
   .article-nav {
     height: 40px;
     margin-top: $component-spacing-value;