feat(layout): complete categories and tags page

languages/en.yml

@@ -2,6 +2,8 @@ common:
   archives: 'Archives'
   category: 'Category'
   tag: 'Tag'
+  categories: 'Categories'
+  tags: 'Tags'
 nav:
   next: 'Next'
   prev: 'Prev'

languages/zh-cn.yml

@@ -2,6 +2,8 @@ common:
   archives: '归档'
   category: '分类'
   tag: '标签'
+  categories: '分类'
+  tags: '标签'
 nav:
   next: '下一页'
   prev: '上一页'

layout/categories.ejs

@@ -1,3 +1,18 @@
-<% page._categories.forEach(category => {%>
-<%= category.name %>
-<% }) %>
+<section class="section section-heading">
+    <div class="container">
+        <div class="content">
+            <h5><i class="far fa-folder"></i><%= __('common.categories') %></h5>
+        </div>
+    </div>
+</section>
+<section class="section">
+    <div class="container">
+        <div class="columns is-variable is-1 is-multiline is-mobile">
+            <% (page._categories || page.categories).forEach(category => {%>
+            <span class="column is-narrow">
+                <a class="tag is-light article-tag" href="<%= url_for(category.path) %>"><%= category.name %>&nbsp;(<%= category.posts.length%>)</a>
+            </span>
+            <% }) %>
+        </div>
+    </div>
+</section>

layout/common/article.ejs

@@ -37,9 +37,9 @@
     <% } %>
     </div>
     <% if (!index && post.tags && post.tags.length){ %>
-    <div class="columns is-multiline is-mobile article-tags">
+    <div class="columns is-variable is-1 is-multiline is-mobile">
     <% (post._tags || post.tags).forEach(tag => { %>
-        <span class="column is-narrow"><a href="<%- url_for(tag.path) %>">#<%= tag.name %></a></span>
+        <span class="column is-narrow"><a class="tag is-light article-tag" href="<%- url_for(tag.path) %>">#<%= tag.name %></a></span>
     <% }) %>
     </div>
     <% } %>

layout/tags.ejs

@@ -1,3 +1,18 @@
-<% page._tags.forEach(tag => {%>
-<%= tag.name %>
-<% }) %>
+<section class="section section-heading">
+    <div class="container">
+        <div class="content">
+            <h5>#<%= __('common.tags') %></h5>
+        </div>
+    </div>
+</section>
+<section class="section">
+    <div class="container">
+        <div class="columns is-variable is-1 is-multiline is-mobile">
+            <% (page._tags || page.tags).forEach(tag => {%>
+            <span class="column is-narrow">
+                <a class="tag is-light article-tag" href="<%= url_for(tag.path) %>">#<%= tag.name %>&nbsp;(<%= tag.posts.length%>)</a>
+            </span>
+            <% }) %>
+        </div>
+    </div>
+</section>

scripts/10_i18n.js

@@ -232,7 +232,8 @@ hexo.extend.generator.register('categories', withLanguage(function(languages, lo
                 return null;
             }
             return Object.assign({}, category, {
-                posts: posts
+                posts: posts,
+                path: i === 0 ? category.path : pathJoin(language, category.path)
             });
         }).filter(category => category !== null);
         return {
@@ -257,7 +258,8 @@ hexo.extend.generator.register('tags', withLanguage(function(languages, locals)
                 return null;
             }
             return Object.assign({}, tag, {
-                posts: posts
+                posts: posts,
+                path: i === 0 ? tag.path : pathJoin(language, tag.path)
             });
         }).filter(category => category !== null);
         return {

source/css/style.scss

@@ -8,6 +8,12 @@ body, button, input, select, textarea {
     font-family: $family-serif;
 }
 
+
+a.tag.article-tag {
+    font-size: 0.9rem;
+    text-decoration: none;
+}
+
 @media screen and (min-width: 1024px) {
     .container {
         max-width: 800px;
@@ -93,19 +99,6 @@ body, button, input, select, textarea {
         }
     }
 
-    .article-tags {
-        .column:not(:first-child) {
-            margin-left: -.75rem;
-        }
-
-        span a {
-            color: inherit;
-            background: #f2f2f2;
-            padding: 0.2rem 0.5rem;
-            border-radius: 3px;
-        }
-    }
-
     .article-nav {
         a {
             color: darkgray;