From a85da42fee02e682192a9dbc8116053303674736 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Sun, 22 Mar 2020 20:31:13 +0800
Subject: [PATCH] =?UTF-8?q?Update:=20=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                             |  7 +++++
 layout/common/nav.ejs                   | 18 ++++++++++---
 layout/home-post.ejs                    |  2 +-
 layout/right-side.ejs                   |  2 +-
 layout/tag-post.ejs                     |  2 +-
 source/css/layout/archive-post.styl     | 16 +++++++-----
 source/css/layout/basic.styl            |  8 ++++++
 source/css/layout/common/left-side.styl |  2 +-
 source/css/layout/common/nav.styl       | 34 +++++++++++++++++--------
 source/css/layout/common/site-info.styl |  4 +--
 source/css/layout/home-post.styl        |  2 +-
 source/css/layout/index.styl            |  6 ++---
 source/css/layout/right-side.styl       |  2 +-
 source/css/layout/variables.styl        | 16 +++++++-----
 14 files changed, 83 insertions(+), 38 deletions(-)

diff --git a/_config.yml b/_config.yml
index 7112cf0..f3c7194 100644
--- a/_config.yml
+++ b/_config.yml
@@ -8,6 +8,13 @@ favicon: images/favicon.png
 
 avatar: images/favicon.png
 
+page:
+  left_side_width: 25
+  right_side_width: 75
+  media_max_width: 960
+
+
+
 # 代码高亮设置
 # Code Highlight theme
 # Available value:
diff --git a/layout/common/nav.ejs b/layout/common/nav.ejs
index 2fafb9a..4c75bb0 100644
--- a/layout/common/nav.ejs
+++ b/layout/common/nav.ejs
@@ -1,8 +1,20 @@
+<script>
+    /**
+     * 折叠左侧栏
+     */
+    let isOpenLeftSide = true;
+    const foldLeftSide = () => {
+        document.querySelector('.page-left').style.display = isOpenLeftSide ? 'none' : 'block';
+        document.querySelector('.page-right').style.width = isOpenLeftSide ? '100%' : '<%= theme.page.right_side_width + '%' %>';
+        isOpenLeftSide = !isOpenLeftSide;
+    };
+</script>
 <nav class="nav">
-    <div class="fold-left-side">
+    <button class="fold-left-side-btn"
+            onclick="foldLeftSide()"
+    >
         <i class="fa fa-bars"></i>
