From 000e167e90ab08fc64d791eb7b0fbb762fd10e64 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Wed, 29 Apr 2020 16:08:43 +0800
Subject: [PATCH] feat: add sidebar-categories & sidebar-tagcloud

---
 _config.yml                                   | 12 +++---
 layout/_partial/sidebar-categories.ejs        |  8 ++++
 layout/_partial/sidebar-category.ejs          | 25 ------------
 .../{site-info.ejs => sidebar-site-info.ejs}  |  0
 layout/_partial/sidebar-tagcloud.ejs          | 11 ++++++
 layout/_partial/sidebar-tags.ejs              |  6 +++
 layout/_partial/sidebar-toc.ejs               |  3 +-
 layout/_partial/sidebar.ejs                   | 33 +++++++---------
 layout/page.ejs                               |  5 ++-
 ...-category.styl => sidebar-categories.styl} | 33 +++++++++++++---
 .../css/layout/_partial/sidebar-tagcloud.styl | 27 +++++++++++++
 source/css/layout/_partial/sidebar-tags.styl  | 38 +++++++++++++++++++
 source/css/layout/_partial/sidebar-toc.styl   | 16 ++------
 source/css/layout/_partial/sidebar.styl       | 21 ++++++++--
 source/css/layout/_partial/site-info.styl     |  2 +-
 source/css/layout/common/animated.styl        |  4 +-
 source/css/layout/page.styl                   |  4 +-
 source/css/style.styl                         |  4 +-
 18 files changed, 169 insertions(+), 83 deletions(-)
 create mode 100644 layout/_partial/sidebar-categories.ejs
 delete mode 100644 layout/_partial/sidebar-category.ejs
 rename layout/_partial/{site-info.ejs => sidebar-site-info.ejs} (100%)
 create mode 100644 layout/_partial/sidebar-tagcloud.ejs
 create mode 100644 layout/_partial/sidebar-tags.ejs
 rename source/css/layout/_partial/{sidebar-category.styl => sidebar-categories.styl} (69%)
 create mode 100644 source/css/layout/_partial/sidebar-tagcloud.styl
 create mode 100644 source/css/layout/_partial/sidebar-tags.styl

diff --git a/_config.yml b/_config.yml
index f5c0136..d82d07a 100644
--- a/_config.yml
+++ b/_config.yml
@@ -74,29 +74,27 @@ codeblock:
     enable: true
 
 # Table of Contents in the Sidebar
-# Front-matter variable (unsupport wrap expand_all).
 toc:
   enable: true
   # Automatically add list number to toc.
   number: true
-  # If true, all words will placed on next lines if header width longer then sidebar width.
-  wrap: false
   # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
-  expand_all: false
-  # Maximum heading depth of generated toc.
-  max_depth: 6
+  expand_all: true
 
 # magic theme style
 magic:
   enable: true
   sidebar:
-    enable: false
+    enable: true
+    fixed: true
     position: right
 
+# sidebar tools
 side-tools:
   enable: true
   position: right
 
+# back to top
 back2top:
   enable: true
   position: right
