From 94e126241d26a3f849273d7b14f3e775fb9281d9 Mon Sep 17 00:00:00 2001
From: xaoxuu <xaoxuu@gmail.com>
Date: Thu, 4 Apr 2019 00:42:30 +0800
Subject: [PATCH] update

---
 _config.yml              |  10 +-
 layout/_cover/search.ejs |  27 ++---
 layout/layout.ejs        |   8 +-
 source/js/app.js         |   4 +-
 source/less/_base.less   | 255 ++++++++++++++++++++-------------------
 source/less/_header.less |   2 +-
 6 files changed, 151 insertions(+), 155 deletions(-)

diff --git a/_config.yml b/_config.yml
index 03a6051..17388c8 100755
--- a/_config.yml
+++ b/_config.yml
@@ -4,9 +4,9 @@ info:
   docs: https://xaoxuu.com/wiki/material-x/
   cdn: # 把对应的那一行注释掉就使用本地的文件
     css:
-      style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.4.9/css/style.css
+      style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.4.10/css/style.css
     js:
-      app: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.4.9/js/app.js
+      app: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.4.10/js/app.js
       search: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.4.9/js/search.js
       volantis: https://cdn.jsdelivr.net/gh/xaoxuu/volantis@1/js/volantis.min.js
 
@@ -46,8 +46,8 @@ updated_date_format: 'llll' # 文章更新日期的格式
 
 
 ############################### 自定义 ###############################
-# 主页封面
-home_cover:
+# page的封面
+cover:
   scheme: search    # 后期将会提供多种封面方案
   # height: half      # full（默认值）: 首页封面占据整个第一屏幕，其他页面占半个屏幕高度， half: 所有页面都封面都只占半个屏幕高度
   title: "xaoxuu"
@@ -57,7 +57,7 @@ home_cover:
   features:
     - name: 博文
       icon: fas fa-rss
-      url: '#posts'
+      url: /
     - name: 项目
       icon: fas fa-code-branch
       url: projects/