-    </div>
-    <div></div>
+    </button>
     <ul class="menu-list">
         <% for (let i in theme.menu) { %>
             <li class="menu-item">
diff --git a/layout/home-post.ejs b/layout/home-post.ejs
index ead8133..891866d 100644
--- a/layout/home-post.ejs
+++ b/layout/home-post.ejs
@@ -15,7 +15,7 @@
                         <%- truncate(strip_html(post.content), {length: 80}) %>
                     </div>
 
-                    <div class="article-meta-info-container">
+                    <div class="article-post-meta-info">
                         <%- partial('common/article-meta-info', {articleObject: post, index: true}) %>
                     </div>
                 </li>
diff --git a/layout/right-side.ejs b/layout/right-side.ejs
index 2f528a3..e8127c1 100644
--- a/layout/right-side.ejs
+++ b/layout/right-side.ejs
@@ -1,7 +1,7 @@
 <div class="right-side-container">
 
     <div class="nav-container animated">
-        <%- partial('common/nav') %>
+        <%- partial('common/nav', { cache: true }) %>
     </div>
 
     <div class="article-post-container animated">
diff --git a/layout/tag-post.ejs b/layout/tag-post.ejs
index 37fc26d..f9690a4 100644
--- a/layout/tag-post.ejs
+++ b/layout/tag-post.ejs
@@ -4,7 +4,7 @@ is_tag('hobby') 如果给定一个字符串作为参数，将会检查目前是
 -->
 <% if (is_tag()) { %>
     <div class="tag-container">
-        <div class="tag-name"><%- __('tag') %>：<%= page.tag %> [共<%= page.posts.length %>篇]</div>
+        <div class="tag-name"><i class="fa fa-tag"></i> <%- __('tag') %>：<%= page.tag %> [<%= page.posts.length %>]</div>
     </div>
     <%- partial('archive-post') %>
 <% } %>
\ No newline at end of file
diff --git a/source/css/layout/archive-post.styl b/source/css/layout/archive-post.styl
index 4067572..2109028 100644
--- a/source/css/layout/archive-post.styl
+++ b/source/css/layout/archive-post.styl
@@ -1,26 +1,29 @@
 @require 'variables.styl'
 
 $archive-year-font-size = 24px;
+$archive-article-item-title-font-size = 16px;
+$archive-article-date-font-size = 14px;
 
 .archive-container {
 
   .archives-wrap {
-    margin-bottom 20px
+    margin-bottom: 20px;
 
     .archive-year {
       font-size: $archive-year-font-size;
-      color: $article-title-color ;
+      color: $article-title-color;
       font-weight: 600;
     }
 
     .archive-article-list {
+      padding-left: 10px;
 
       .archive-article-item {
-        margin 10px 0
-        font-size 16px
+        margin: 10px 0;
+        font-size: $archive-article-item-title-font-size;
 
         a.archive-article-title {
-          color $archive-article-title-color
+          color: $archive-article-title-color;
 
           &:hover {
             color: $a-hover-color;
@@ -28,7 +31,8 @@ $archive-year-font-size = 24px;
         }
 
         .archive-article-date {
-          float right
+          font-size: $archive-article-date-font-size;
+          float: right;
         }
       }
     }
diff --git a/source/css/layout/basic.styl b/source/css/layout/basic.styl
index 10be0be..71555a3 100644
--- a/source/css/layout/basic.styl
+++ b/source/css/layout/basic.styl
@@ -18,6 +18,14 @@ ul, li, ol {
   list-style: none;
 }
 
+button {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+}
+
 p {
   line-height: 2em;
 }
diff --git a/source/css/layout/common/left-side.styl b/source/css/layout/common/left-side.styl
index 10dc448..fdef9a2 100644
--- a/source/css/layout/common/left-side.styl
+++ b/source/css/layout/common/left-side.styl
@@ -11,7 +11,7 @@
   .site-info-container {
     position absolute
     width 100%
-    top 40%
+    top 30%
     transform: translateY(-50%);
   }
 
diff --git a/source/css/layout/common/nav.styl b/source/css/layout/common/nav.styl
index 544c4c1..1238083 100644
--- a/source/css/layout/common/nav.styl
+++ b/source/css/layout/common/nav.styl
@@ -11,25 +11,16 @@ $nav-font-size = 12px;
   border-bottom: 1px solid $border-color
   padding: 20px;
   font-size: $nav-font-size;
-  display: flex;
-  justify-content: flex-end;
-
-  .fold-left-side {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size 20px
-    left: 20px
-  }
 
   .menu-list {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
+    margin-left: 30px;
 
     .menu-item {
       float: left;
-      margin-left: 20px;
+      margin-right: 20px;
 
       .current {
         padding-bottom: 20px;
@@ -37,4 +28,25 @@ $nav-font-size = 12px;
       }
     }
   }
+
+
+  .fold-left-side-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size 20px
+    color: $a-color
+  }
+
+
+  @media screen and (max-width: $media-max-width) {
+    .fold-left-side-btn {
+      display: none
+    }
+
+    .menu-list {
+      margin-left: 0;
+    }
+  }
+
 }
\ No newline at end of file
diff --git a/source/css/layout/common/site-info.styl b/source/css/layout/common/site-info.styl
index d7dc1d8..738c4c3 100644
--- a/source/css/layout/common/site-info.styl
+++ b/source/css/layout/common/site-info.styl
@@ -8,9 +8,9 @@ $description-font-size = 16px
 
   .avatar {
     padding: 2px;
-    border-radius: 50%;
+    border-radius: 5%;
     border: 1px solid $border-color;
-    width: 150px;
+    width: 130px;
   }
 
   .title {
diff --git a/source/css/layout/home-post.styl b/source/css/layout/home-post.styl
index 08bc07e..7bd8eee 100644
--- a/source/css/layout/home-post.styl
+++ b/source/css/layout/home-post.styl
@@ -7,7 +7,7 @@
     .article-post-item {
 
       margin-bottom 30px
-      padding-bottom 20px
+      padding-bottom 30px
       border-bottom: 1px solid $border-color;
 
       .article-post-title {
diff --git a/source/css/layout/index.styl b/source/css/layout/index.styl
index 580ddd5..21a462c 100644
--- a/source/css/layout/index.styl
+++ b/source/css/layout/index.styl
@@ -22,13 +22,13 @@
     position relative
   }
 
-  @media screen and (max-width: 960px) {
+  @media screen and (max-width: $media-max-width) {
     .page-left {
-      display: none
+      display: none !important;
     }
 
     .page-right {
-      width: 100%
+      width: 100% !important;
     }
   }
 
diff --git a/source/css/layout/right-side.styl b/source/css/layout/right-side.styl
index 6d1be20..5194ef2 100644
--- a/source/css/layout/right-side.styl
+++ b/source/css/layout/right-side.styl
@@ -9,7 +9,7 @@
   .nav-container {
     position: fixed;
     top: 0;
-    width $right-side-width
+    width: 100%;
     height: $nav-height;
     z-index: 999;
   }
diff --git a/source/css/layout/variables.styl b/source/css/layout/variables.styl
index d99fce6..eb26e66 100644
--- a/source/css/layout/variables.styl
+++ b/source/css/layout/variables.styl
@@ -1,8 +1,11 @@
-// 左侧宽度占比
-$left-side-width = 30%
+// 左侧宽度占比，从主题配置文件中获取
+$left-side-width = hexo-config("page.left_side_width") + '%'
 
-// 右侧宽度占比
-$right-side-width = 70%
+// 右侧宽度占比，从主题配置文件中获取
+$right-side-width = hexo-config("page.right_side_width") + '%'
+
+// 媒体查询屏幕最大宽度，从主题配置文件中获取
+$media-max-width = hexo-config('page.media_max_width') px
 
 // 背景颜色
 $background-color = #fff
@@ -32,7 +35,7 @@ $default-font-line-height = 20px
 $default-font-weight = 400
 
 // 默认字体颜色
-$default-font-color = #777
+$default-font-color = #787878
 
 // 文章标题颜色
 $article-title-color = #666
@@ -40,7 +43,6 @@ $article-title-color = #666
 // 归档文章标题颜色
 $archive-article-title-color = #8f8f8f
 
-
 // 导航栏高度
 $nav-height = 60px
 
@@ -51,7 +53,7 @@ $nav-selected-color = #4a4a4a
 $a-color = #666
 
 // 超链接a标签悬浮颜色
-$a-hover-color = #4786d6
+$a-hover-color = #2273d8
 
 // 按钮颜色
 $button-color = $default-font-color