From 7176ffddf07a6965c2a9a39adc9e8d650a83831c Mon Sep 17 00:00:00 2001
From: xaoxuu <xaoxuu@gmail.com>
Date: Sat, 25 Aug 2018 20:42:27 +0800
Subject: [PATCH] update toc

---
 _config.yml                                |  1 +
 layout/_partial/article.ejs                |  9 +---
 layout/_partial/post/recommended_posts.ejs |  3 +-
 layout/_partial/scripts.ejs                |  4 +-
 layout/_widget/tagcloud.ejs                |  4 +-
 layout/_widget/toc.ejs                     |  8 +++
 source/less/_base.less                     |  8 ++-
 source/less/_defines.less                  |  3 ++
 source/less/_header.less                   | 10 ++--
 source/less/_main.less                     |  2 +-
 source/less/_side.less                     |  1 +
 source/less/_toc.less                      | 62 +++++++---------------
 source/less/_widget.less                   | 13 ++++-
 13 files changed, 59 insertions(+), 69 deletions(-)
 create mode 100755 layout/_widget/toc.ejs

diff --git a/_config.yml b/_config.yml
index bc8bcf4..d6cbf05 100755
--- a/_config.yml
+++ b/_config.yml
@@ -28,6 +28,7 @@ materialx:
     - contacts # 显示自己的联系信息
     - music # 显示自己的网易云歌单
     - links # 显示友链
+    - toc # 显示目录
   # 网易云音乐歌单id
   widgets_musicid:
   # 侧边栏的友链
diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
index 84f8782..fe45eee 100755
--- a/layout/_partial/article.ejs
+++ b/layout/_partial/article.ejs
@@ -13,14 +13,6 @@
         </time>
         <%- partial('categories',{post:post}) %>
     </section>
-    <% if(post.toc!==false && toc(post.content).length > 0){ %>
-        <section class="toc-wrapper">
-            <div class="header"><i class="fa fa-list" aria-hidden="true"></i>&nbsp;&nbsp;目录</div>
-            <div class='content'>
-                <%- toc(post.content, {list_number: false}) %>
-            </div>
-        </section>
-    <% } %>
 
     <section class="article typo">
 
@@ -100,6 +92,7 @@
                                 </i><i class="fa fa-spinner fa-spin fa-fw"></i>
                             </div>
                         </section>
+                        <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
                     <% } %>
                 <% } %>
             <% } %>
diff --git a/layout/_partial/post/recommended_posts.ejs b/layout/_partial/post/recommended_posts.ejs
index dbd6ff1..76e126b 100644
--- a/layout/_partial/post/recommended_posts.ejs
+++ b/layout/_partial/post/recommended_posts.ejs
@@ -1,11 +1,12 @@
 <% var post_list = recommended_posts(page, site) %>
 <% if(post_list.length > 0) { %>
     <div class="recommended_posts">
-        <h4><i class="fa fa-bookmark" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;你可能感兴趣的文章</h4> 
+        <h4><i class="fa fa-bookmark" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;你可能感兴趣的文章</h4>
         <ul>
             <% post_list.forEach(function(link) { %>
                 <li><a href="<%= link.permalink %>"><%= link.title %></a></li>
             <% }) %>
         </ul>
     </div>
+    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
 <% } %>
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index 588d2c8..301bec5 100755
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -3,9 +3,7 @@
 <script src="//cdn.bootcss.com/scrollReveal.js/3.3.2/scrollreveal.min.js"></script>
 <!-- 访问统计 -->
 <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
-<!-- 推荐文章 -->
-<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
-<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
+
 
 <%- js('js/jquery.fitvids.js') %>
 <script>
diff --git a/layout/_widget/tagcloud.ejs b/layout/_widget/tagcloud.ejs
index 152df3f..2e8a2c2 100755
--- a/layout/_widget/tagcloud.ejs
+++ b/layout/_widget/tagcloud.ejs
@@ -1,5 +1,5 @@
 <% if (site.tags.length){ %>
-<div class="m_widget tagcloud">
+<section class="m_widget tagcloud">
     <div class="header"><i class="fa fa-tags" aria-hidden="true"></i>&nbsp;&nbsp;标签</div>
     <div class='content'>
         <%- tagcloud(site.tags, {
@@ -10,5 +10,5 @@
             end_color: '#555',
         }) %>
     </div>
-</div>
+</section>
 <% } %>