diff --git a/layout/_cover/search.ejs b/layout/_cover/search.ejs
index 06daa51..582188d 100755
--- a/layout/_cover/search.ejs
+++ b/layout/_cover/search.ejs
@@ -1,33 +1,26 @@
-<% if (theme.home_cover.logo) { %>
-  <img class='logo' src='<%- url_for(theme.home_cover.logo) %>'/>
+<% if (theme.cover.logo) { %>
+  <img class='logo' src='<%- url_for(theme.cover.logo) %>'/>
 <% } else { %>
-  <h1 class='title'><%- theme.home_cover.title ? theme.home_cover.title : config.title %></h1>
+  <h1 class='title'><%- theme.cover.title ? theme.cover.title : config.title %></h1>
 <% } %>
 <br>
 <% if (theme.search.enable === true) { %>
   <div class="m_search">
     <form name="searchform" class="form u-search-form">
-      <input type="text" class="input u-search-input" placeholder="<%- theme.home_cover.search_placeholder %>" />
+      <input type="text" class="input u-search-input" placeholder="<%- theme.cover.search_placeholder %>" />
       <span class="icon"><i class="fas fa-search fa-fw"></i></span>
     </form>
   </div>
 <% } %>
 <div class='menu navgation'>
   <ul class='h-list'>
-    <% if (theme.home_cover.features) { %>
-      <% (theme.home_cover.features || []).forEach(function(value){ %>
+    <% if (theme.cover.features) { %>
+      <% (theme.cover.features || []).forEach(function(value){ %>
         <li>
-          <% if (value.url == '#posts') { %>
-            <a id="<%= url_for(value.url).replace(/\/|%/g, "")?url_for(value.url).replace(/\/|%/g, ""):"home" %>"
-             class="posts" >
-              <i class='<%= value.icon %> fa-fw'></i>&nbsp;<%= __('navbar.'+value.name) == ('navbar.'+value.name) ? value.name : __('navbar.'+value.name) %>
-            </a>
-          <% } else { %>
-            <a id="<%= url_for(value.url).replace(/\/|%/g, "")?url_for(value.url).replace(/\/|%/g, ""):"home" %>"
-             class="nav home" href="<%= url_for(value.url) %>" >
-              <i class='<%= value.icon %> fa-fw'></i>&nbsp;<%= __('navbar.'+value.name) == ('navbar.'+value.name) ? value.name : __('navbar.'+value.name) %>
-            </a>
-          <% } %>
+          <a class="nav home" href="<%= url_for(value.url) %>"
+          id="<%= url_for(value.url).replace(/\/|%/g, "")?url_for(value.url).replace(/\/|%/g, ""):"home" %>">
+            <i class='<%= value.icon %> fa-fw'></i>&nbsp;<%= __('navbar.'+value.name) == ('navbar.'+value.name) ? value.name : __('navbar.'+value.name) %>
+          </a>
         </li>
       <%})%>
     <% } %>
diff --git a/layout/layout.ejs b/layout/layout.ejs
index 6532d0a..0e5329a 100755
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -2,10 +2,10 @@
 <html>
 <%- partial('_partial/head') %>
 <body>
-  <% if (!page.prev && theme.home_cover) { %>
-    <div class="home-wrapper">
-      <div class='home-cover <%- is_home() ? theme.home_cover.height : "half" %>'>
-        <% if (theme.home_cover.scheme == 'search') { %>
+  <% if (!page.prev && theme.cover) { %>
+    <div class="cover-wrapper">
+      <div class='cover <%- is_home() ? theme.cover.height : "half" %>'>
+        <% if (theme.cover.scheme == 'search') { %>
           <%- partial('_cover/search') %>
         <% } %>
       </div>
diff --git a/source/js/app.js b/source/js/app.js
index 10fe660..0db8a73 100755
--- a/source/js/app.js
+++ b/source/js/app.js
@@ -13,7 +13,7 @@ var customSearch;
   function setBackToTop(){
     const $top = $('.s-top', '.l_body');
     let pos = document.body.scrollTop;
-		const $header = $('.l_header', '.home-wrapper');
+		const $header = $('.l_header', '.cover-wrapper');
 		$(document, window).scroll(() => {
 			const scrollTop = $(window).scrollTop();
 			const del = scrollTop - pos;
@@ -229,7 +229,7 @@ var customSearch;
 		}, 300);
 
 		// posts
-		const $postsBtn = $('.menu .posts');
+		const $postsBtn = $('.menu .active');
 		const $postsTarget = $('.l_body');
 		if ($postsBtn.length && $postsTarget) {
 			$postsBtn.click(e => { e.preventDefault(); e.stopPropagation(); scrolltoElement($postsTarget); });
diff --git a/source/less/_base.less b/source/less/_base.less
index 6ab20e8..288898f 100755
--- a/source/less/_base.less
+++ b/source/less/_base.less
@@ -47,158 +47,161 @@ fancybox{
   justify-content: center;
 }
 
-.home-cover{
-  top: 0;
-  left: 0;
-  max-width: 100%;
-  height: ~"calc(100vh - @{gap} - @{height_navbar})";
-  display: flex;
-  flex-wrap: nowrap;
-  flex-direction: column;
-  margin-bottom: 2*@gap;
-  align-items: center;
-  align-self: center;
-  align-content: center;
-  padding: @gap;
-  .title, .logo{
-    font-size: @fontsize_h1*3;
-    line-height: @fontsize_h1*3.3;
-    margin-top: ~"calc(28vh - 2*@{gap})";
-    text-align: center;
-    font-weight: bold;
-  }
-  .logo{
-    max-height: 150px;
-    max-width: ~"calc(100% - 4*@{gap})";
-  }
-  @media(max-width: @on_phone){
-    .title, .logo {
-      font-size: @fontsize_h1*2;
-      line-height: @fontsize_h1*2.2;
-    }
-  }
-  &.half{
-    height: ~"calc(60vh - @{gap} - @{height_navbar})";
+.cover-wrapper{
+  .cover{
+    top: 0;
+    left: 0;
+    max-width: 100%;
+    height: ~"calc(100vh - @{gap} - @{height_navbar})";
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    margin-bottom: 2*@gap;
+    align-items: center;
+    align-self: center;
+    align-content: center;
+    padding: @gap;
     .title, .logo{
-      margin-top: ~"calc(20vh - 2*@{gap})";
+      font-size: @fontsize_h1*3;
+      line-height: @fontsize_h1*3.3;
+      margin-top: ~"calc(28vh - 2*@{gap})";
+      text-align: center;
+      font-weight: bold;
     }
-  }
-
-  .m_search{
-    margin-top: 2vh;
-    position: relative;
-    height: @height_navbar - @gap;
-    max-width: ~"calc(100% - 1*@{gap})";
-    width: 1.1*@width_sidebar;
-    @media(max-width: @on_laptop){
-      width: 1.2*@width_sidebar_m;
+    .logo{
+      max-height: 150px;
+      max-width: ~"calc(100% - 4*@{gap})";
     }
-    line-height: @height_navbar - @gap;
-    vertical-align: middle;
-    .form {
-      position: relative;
-      display: block;
-      width: 100%;
+    @media(max-width: @on_phone){
+      .title, .logo {
+        font-size: @fontsize_h1*2;
+        line-height: @fontsize_h1*2.2;
+      }
     }
-    .icon,.input{
-      .enable-trans(.1s);
+    &.half{
+      height: ~"calc(60vh - @{gap} - @{height_navbar})";
+      .title, .logo{
+        margin-top: ~"calc(20vh - 2*@{gap})";
+      }
     }
-    .icon {
-      position: absolute;
-      display:block;
+
+    .m_search{
+      margin-top: 2vh;
+      position: relative;
       height: @height_navbar - @gap;
-      width: @height_navbar - @gap;
+      max-width: ~"calc(100% - 1*@{gap})";
+      width: 1.1*@width_sidebar;
+      @media(max-width: @on_laptop){
+        width: 1.2*@width_sidebar_m;
+      }
       line-height: @height_navbar - @gap;
-      top: 0;
-      left: @gap/2;
-      font-size: @fontsize_base;
-    }
-    .input {
-      display:block;
-      color: @color_text_main;
-      background: lighten(@theme_cardbg, 10%);
-      font-size: @fontsize_base;
-      line-height: @fontsize_base*2.2;
-      margin: 0;
-      width: 100%;
-      padding-left: @fontsize_base + @gap;
-      padding-right: @gap;
-      padding-top: 2px;
-      @media(max-width: @on_phone){
-        padding-left: @fontsize_base + @gap;
+      vertical-align: middle;
+      .form {
+        position: relative;
+        display: block;
+        width: 100%;
       }
-      font-family: @fontfamily_base;
-      border: none;
-      box-sizing: border-box;
-      -webkit-appearance: none;
-      box-shadow: none;
-      border: 1px dashed transparent;
-      .enable-trans();
-      border-radius: @height_navbar;
-      ~ .icon{
-        line-height: @fontsize_base*2.2+4px;
-        padding-left: 2px;
-        padding-top: 2px;
-        color: fade(@color_text_main, 80%);
+      .icon,.input{
+        .enable-trans(.1s);
       }
-      .set-placeholder({color: fade(@color_text_main, 60%)});
-      &:hover{
-        border: 1px dashed @theme_main;
+      .icon {
+        position: absolute;
+        display:block;
+        height: @height_navbar - @gap;
+        width: @height_navbar - @gap;
+        line-height: @height_navbar - @gap;
+        top: 0;
+        left: @gap/2;
+        font-size: @fontsize_base;
       }
-      &:focus {
+      .input {
+        display:block;
+        color: @color_text_main;
+        background: lighten(@theme_cardbg, 10%);
+        font-size: @fontsize_base;
+        line-height: @fontsize_base*2.2;
+        margin: 0;
+        width: 100%;
+        padding-left: @fontsize_base + @gap;
+        padding-right: @gap;
+        padding-top: 2px;
+        @media(max-width: @on_phone){
+          padding-left: @fontsize_base + @gap;
+        }
+        font-family: @fontfamily_base;
+        border: none;
+        box-sizing: border-box;
+        -webkit-appearance: none;
+        box-shadow: none;
+        border: 1px dashed transparent;
+        .enable-trans();
+        border-radius: @height_navbar;
         ~ .icon{
-          color: @theme_main;
+          line-height: @fontsize_base*2.2+4px;
+          padding-left: 2px;
+          padding-top: 2px;
+          color: fade(@color_text_main, 80%);
+        }
+        .set-placeholder({color: fade(@color_text_main, 60%)});
+        &:hover{
+          border: 1px dashed @theme_main;
+        }
+        &:focus {
+          ~ .icon{
+            color: @theme_main;
+          }
+          color: @color_text_main;
+          border: 1px solid @theme_main;
         }
-        color: @color_text_main;
-        border: 1px solid @theme_main;
       }
-    }
 
-  }
-  &, a{
-    color: @theme_main;
-  }
-  .menu{
-    margin-top: 4vh;
-    ul {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: baseline;
-      justify-content: center;
-      li {
+    }
+    &, a{
+      color: @theme_main;
+    }
+    .menu{
+      margin-top: 4vh;
+      ul {
         display: flex;
         flex-wrap: wrap;
-        align-items: center;
-        padding: 0;
-        height: auto;
+        align-items: baseline;
+        justify-content: center;
+        li {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          padding: 0;
+          height: auto;
+        }
       }
-    }
-    ul > li > a{
-      font-size: @fontsize_small;
-      padding: 2px;
-      margin: 0 4px;
-      .enable-trans();
-      color: fade(@color_text_main, 70%);
-      border-bottom: 1px solid transparent;
-      &:hover, &.active{
-        color: @theme_main;
-        border-bottom: 1px solid @theme_main;
+      ul > li > a{
+        font-size: @fontsize_small;
+        padding: 2px;
+        margin: 0 4px;
+        .enable-trans();
+        color: fade(@color_text_main, 70%);
+        border-bottom: 1px solid transparent;
+        &:hover, &.active{
+          color: @theme_main;
+          border-bottom: 1px solid @theme_main;
+        }
       }
     }
-  }
-  .switcher{
-    & > li{
-      a{
-        &:hover {
-          background: fade(@theme_main, 15%);
+    .switcher{
+      & > li{
+        a{
+          &:hover {
+            background: fade(@theme_main, 15%);
+          }
         }
       }
     }
-  }
 
+  }
 }
 
 
+
 .z-depth-nav {
   box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1);
 }
diff --git a/source/less/_header.less b/source/less/_header.less
index 58deb83..6a1d744 100755
--- a/source/less/_header.less
+++ b/source/less/_header.less
@@ -341,7 +341,7 @@
     }
   }
 }
-.home-wrapper{
+.cover-wrapper{
   .l_header{
     .enable-trans(0.5s);
     transform: translateY(-1.5*@height_navbar);