From bb140e73d7f71398bc05858c5664c667667c47f5 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Fri, 24 Apr 2020 22:49:10 +0800
Subject: [PATCH] feat: add theme magic & add toggle theme feature

---
 _config.yml                                   |  7 ++
 layout/_partial/comments/valine.ejs           |  1 -
 layout/_partial/scripts.ejs                   |  2 +-
 layout/_partial/sidebar-category.ejs          | 25 +++++++
 layout/_partial/sidebar.ejs                   | 16 +++++
 layout/_partial/site-info.ejs                 | 13 ++++
 layout/home-content.ejs                       | 22 ++++--
 layout/page.ejs                               | 16 ++---
 source/css/layout/_partial/header.styl        | 48 ++++++++-----
 .../css/layout/_partial/sidebar-category.styl | 60 ++++++++++++++++
 source/css/layout/_partial/sidebar-toc.styl   |  7 +-
 source/css/layout/_partial/sidebar.styl       | 15 ++++
 source/css/layout/_partial/site-info.styl     | 36 ++++++++++
 source/css/layout/_partial/tools.styl         | 36 +++++++---
 source/css/layout/about.styl                  | 18 ++++-
 source/css/layout/archive-content.styl        |  7 +-
 source/css/layout/article-content.styl        | 15 ++++
 source/css/layout/common/animated.styl        |  4 ++
 source/css/layout/common/basic.styl           | 24 +++++--
 source/css/layout/common/magic-theme.styl     | 21 ++++++
 source/css/layout/common/variables.styl       | 34 ++++++---
 source/css/layout/home-content.styl           | 58 +++++++++------
 source/css/layout/page.styl                   | 71 ++++++++++---------
 source/css/style.styl                         |  5 +-
 source/js/main.js                             |  3 +-
 25 files changed, 444 insertions(+), 120 deletions(-)
 create mode 100644 layout/_partial/sidebar-category.ejs
 create mode 100644 layout/_partial/sidebar.ejs
 create mode 100644 layout/_partial/site-info.ejs
 create mode 100644 source/css/layout/_partial/sidebar-category.styl
 create mode 100644 source/css/layout/_partial/sidebar.styl
 create mode 100644 source/css/layout/_partial/site-info.styl
 create mode 100644 source/css/layout/common/magic-theme.styl

diff --git a/_config.yml b/_config.yml
index 431be4a..d4dcfea 100644
--- a/_config.yml
+++ b/_config.yml
@@ -85,3 +85,10 @@ toc:
   expand_all: false
   # Maximum heading depth of generated toc.
   max_depth: 6
+
+# magic theme style
+magic:
+  enable: true
+  sidebar:
+    enable: false
+    position: right
diff --git a/layout/_partial/comments/valine.ejs b/layout/_partial/comments/valine.ejs
index b1271d4..6400c6d 100755
--- a/layout/_partial/comments/valine.ejs
+++ b/layout/_partial/comments/valine.ejs
@@ -11,7 +11,6 @@
                 el: '#vcomments',
                 appId: '<%= theme.comments.valine.appid %>',
                 appKey: '<%= theme.comments.valine.appkey %>',
-                meta: '<%= theme.comments.valine.meta %>',
                 avatar: 'wavatar',
                 enableQQ: true,
                 placeholder: '<%= theme.comments.valine.placeholder %>',
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index c0ef198..e453e88 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -11,7 +11,7 @@
         <%- js('js/code-copy.js') %>
     <% } %>
 