diff --git a/layout/_partial/sidebar-categories.ejs b/layout/_partial/sidebar-categories.ejs
new file mode 100644
index 0000000..1b80171
--- /dev/null
+++ b/layout/_partial/sidebar-categories.ejs
@@ -0,0 +1,8 @@
+<div class="sidebar-category">
+    <div class="category-label">文章分类</div>
+
+    <%- list_categories(site.categories, {
+        class: 'post-category'
+    }) %>
+
+</div>
diff --git a/layout/_partial/sidebar-category.ejs b/layout/_partial/sidebar-category.ejs
deleted file mode 100644
index 8c55477..0000000
--- a/layout/_partial/sidebar-category.ejs
+++ /dev/null
@@ -1,25 +0,0 @@
-<div class="sidebar-category">
-    <div class="category-label">分类</div>
-    <ul class="category-list">
-        <li class="category-list-item">
-            数据库1
-            <span class="number">8</span>
-        </li>
-        <li class="category-list-item">
-            数据库2
-            <span class="number">12</span>
-        </li>
-        <li class="category-list-item">
-            数据库3
-            <span class="number">22</span>
-        </li>
-        <li class="category-list-item">
-            数据库3
-            <span class="number">22</span>
-        </li>
-        <li class="category-list-item">
-            数据库3
-            <span class="number">22</span>
-        </li>
-    </ul>
-</div>
diff --git a/layout/_partial/site-info.ejs b/layout/_partial/sidebar-site-info.ejs
similarity index 100%
rename from layout/_partial/site-info.ejs
rename to layout/_partial/sidebar-site-info.ejs
diff --git a/layout/_partial/sidebar-tagcloud.ejs b/layout/_partial/sidebar-tagcloud.ejs
new file mode 100644
index 0000000..50b8ca1
--- /dev/null
+++ b/layout/_partial/sidebar-tagcloud.ejs
@@ -0,0 +1,11 @@
+<div class="sidebar-tagcloud">
+    <div class="tagcloud-label">标签云</div>
+    <div class="tagcloud-container">
+        <%- tagcloud(site.tags, {
+            min_font: 1,
+            max_font: 1.5,
+            unit: 'em',
+            amount: 100
+        }) %>
+    </div>
+</div>
diff --git a/layout/_partial/sidebar-tags.ejs b/layout/_partial/sidebar-tags.ejs
new file mode 100644
index 0000000..3546b74
--- /dev/null
+++ b/layout/_partial/sidebar-tags.ejs
@@ -0,0 +1,6 @@
+<div class="sidebar-tags">
+    <div class="tag-label">文章标签</div>
+    <%- list_tags(site.tags, {
+        class: 'post-tag'
+    }) %>
+</div>
diff --git a/layout/_partial/sidebar-toc.ejs b/layout/_partial/sidebar-toc.ejs
index c4b9753..1278994 100644
--- a/layout/_partial/sidebar-toc.ejs
+++ b/layout/_partial/sidebar-toc.ejs
@@ -4,8 +4,7 @@
                 page.content,
                 {
                     class: 'nav',
-                    list_number: theme.toc.number,
-                    max_depth: theme.toc.max_depth
+                    list_number: theme.toc.number
                 }
         ) %>
     </div>
diff --git a/layout/_partial/sidebar.ejs b/layout/_partial/sidebar.ejs
index 93ddf25..91ab905 100644
--- a/layout/_partial/sidebar.ejs
+++ b/layout/_partial/sidebar.ejs
@@ -1,23 +1,16 @@
-<div class="sidebar fade-in-down-animation">
-    <% if (is_home()) { %>
-        <div class="home-sidebar-container">
-            <div class="home-sidebar-item">
-                <%- partial('site-info') %>
+<% if (is_post()) { %>
+    <div class="sidebar sidebar-post fade-in-down-animation">
+        <%- partial('sidebar-toc') %>
+    </div>
+<% } else { %>
+    <div class="sidebar sidebar-other fade-in-down-animation">
+        <div class="sidebar-container">
+            <div class="sidebar-item">
+                <%- partial('sidebar-tagcloud') %>
             </div>
-            <div class="home-sidebar-item">
-                <%- partial('sidebar-category') %>
+            <div class="sidebar-item">
+                <%- partial('sidebar-categories') %>
             </div>
         </div>
-    <% } else if (is_archive()) { %>
-        <%- partial('site-info') %>
-    <% } else if (is_post() && theme.toc.enable ) { %>
-        <%- partial('sidebar-toc') %>
-    <% } else if (is_category()) { %>
-        <%- partial('site-info') %>
-    <% } else if (is_tag()) { %>
-        <%- partial('site-info') %>
-    <% } else if (page.title == 'about') { %>
-        <%- partial('site-info') %>
-    <% } %>
-
-</div>
\ No newline at end of file
+    </div>
+<% } %>
\ No newline at end of file
diff --git a/layout/page.ejs b/layout/page.ejs
index 9bb5968..f7ee076 100644
--- a/layout/page.ejs
+++ b/layout/page.ejs
@@ -3,11 +3,11 @@
         <%- partial('_partial/header') %>
     </div>
 