diff --git a/layout/_widget/toc.ejs b/layout/_widget/toc.ejs
new file mode 100755
index 0000000..4a00421
--- /dev/null
+++ b/layout/_widget/toc.ejs
@@ -0,0 +1,8 @@
+<% if(page.content && page.toc!==false && toc(page.content).length > 0){ %>
+    <section class="m_widget toc-wrapper">
+        <div class="header"><i class="fa fa-list" aria-hidden="true"></i>&nbsp;&nbsp;目录</div>
+        <div class='content'>
+            <%- toc(page.content, {list_number: false}) %>
+        </div>
+    </section>
+<% } %>
diff --git a/source/less/_base.less b/source/less/_base.less
index 940801c..0ae1935 100755
--- a/source/less/_base.less
+++ b/source/less/_base.less
@@ -75,17 +75,15 @@ body {
     box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1);
 }
 .z-depth-nav-raised {
-    // box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.12), 0 4px 8px 0px rgba(0, 0, 0, 0.12), 0 8px 16px 0px rgba(0, 0, 0, 0.1);
-    box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 8px 16px 0px rgba(0, 0, 0, 0.12), 0 16px 32px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: @box-shadow-card-raised;
 }
 
 .z-depth-main {
-    // box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.08);
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: @box-shadow-card-normal;
 }
 
 .z-depth-main-raised {
-    box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 8px 16px 0px rgba(0, 0, 0, 0.12), 0 16px 32px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: @box-shadow-card-raised;
 }
 
 .z-depth-0 {
diff --git a/source/less/_defines.less b/source/less/_defines.less
index b8696d8..d7bab5d 100755
--- a/source/less/_defines.less
+++ b/source/less/_defines.less
@@ -92,6 +92,9 @@
 // @theme-text-main: @light;
 // 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
 
+@box-shadow-card-raised: 0 2px 4px 0px rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 8px 16px 0px rgba(0, 0, 0, 0.12), 0 16px 32px 0px rgba(0, 0, 0, 0.12);
+@box-shadow-card-normal: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+
 
 // Responsive limits
 @modal-threshold:  680px;
diff --git a/source/less/_header.less b/source/less/_header.less
index 86d9d67..a43e45e 100755
--- a/source/less/_header.less
+++ b/source/less/_header.less
@@ -109,15 +109,17 @@
 			overflow: hidden;
 			position: absolute;
 			.enable-trans();
-			right: 10px;
+            left: @gap/2;
+			// right: @gap;
+            // width: 100% - 2*@gap;
 			top:(@header-height - @search-height)/2;
 		}
 		&.z_search-open{
 			.logo,.switcher{
-				opacity:0;
+				// opacity:0;
 			}
 			.m_search{
-				width: 50%;
+				width: 100% - 1.7*@gap;
 			}
 		}
 	}
@@ -205,7 +207,7 @@
 		&:extend(.z-depth-main-raised);
 	}
 	&:active {
-		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+		box-shadow: @box-shadow-card-normal;
 	}
 	nav {
     	padding: @gap/2 0px;
diff --git a/source/less/_main.less b/source/less/_main.less
index b95071b..47b9ae8 100755
--- a/source/less/_main.less
+++ b/source/less/_main.less
@@ -178,7 +178,7 @@
           &:extend(.z-depth-main-raised);
         }
         &:active {
-          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+          box-shadow: @box-shadow-card-normal;
         }
         .meta {
             margin-bottom: 2*@gap;
diff --git a/source/less/_side.less b/source/less/_side.less
index 22ed5fd..e21fb8f 100755
--- a/source/less/_side.less
+++ b/source/less/_side.less
@@ -9,4 +9,5 @@
             // box-shadow: 1px 0 3px fade(black, 10%);
         }
     }