-    <% if (theme.toc.enable) { %>
+    <% if (theme.toc.enable && theme.magic.enable && theme.magic.sidebar.enable) { %>
         <%- js(['lib/anime.min.js', 'js/toc.js']) %>
     <% } %>
 
diff --git a/layout/_partial/sidebar-category.ejs b/layout/_partial/sidebar-category.ejs
new file mode 100644
index 0000000..8c55477
--- /dev/null
+++ b/layout/_partial/sidebar-category.ejs
@@ -0,0 +1,25 @@
+<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/sidebar.ejs b/layout/_partial/sidebar.ejs
new file mode 100644
index 0000000..c715d09
--- /dev/null
+++ b/layout/_partial/sidebar.ejs
@@ -0,0 +1,16 @@
+<div class="sidebar">
+    <% if (is_home()) { %>
+        <%- partial('sidebar-category') %>
+    <% } 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
diff --git a/layout/_partial/site-info.ejs b/layout/_partial/site-info.ejs
new file mode 100644
index 0000000..665dad4
--- /dev/null
+++ b/layout/_partial/site-info.ejs
@@ -0,0 +1,13 @@
+<div class="site-info-container">
+
+    <div class="avatar-box justify-center">
+        <%- image_tag('./images/avatar.png', {class: 'avatar'}) %>
+    </div>
+    <div class="author justify-center">
+        <%= config.author %>
+    </div>
+    <div class="description">
+        <%= config.description %>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/layout/home-content.ejs b/layout/home-content.ejs
index b4e720b..cb7284c 100644
--- a/layout/home-content.ejs
+++ b/layout/home-content.ejs
@@ -2,8 +2,9 @@
     <ul class="home-article-list">
         <% page.posts.forEach(post => { %>
             <li class="home-article-item">
+
                 <h3 class="home-article-title">
-                    <a class="title-hover-animation" href="<%- url_for(post.path) %>">
+                    <a href="<%- url_for(post.path) %>">
                         <%= (post.top ? `[${__('top')}] ` : '') + post.title %>
                     </a>
                 </h3>
@@ -17,10 +18,21 @@
                 </div>
 
                 <div class="home-article-meta-info">
-                    <span class="article-date">
-                        <i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %>
-                    </span>
-                    <hr>
+                    <div class="article-date">
+                        <span><i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %></span>
+                        <span>
+                            <i class="fa fa-folder"></i>
+                            <ul>
+                                <% post.categories.forEach((category, i) => { %>
+                                    <li><%= i === 0 ? '' : '| ' %><a
+                                                href="<%- url_for(category.path) %>"><%= category.name %></a></li>
+                                <% }); %>
+                            </ul>
+                        </span>
+                    </div>
+                    <% if (theme.magic.enable === false) { %>
+                        <hr>
+                    <% } %>
                     <a href="<%- url_for(post.path) %>">阅读全文 <i class="fa fa-angle-right"></i></a>
                 </div>
             </li>
diff --git a/layout/page.ejs b/layout/page.ejs
index adeac0a..b524f13 100644
--- a/layout/page.ejs
+++ b/layout/page.ejs
@@ -6,6 +6,7 @@
     <div class="page-middle">
 
         <main class="main-content normal-code-theme">
+
             <div class="main-content-left">
                 <% if (is_home()) { %>
                     <%- partial('home-content') %>
@@ -26,16 +27,13 @@
                     <%- partial('about') %>
                 <% } %>
             </div>
-            <div class="main-content-right">
-                <!-- TODO -->
-            </div>
-        </main>
 
-        <% if (is_post() && theme.toc.enable) { %>
-            <div class="sidebar-toc">
-                <%- partial('_partial/sidebar-toc') %>
-            </div>
-        <% } %>
+            <% if (theme.magic.enable && theme.magic.sidebar.enable) { %>
+                <div class="main-content-right">
+                    <%- partial('_partial/sidebar') %>
+                </div>
+            <% } %>
+        </main>
 
         <div class="sidebar-tools">
             <%- partial('_partial/tools') %>
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index 0c5bb6f..22f1e95 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -1,14 +1,20 @@
-@require "../common/variables.styl"
+@require "../common/variables.styl";
+@require "../common/magic-theme.styl";
+@require "../common/animated.styl";
 
 .header-wrapper {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  background: var(--background-color);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.5s ease;
+  background: var(--background-color);
+
+  if (hexo-config('magic.enable') == true) {
+    magic-style(1.02);
+  }
+
 
   .header-content {
     display: flex;
@@ -18,7 +24,7 @@
     width: $main-content-width;
     height: 100%;
     position: relative;
-    transition: transform 0.5s ease;
+    transition();
     z-index: $z-index-5;
 
     .logo-title {
@@ -26,7 +32,7 @@
       font-weight: bold;
       letter-spacing: 1px;
       color: var(--first-text-color);
-      transition: transform 0.3s ease;
+      transition();
     }
 
 
@@ -56,8 +62,8 @@
               width: 100%;
               height: 2px;
               transform: translateX(-50%);
-              background: $primary-color;
-              transition: all 0.5s ease;
+              background: var(--primary-color);
+              transition();
             }
           }
 
@@ -67,7 +73,7 @@
         .active {
           color: var(--second-text-color);
           font-weight: bold;
-          transition: all 0.5s ease;
+          transition();
 
           &::after {
             content: '';
@@ -77,8 +83,8 @@
             width: 100%;
             height: 2px;
             transform: translateX(-50%);
-            background: $primary-color;
-            transition: all 0.5s ease;
+            background: var(--primary-color)
+            transition();
           }
         }
       }
@@ -97,7 +103,7 @@
         margin: 6px 0;
         position: relative;
         background: var(--normal-text-color);
-        transition: all 0.3s ease;
+        transition();
 
         &::before {
           content: '';
@@ -107,7 +113,7 @@
           width: 100%;
           height: 2px;
           background: var(--normal-text-color);
-          transition: all 0.3s ease;
+          transition();
         }
 
         &::after {
@@ -118,7 +124,7 @@
           width: 100%;
           height: 2px;
           background: var(--normal-text-color);
-          transition: all 0.3s ease;
+          transition();
         }
       }
     }