-    <div class="page-middle">
+    <div class="page-middle ">
 
         <main class="main-content normal-code-theme">
 
-            <div class="main-content-left">
+            <div class="main-content-left fade-in-down-animation">
                 <% if (is_home()) { %>
                     <%- partial('home-content') %>
 
@@ -33,6 +33,7 @@
                     <%- partial('_partial/sidebar') %>
                 </div>
             <% } %>
+
         </main>
 
         <div class="sidebar-tools">
diff --git a/source/css/layout/_partial/sidebar-category.styl b/source/css/layout/_partial/sidebar-categories.styl
similarity index 69%
rename from source/css/layout/_partial/sidebar-category.styl
rename to source/css/layout/_partial/sidebar-categories.styl
index 8063f07..eec0380 100644
--- a/source/css/layout/_partial/sidebar-category.styl
+++ b/source/css/layout/_partial/sidebar-categories.styl
@@ -5,15 +5,17 @@
 
   position relative
   background: var(--background-color);
-  magic-container(1.02, 30px);
+  magic-container(1.02, 20px);
 
   .category-label {
-    margin-bottom: 10px;
-    padding-left: 10px;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    //padding-left: 10px;
     font-size: 16px;
     font-weight: 600;
+    border-bottom: 1px solid var(--border-color);
 
-    &::after {
+    /*&::after {
       content: '';
       position: absolute;
       top: 20px;
@@ -23,9 +25,10 @@
       background: #333;
 
     }
-
+*/
   }
 
+
   .category-list {
 
     li.category-list-item {
@@ -61,4 +64,24 @@
       }
     }
   }
+
+  .post-category-list {
+    .post-category-list-item {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .post-category-list-link {
+
+      }
+
+      .post-category-list-count {
+
+      }
+    }
+  }
 }
diff --git a/source/css/layout/_partial/sidebar-tagcloud.styl b/source/css/layout/_partial/sidebar-tagcloud.styl
new file mode 100644
index 0000000..cc47e75
--- /dev/null
+++ b/source/css/layout/_partial/sidebar-tagcloud.styl
@@ -0,0 +1,27 @@
+@require "../common/magic-theme.styl"
+
+
+.sidebar-tagcloud {
+
+  position relative
+  background: var(--background-color);
+  magic-container(1.02, 20px);
+
+  .tagcloud-label {
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    font-size: 16px;
+    font-weight: 600;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .tagcloud-container {
+    text-align: justify;
+
+    a {
+      padding: 0 2px;
+      line-height: 1.8em;
+      //text-transform: uppercase;
+    }
+  }
+}
diff --git a/source/css/layout/_partial/sidebar-tags.styl b/source/css/layout/_partial/sidebar-tags.styl
new file mode 100644
index 0000000..b45ca7d
--- /dev/null
+++ b/source/css/layout/_partial/sidebar-tags.styl
@@ -0,0 +1,38 @@
+@require "../common/magic-theme.styl"
+
+.sidebar-tags {
+
+  position relative
+  background: var(--background-color);
+  magic-container(1.02, 20px);
+
+  .tag-label {
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    font-size: 16px;
+    font-weight: 600;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+
+  .post-tag-list {
+
+    .post-tag-list-item {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .post-tag-list-link {
+
+      }
+
+      .post-tag-list-count {
+
+      }
+    }
+  }
+}
diff --git a/source/css/layout/_partial/sidebar-toc.styl b/source/css/layout/_partial/sidebar-toc.styl
index d1cff78..f9e89dc 100644
--- a/source/css/layout/_partial/sidebar-toc.styl
+++ b/source/css/layout/_partial/sidebar-toc.styl
@@ -5,12 +5,12 @@
 .post-toc-wrap {
   width: 100%;
   height: 100%;
-  font-size: 0.88em;
+  font-size: 0.92em;
   box-sizing: border-box;
   background: var(--background-color);
 
   if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) {
-    magic-container(1.02, 30px);
+    magic-container(1.02, 20px);
   }
 
   .post-toc {
@@ -31,7 +31,7 @@
 
       a {
         transition-property: all;
-        //transition();
+        transition();
       }
     }
 
@@ -39,10 +39,7 @@
       line-height: 1.8;
       overflow: hidden;
       text-overflow: ellipsis;
-
-      if (!hexo-config('toc.wrap')) {
-        white-space: nowrap;
-      }
+      white-space: nowrap;
     }
 
     .nav {
@@ -63,16 +60,11 @@
       }
 
       .active > a {
-        border-bottom-color: var(--primary-color);
         color: var(--primary-color);
       }
 
       .active-current > a {
         color: var(--primary-color);
-
-        &:hover {
-          color: var(--primary-color);
-        }
       }
     }
   }