+        
 }
diff --git a/source/less/_toc.less b/source/less/_toc.less
index ebddbc3..b24aeae 100755
--- a/source/less/_toc.less
+++ b/source/less/_toc.less
@@ -1,57 +1,32 @@
-.toc-wrapper{
-    position:fixed;
-    top: @header-height + @gap * 2;
-    right: 50%;
-    margin-right: -@container-width/2;
+.m_widget.toc-wrapper{
+    overflow: auto;
     border-radius: @border-radius-width;
-    .enable-trans();
-    &:extend(.z-depth-main);
-    &:hover {
-        &:extend(.z-depth-main-raised);
-    }
-    &:active {
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+    position: fixed;
+    top: @header-height + @gap;
+    display: none;
+    &.active{
+        display: block;
     }
-
-    max-height: ~"calc(100% - @{header-height} - 4 * @{gap})";
     @media(max-width: @container-width){
-        right: 0;
-        margin-right:0;
-        width: @side-width;
+        // right: 0;
+        // margin-right:0;
+        // width: @side-width;
     }
 
     @media(max-width: @on-phone){
+        width: 100% - 0.5 * @gap;
         top: @header-height + @gap;
-        right: 0px - @side-width;
-        // border-radius: 0;
-        margin-right:0;
+        left: @gap;
+        width: "calc(100% - 0.3 * @{gap})";
+        display: none;
         &.active{
-            transform: translateX(-@side-width - 10px);
-        }
-    }
-    .header{
-        border-top-left-radius: @border-radius-width;
-        border-top-right-radius: @border-radius-width;
-        @media(max-width: @on-phone) {
-            border-radius: 0;
+            display: block;
+            position: fixed;
+            box-shadow: @box-shadow-card-raised;
         }
-        background-color: fade(@theme-bg-header,90%);
-        color: @theme-text-in-header;
-        font-size: @base-font-size;
-        line-height: 1.8em;
-        padding: 8px @gap;
 
     }
-    overflow: auto;
-    .content{
-        overflow: auto;
-        padding: @gap/2 0;
-        max-height: ~"calc(100% - @{header-height} - 2.5 * @{gap})";
-    }
-    width: @side-width;
-    z-index:3;
-    &:extend(.z-depth-2);
-    background: @theme-bg-card;
+    
     a {
         padding-left: 8px;
         color: fade(@theme-text-main, 50%);
@@ -102,6 +77,7 @@
                 padding: 0 @gap/2 0 (@gap - 5px);
                 font-weight: bold;
                 width: 100%;
+
             }
             width: auto;
             // &:extend(.txt-ellipsis);
diff --git a/source/less/_widget.less b/source/less/_widget.less
index 5a77096..9f5e70a 100755
--- a/source/less/_widget.less
+++ b/source/less/_widget.less
@@ -6,20 +6,27 @@
     @media(max-width: @on-phone) {
         border-radius: 0;
     }
+    width: @side-width;
+    max-height: ~"calc(100% - @{header-height} - 4 * @{gap})";
     .enable-trans();
     &:hover {
       &:extend(.z-depth-main-raised);
     }
     &:active {
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: @box-shadow-card-normal;
     }
     .header{
+        position: -webkit-sticky;
+    	position: -moz-sticky;
+    	position: -ms-sticky;
+    	position: sticky;
+        top: 0;
         border-top-left-radius: @border-radius-width;
         border-top-right-radius: @border-radius-width;
         @media(max-width: @on-phone) {
             border-radius: 0;
         }
-        background-color: fade(@theme-bg-header,90%);
+        background-color: @theme-bg-header;
         color: @theme-text-in-header;
         font-size: @base-font-size;
         line-height: 1.8em;
@@ -28,7 +35,9 @@
 
     }
     .content{
+        overflow: auto;
         padding: @gap/2 0;
+        max-height: ~"calc(100% - @{header-height} - 2.5 * @{gap})";
     }
      ul.entry > li > a{
         padding: 0 @gap;