@@ -134,7 +140,7 @@
     transform: scaleY(0);
     transform-origin: top;
     background: var(--background-color);
-    transition: all 0.5s ease;
+    transition();
     z-index: $z-index-2;
 
     .drawer-menu-list {
@@ -153,7 +159,7 @@
           text-align: center;
           line-height: 34px;
           color: var(--normal-text-color);
-          transition: all 0.5s ease;
+          transition();
 
           &:hover {
             color: var(--second-text-color);
@@ -162,7 +168,7 @@
         }
 
         .active {
-          border: 1px solid $primary-color;
+          border: 1px solid var(--normal-text-color);
           color: var(--second-text-color);
           font-weight: bold;
         }
@@ -183,12 +189,13 @@
     z-index: $z-index-1;
     visibility: hidden;
     opacity: 0;
-    transition: all 0.3s ease;
+    transition();
   }
 
 
 }
 
+
 .header-drawer-show {
 
   .header-content {
@@ -222,12 +229,15 @@
 
 
 .header-wrapper-shrink {
-  box-shadow: 0 1px 2px var(--border-color);
+  if (hexo-config('magic') == false) {
+    box-shadow: 0 1px 2px var(--border-color);
+  }
 
   .header-content {
 
     .logo-title {
-      transform: scale(0.86);
+      transform: scale(0.8);
+      transform-origin: left top;
     }
 
     .menu-list {
diff --git a/source/css/layout/_partial/sidebar-category.styl b/source/css/layout/_partial/sidebar-category.styl
new file mode 100644
index 0000000..fd069d8
--- /dev/null
+++ b/source/css/layout/_partial/sidebar-category.styl
@@ -0,0 +1,60 @@
+.sidebar-category {
+
+  padding: 20px;
+  position: relative;
+
+  .category-label {
+    margin-bottom: 10px;
+    padding-left: 10px;
+    font-size: 16px;
+    font-weight: 600;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      width: 4px;
+      height: 20px;
+      background: #333;
+
+    }
+
+  }
+
+  .category-list {
+
+    li.category-list-item {
+      padding: 6px;
+      margin-bottom: 10px;
+      border: 1px solid var(--border-color);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      transition: all 0.3s ease;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &:hover {
+        box-shadow: 0 0 5px var(--border-color);
+        transform: scale(1.02);
+      }
+
+      .number {
+        font-size: 12px;
+        background: skyblue;
+        border-radius: 2px;
+        width: 22px;
+        height: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--background-color);
+
+      }
+    }
+  }
+}
diff --git a/source/css/layout/_partial/sidebar-toc.styl b/source/css/layout/_partial/sidebar-toc.styl
index 5688cd6..f5ae4f5 100644
--- a/source/css/layout/_partial/sidebar-toc.styl
+++ b/source/css/layout/_partial/sidebar-toc.styl
@@ -1,15 +1,12 @@
 @require '../common/variables.styl'
 
 .post-toc-wrap {
-
   width: 100%;
   height: 100%;
-
+  font-size: 0.9em;
+  padding: 10px;
 
   .post-toc {
-    padding: 5px;
-    font-size: 0.85em;
-    border: 1px solid var(--border-color);
 
     ol {
       list-style: none;
diff --git a/source/css/layout/_partial/sidebar.styl b/source/css/layout/_partial/sidebar.styl
new file mode 100644
index 0000000..2463950
--- /dev/null
+++ b/source/css/layout/_partial/sidebar.styl
@@ -0,0 +1,15 @@
+@require "../common/variables.styl"
+.sidebar {
+  position: fixed;
+  width: $sidebar-width;
+  background: var(--background-color);
+  box-shadow: 0 0 3px var(--border-color);
+  transition: all 0.3s ease;
+  border-radius: 2px;
+
+  &:hover {
+    box-shadow: 0 0 8px var(--border-color);
+    transform: scale(1.02);
+  }
+
+}
\ No newline at end of file
diff --git a/source/css/layout/_partial/site-info.styl b/source/css/layout/_partial/site-info.styl
new file mode 100644
index 0000000..1ff295e
--- /dev/null
+++ b/source/css/layout/_partial/site-info.styl
@@ -0,0 +1,36 @@
+.site-info-container {
+  width: 100%;
+
+  .justify-center {
+    display: flex;
+    justify-content: center;
+  }
+
+  .avatar-box {
+
+    padding: 20px 0;
+
+    .avatar {
+      width: 40%;
+      //border-radius: 50%;
+      border-radius: 5px;
+      padding: 2px;
+      border: 1px solid var(--border-color);
+    }
+
+  }
+
+  .author {
+    font-size: 1.6em;
+    letter-spacing: 1px;
+  }
+
+
+  .description {
+    padding: 20px;
+    text-align center
+  }
+
+
+
+}
\ No newline at end of file
diff --git a/source/css/layout/_partial/tools.styl b/source/css/layout/_partial/tools.styl
index 8334ff2..dcf8534 100644
--- a/source/css/layout/_partial/tools.styl
+++ b/source/css/layout/_partial/tools.styl
@@ -1,34 +1,54 @@
 @require '../common/variables.styl'
+@require '../common/magic-theme.styl'
+
+$li-padding = 10px;
+$li-border-radius = 5px;
+$li-margin-bottom = 10px;
+
 
 .tools-container {
 
   .tools-list {
     li {
       cursor: pointer;
-      padding: 5px;
-      border-radius: 50%;
-      border: 1px solid var(--third-text-color);
-      width: 26px;
-      height: 26px;
+      padding: $li-padding;
+      border-radius: $li-border-radius;
       font-size: 1.2em;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-bottom: 12px;
+      margin-bottom: $li-margin-bottom;
+      background: var(--background-color);
+
+      if (hexo-config('magic.enable') == true) {
+        magic-style(1.1);
+      } else {
+        border: 1px solid var(--third-text-color);
+      }
 
       &.rss {
+        padding: 0;
+
         a {
+          border-radius: $li-border-radius;
+          padding: $li-padding;
           display: flex;
           align-items: center;
           justify-content: center;
           width: 100%;
           height: 100%;
+
+          &:hover {
+            color: var(--background-color);
+            background: var(--primary-color);
+          }
         }
       }
 
+
       &:hover {
-        color: var(--primary-color);
-        border-color: var(--primary-color);
+        color: var(--background-color);
+        background: var(--primary-color);
       }
 
       &:last-child {
diff --git a/source/css/layout/about.styl b/source/css/layout/about.styl
index 8c89484..0893034 100644
--- a/source/css/layout/about.styl
+++ b/source/css/layout/about.styl
@@ -1,5 +1,21 @@
+@require "./common/magic-theme.styl";
+
 .about-container {
+
+  background: var(--background-color);
+
+  magic-container(1.01);
+
   .about-content {
-    margin-bottom: 40px;
+
+    h1, h2, h3, h4, h5, h6 {
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+    }
+
+    margin-bottom: 30px;
   }
 }
\ No newline at end of file
diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl
index 0598950..9ba172b 100644
--- a/source/css/layout/archive-content.styl
+++ b/source/css/layout/archive-content.styl
@@ -1,4 +1,5 @@
-@require 'common/variables.styl'
+@require "./common/variables.styl";
+@require "./common/magic-theme.styl";
 
 $archive-year-font-size = 1.8em;
 $article-title-font-size = 1.12em;
@@ -6,6 +7,10 @@ $article-date-font-size = 0.8em;
 
 .archive-container {
 
+  background: var(--background-color);
+
+  magic-container(1.01);
+
   .archive-item {
     margin-bottom: 40px;
 
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index 50c9e46..0b1ab66 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -2,6 +2,20 @@
 
 .article-content-container {
 
+  background: var(--background-color);
+
+  if (hexo-config('magic.enable') == true) {
+    box-shadow: 0 0 3px var(--border-color);
+    padding: 30px;
+    transition: all 0.3s ease;
+    border-radius: 2px;
+
+    &:hover {
+      box-shadow: 0 0 8px var(--border-color);
+      transform: scaleX(1.008) scaleY(1.004);
+    }
+  }
+
   .article-title {
 
     h3 {
@@ -21,6 +35,7 @@
   }
 
   .article-content {
+    text-align: justify;
     padding-bottom: 30px;
     border-bottom: 1px solid $border-color;
   }
diff --git a/source/css/layout/common/animated.styl b/source/css/layout/common/animated.styl
index 9e73fcc..b2d4618 100644
--- a/source/css/layout/common/animated.styl
+++ b/source/css/layout/common/animated.styl
@@ -1,3 +1,7 @@
+transition() {
+  transition: all 0.3s ease;
+}
+
 the-transition() {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl
index e58cef3..e583e88 100644
--- a/source/css/layout/common/basic.styl
+++ b/source/css/layout/common/basic.styl
@@ -1,16 +1,20 @@
 @require 'variables.styl'
 @require 'animated.styl'
+@require 'magic-theme.styl'
 
 html, body {
   margin: 0;
   padding: 0;
   color: var(--normal-text-color);
-  background: var(--background-color);
+  if (hexo-config('magic.enable') == true) {
+    background: var(--magic-background-color);
+  } else {
+    background: var(--background-color);
+  }
   font-size: $default-font-size;
   font-family: $default-font-family;
   font-weight: $default-font-weight;
   line-height: $default-font-line-height;
-  transition: all 0.5s ease;
 }
 
 ::selection {
@@ -49,14 +53,20 @@ button {
   position: relative;
   text-align: center;
   cursor: pointer;
-  color: var(--third-text-color);
-  border: 1px solid var(--third-text-color);
   white-space: nowrap;
-  border-radius: 10em;
+  border-radius: 5px;
   padding: 0.5em 1em;
+  background: var(--background-color);
+  transition();
+  magic-style(1.1);
 
   &:hover {
-    color: var(--primary-color);
-    border: 1px solid var(--primary-color);
+    color: var(--background-color);
+    background: var(--primary-color);
   }
+
+  //&:hover {
+  //  color: var(--primary-color);
+  //  border: 1px solid var(--primary-color);
+  //}
 }
\ No newline at end of file
diff --git a/source/css/layout/common/magic-theme.styl b/source/css/layout/common/magic-theme.styl
new file mode 100644
index 0000000..50bdd6b
--- /dev/null
+++ b/source/css/layout/common/magic-theme.styl
@@ -0,0 +1,21 @@
+magic-style(scale) {
+  if (hexo-config('magic.enable') == true) {
+
+    box-shadow: 0 0 3px var(--border-color);
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 0 0 8px var(--border-color);
+      transform: scale(scale);
+    }
+  }
+
+}
+
+magic-container(scale) {
+  if (hexo-config('magic.enable') == true) {
+    magic-style(scale);
+    padding: 30px;
+    border-radius: 2px;
+  }
+}
diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl
index 899b1dd..455783b 100644
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@@ -1,14 +1,26 @@
 // ==================================
-// ils-x variables
+// THEME VARIABLE
 // ==================================
 
 // ===============================
 // layout
 // ===============================
-$header-height = 100px; // 头部默认高度
+if (hexo-config('magic.enable') == true) {
+  $header-height = 80px; // 头部默认高度
+} else {
+  $header-height = 100px; // 头部默认高度
+}
+
+if (hexo-config('magic.enable') == true && hexo-config('magic.sidebar.enable') == true ) {
+  $main-content-width = 80%;
+  $sidebar-width = 280px;       // 侧边栏宽度
+} else {
+  $main-content-width = 66%;
+}
+
 $header-shrink-height = 60px; // 头部收缩高度
-$main-content-width = 60%; // 中间内容区域宽度
-$media-max-width = 760px; // 媒体查询最大宽度
+$media-max-width = 760px;     // 媒体查询最大宽度
+
 
 // ===============================
 // z-index
@@ -26,17 +38,19 @@ $z-index-6 = 1006;
 // ===============================
 // normal mode color
 $primary-color = #1b65ea; // 主题颜色
-$background-color = #fdfdfd; // 背景颜色
-$normal-text-color = #44424e; // 通用文本颜色（默认字体颜色）
+$background-color = #fff; // 背景颜色
+$magic-background-color = #f5f5f5; // MAGIC 背景颜色
+$normal-text-color = #393749; // 通用文本颜色（默认字体颜色）
 $first-text-color = darken($normal-text-color, 15%); // 第一文本颜色
 $second-text-color = darken($normal-text-color, 5%); // 第二文本颜色
-$third-text-color = lighten($normal-text-color, 30%); // 第三文本颜色
-$border-color = darken($background-color, 15%); // 边框颜色
+$third-text-color = lighten($normal-text-color, 35%); // 第三文本颜色
+$border-color = darken($background-color, 30%); // 边框颜色
 $selection-color = lighten($primary-color, 20%);
 
 // dark mode color
 $dark-primary-color = $primary-color;
 $dark-background-color = #3a3a3a;
+$dark-magic-background-color = #2a2a2a;
 $dark-normal-text-color = #bbb;
 $dark-first-text-color = lighten($dark-normal-text-color, 30%);
 $dark-second-text-color = lighten($dark-normal-text-color, 20%);
@@ -60,6 +74,7 @@ $default-font-weight = 400;
 
 :root {
   --background-color: $background-color;
+  --magic-background-color: $magic-background-color;
   --primary-color: $primary-color;
   --first-text-color: $first-text-color;
   --second-text-color: $second-text-color;
@@ -72,6 +87,7 @@ $default-font-weight = 400;
 @media (prefers-color-scheme: dark) {
   :root {
     --background-color: $dark-background-color;
+    --magic-background-color: $dark-magic-background-color;
     --primary-color: $dark-primary-color;
     --first-text-color: $dark-first-text-color;
     --second-text-color: $dark-second-text-color;
@@ -85,6 +101,7 @@ $default-font-weight = 400;
 
 .dark-mode {
   --background-color: $dark-background-color;
+  --magic-background-color: $dark-magic-background-color;
   --primary-color: $dark-primary-color;
   --first-text-color: $dark-first-text-color;
   --second-text-color: $dark-second-text-color;
@@ -96,6 +113,7 @@ $default-font-weight = 400;
 
 .light-mode {
   --background-color: $background-color;
+  --magic-background-color: $magic-background-color;
   --primary-color: $primary-color;
   --first-text-color: $first-text-color;
   --second-text-color: $second-text-color;
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 851a057..cdcc071 100644
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -1,4 +1,5 @@
 @require "common/variables.styl"
+@require "common/magic-theme.styl"
 
 .home-content-container {
 
@@ -6,36 +7,44 @@
 
     .home-article-item {
 
-      margin-bottom: 60px;
-      padding-bottom: 30px;
+      background: var(--background-color);
+
+      if (hexo-config('magic.enable') == true) {
+
+        magic-container(1.02);
+        margin-bottom: 30px;
+
+      } else {
+        margin-bottom: 70px;
+      }
 
       .home-article-title {
         position: relative;
-
-        //&::before {
-        //  content: '';
-        //  position: absolute;
-        //  top: 50%;
-        //  transform: translateY(-50%);
-        //  left: -12px;
-        //  width: 3px;
-        //  height: 22px;
-        //  background: var(--primary-color);
-        //  transition: all 0.5s ease;
-        //}
-
         font-weight: 600;
         color: var(--second-text-color);
         font-size: 1.5em;
         margin: 0;
 
-        a {
-          color: var(--second-text-color);
+        if (hexo-config('magic.enable') == true) {
+          padding-bottom: 20px;
+          border-bottom: 1px solid var(--border-color);
+        } else {
+          a {
+            color: var(--second-text-color);
+          }
         }
+
       }
 
       .home-article-content {
-        margin: 45px 0;
+
+        text-align: justify;
+
+        if (hexo-config('magic.enable') == true) {
+          margin: 30px 0 45px 0;
+        } else {
+          margin: 30px 0;
+        }
         line-height: 2em;
       }
 
@@ -44,10 +53,19 @@
         justify-content: space-between;
         align-items: center;
         color: var(--third-text-color);
-        font-size: 0.9em;
+        font-size: 1em;
 
-        span.article-date {
+
+        .article-date {
           letter-spacing: 0.5px;
+
+          span {
+            margin-right: 15px;
+
+            ul, li {
+              display: inline;
+            }
+          }
         }
 
         hr {
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index 93f9183..c13725d 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -1,4 +1,8 @@
-@require "common/variables.styl"
+@require "common/variables.styl";
+@require "./common/animated.styl";
+
+// 组件间隔
+$component-interspace = 30px;
 
 .page-template {
   padding-top: $header-height;
@@ -10,7 +14,8 @@
     width: 100%;
     height: $header-height;
     z-index: $z-index-5;
-    transition: all 0.5s ease;
+    box-sizing: border-box;
+    transition();
   }
 
 
@@ -18,50 +23,51 @@
     width: 100%;
     display: flex;
     justify-content: center;
+    padding: $component-interspace 0;
 
     .main-content {
       width: $main-content-width;
       height: 100%;
       position: relative;
+      box-sizing: border-box;
+
+      if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable') == true) {
+
+        padding-right: $sidebar-width + $component-interspace;
+
+        .main-content-right {
+          position: absolute;
+          right: 0;
+          width: $sidebar-width;
+          box-sizing: border-box;
+        }
+
+      }
+
 
       .main-content-left {
         position: relative;
         float: left;
-        padding: 40px 0;
         width: 100%;
+        box-sizing: border-box;
       }
 
-      .main-content-right {
-        position: relative;
-        float: right;
-        width: 0;
-      }
-    }
 
-
-    .sidebar-toc {
-      position: fixed;
-      top: $header-height + 50px;
-      right: 3%;
-      transition: all 0.5s ease;
-      width: 180px;
-      max-height: 500px;
-      overflow-y: auto;
     }
 
     .sidebar-tools {
       position: fixed;
-      top: $header-height + 50px;
-      left: 4%;
-      transition: all 0.5s ease;
+      top: $header-height + $component-interspace;
+      left: ((100% - $main-content-width) / 4);
+      transition();
     }
 
 
     .scroll-to-top {
       display: none;
       position: fixed;
-      right: 4%;
-      bottom: 20px;
+      right: ((100% - $main-content-width) / 4);
+      bottom: $component-interspace;
       border-radius: 2px;
       padding: 2px 6px;
       color: var(--frist-text-color);
@@ -91,11 +97,11 @@
   }
 
   .sidebar-tools {
-    top: $header-shrink-height + 50px !important;
+    top: $header-shrink-height + $component-interspace !important;
   }
 
   .sidebar-toc {
-    top: $header-shrink-height + 50px !important;
+    top: $header-shrink-height + $component-interspace !important;
   }
 }
 
@@ -106,14 +112,15 @@
 
   .sidebar-tools {
     left: 2% !important;
+    transform-origin: right top;
+    transform: scale(0.8);
   }
 
-  .sidebar-toc {
-    right: 2% !important;
-  }
-
-  .scroll-to-top {
-    right: 2% !important;
-  }
+  //.sidebar-toc {
+  //  right: 2% !important;
+  //}
+  //.scroll-to-top {
+  //  right: 2% !important;
+  //}
 
 }
\ No newline at end of file
diff --git a/source/css/style.styl b/source/css/style.styl
index 9d4a970..b0db567 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -18,4 +18,7 @@
 @import "layout/tag-content.styl"
 @import "layout/common/markdown.styl"
 @import "layout/common/codeblock/highlight.styl"
-@import "layout/common/codeblock/copy-code.styl"
\ No newline at end of file
+@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
diff --git a/source/js/main.js b/source/js/main.js
index 47acd61..8620d25 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,4 +1,3 @@
 window.addEventListener('DOMContentLoaded', () => {
     console.log(`${CONFIG.themeInfo.name} v${CONFIG.themeInfo.version}`);
-});
-
+});
\ No newline at end of file