feat: add sidebar-categories & sidebar-tagcloud

_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
+  expand_all: true
-  # Maximum heading depth of generated toc.
-  max_depth: 6
 
 # 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

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>

layout/_partial/sidebar-category.ejs

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

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>

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>

layout/_partial/sidebar-toc.ejs

@@ -4,8 +4,7 @@
                 page.content,
                 {
                     class: 'nav',
-                    list_number: theme.toc.number,
+                    list_number: theme.toc.number
-                    max_depth: theme.toc.max_depth
                 }
         ) %>
     </div>

layout/_partial/sidebar.ejs

@@ -1,23 +1,16 @@
-<div class="sidebar fade-in-down-animation">
+<% if (is_post()) { %>
-    <% if (is_home()) { %>
+    <div class="sidebar sidebar-post fade-in-down-animation">
-        <div class="home-sidebar-container">
-            <div class="home-sidebar-item">
-                <%- partial('site-info') %>
-            </div>
-            <div class="home-sidebar-item">
-                <%- partial('sidebar-category') %>
-            </div>
-        </div>
-    <% } else if (is_archive()) { %>
-        <%- partial('site-info') %>
-    <% } else if (is_post() && theme.toc.enable ) { %>
         <%- partial('sidebar-toc') %>
-    <% } else if (is_category()) { %>
+    </div>
-        <%- partial('site-info') %>
+<% } else { %>
-    <% } else if (is_tag()) { %>
+    <div class="sidebar sidebar-other fade-in-down-animation">
-        <%- partial('site-info') %>
+        <div class="sidebar-container">
-    <% } else if (page.title == 'about') { %>
+            <div class="sidebar-item">
-        <%- partial('site-info') %>
+                <%- partial('sidebar-tagcloud') %>
-    <% } %>
+            </div>
-
+            <div class="sidebar-item">
-</div>
+                <%- partial('sidebar-categories') %>
+            </div>
+        </div>
+    </div>
+<% } %>

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

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;
+    margin-bottom: 12px;
-    padding-left: 10px;
+    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 {
+
+      }
+    }
+  }
 }

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

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

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,11 +39,8 @@
       line-height: 1.8;
       overflow: hidden;
       text-overflow: ellipsis;
-
-      if (!hexo-config('toc.wrap')) {
       white-space: nowrap;
     }
-    }
 
     .nav {
       .nav-child {
@@ -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);
-        }
       }
     }
   }

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 {
@@ -17,3 +18,17 @@
 
   }
 }
+
+
+.sidebar-post {
+  position: fixed;
+}
+
+.sidebar-other {
+  if (!hexo-config('magic.sidebar.fixed')) {
+    position: absolute;
+  } else {
+    position: fixed;
+  }
+
+}

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;

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: translateY(-20px);
-    //transform: translateX(-20px);
-    transform: translateX(20px);
   }
 
   100% {

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 {

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"
+@import "layout/_partial/sidebar-categories.styl"
+@import "layout/_partial/sidebar-tags.styl"
+@import "layout/_partial/sidebar-tagcloud.styl"