diff --git a/source/css/layout/_partial/sidebar.styl b/source/css/layout/_partial/sidebar.styl
index 43821f6..829ed51 100644
--- a/source/css/layout/_partial/sidebar.styl
+++ b/source/css/layout/_partial/sidebar.styl
@@ -1,13 +1,14 @@
 @require "../common/variables.styl"
 @require "../common/magic-theme.styl"
+
 .sidebar {
-  position: fixed;
+
   width: $sidebar-width;
   box-sizing: border-box;
 
-  .home-sidebar-container {
+  .sidebar-container {
 
-    .home-sidebar-item {
+    .sidebar-item {
       margin-bottom: $component-interspace;
 
       &:last-child {
@@ -16,4 +17,18 @@
     }
 
   }
+}
+
+
+.sidebar-post {
+  position: fixed;
+}
+
+.sidebar-other {
+  if (!hexo-config('magic.sidebar.fixed')) {
+    position: absolute;
+  } else {
+    position: fixed;
+  }
+
 }
\ No newline at end of file
diff --git a/source/css/layout/_partial/site-info.styl b/source/css/layout/_partial/site-info.styl
index 1a6990b..b697362 100644
--- a/source/css/layout/_partial/site-info.styl
+++ b/source/css/layout/_partial/site-info.styl
@@ -6,7 +6,7 @@
   box-sizing: border-box;
   background: var(--background-color);
 
-  magic-container(1.02, 30px);
+  magic-container(1.02, 20px);
 
   .justify-center {
     display: flex;
diff --git a/source/css/layout/common/animated.styl b/source/css/layout/common/animated.styl
index 520ced6..213aece 100644
--- a/source/css/layout/common/animated.styl
+++ b/source/css/layout/common/animated.styl
@@ -31,9 +31,7 @@ the-transition-ease-out() {
 @keyframes fade-in-down {
   0% {
     opacity: 0;
-    //transform: translateY(-20px);
-    //transform: translateX(-20px);
-    transform: translateX(20px);
+    transform: translateY(-20px);
   }
 
   100% {
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index 4623966..cd6847f 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -15,6 +15,7 @@
     transition();
   }
 
+
   .page-middle {
     width: 100%;
     display: flex;
@@ -51,6 +52,7 @@
 
     }
 
+
     .sidebar-tools {
       position: fixed;
       top: $header-height + $component-interspace;
@@ -107,9 +109,7 @@
 }
 
 .page-top-shrink {
-
   transition();
-
   padding-top: $header-shrink-height;
 
   .page-top {
diff --git a/source/css/style.styl b/source/css/style.styl
index b0db567..24b904a 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -21,4 +21,6 @@
 @import "layout/common/codeblock/copy-code.styl"
 @import "layout/_partial/sidebar.styl"
 @import "layout/_partial/site-info.styl"
-@import "layout/_partial/sidebar-category.styl"
\ No newline at end of file
+@import "layout/_partial/sidebar-categories.styl"
+@import "layout/_partial/sidebar-tags.styl"
+@import "layout/_partial/sidebar-tagcloud.styl"
\ No newline at end of file