diff --git a/_config.yml b/_config.yml
index e8a356d..2637158 100755
--- a/_config.yml
+++ b/_config.yml
@@ -5,13 +5,13 @@ info:
   docs: https://xaoxuu.com/wiki/volantis/
   cdn: # 要使用CDN，请在根目录的config文件中写上 use_cdn: true
     css:
-      style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.27/css/style.css
+      style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.29/css/style.css
     js:
-      app: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.22/js/app.js
-      search: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.22/js/search.js
+      app: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.29/js/app.js
+      search: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.29/js/search.js
       volantis: https://cdn.jsdelivr.net/gh/xaoxuu/volantis@1.0.6/js/volantis.min.js
-      backstretch: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.22/js/backstretch.min.js
-      commentTyping: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.22/js/commentTyping.js
+      backstretch: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.29/js/backstretch.min.js
+      commentTyping: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@20.2.29/js/commentTyping.js
 
 
 ############################### 服务开关 ###############################
@@ -31,12 +31,12 @@ style:
     # 导航栏阴影
     nav: true
     # 卡片阴影和悬浮动画
-    # card: true
+    card: true
   # 毛玻璃效果 具体效果调整在： source/less/_color.less
   blur:
-    navbar: true
-    widget: true
-    body: true
+    # navbar: true
+    # widget: true
+    # body: true
 # 建议：
 #   有背景图：开启毛玻璃，关闭卡片阴影
 #   无背景图：关闭毛玻璃，开启卡片阴影
@@ -45,7 +45,7 @@ style:
 
 # 幻灯片背景
 backstretch:
-  position: background  # cover: 封面背景   background: 整个网页背景
+  position: cover       # cover: 封面背景   fixed: 整个网页背景
   duration: 10000       # 持续时间（毫秒）
   fade: 2500            # 渐变（毫秒）
   is_dark: # true       # 图片是否是暗色的（调整文字为白色）
@@ -60,10 +60,11 @@ backstretch:
 # page的封面
 cover:
   scheme: search    # 后期将会提供多种封面布局方案
-  height: half      # full（默认值）: 首页封面占据整个第一屏幕，其他页面占半个屏幕高度， half: 所有页面都封面都只占半个屏幕高度
+  height: full      # full（默认值）: 首页封面占据整个第一屏幕，其他页面占半个屏幕高度， half: 所有页面都封面都只占半个屏幕高度
   title: Volantis
-  # logo: assets/logo.png    # logo和title只显示一个，若同时设置，则只显示logo
-  search: 'for Hexo 4.2+'
+  subtitle: 山重水复疑无路 柳暗花明又一村
+  logo: # assets/logo.png    # logo和title只显示一个，若同时设置，则只显示logo
+  search: 'A Wonderful Theme for Hexo 4.2+'
   # 主页封面菜单
   features:
     - name: 公告
diff --git a/layout/_cover/search.ejs b/layout/_cover/search.ejs
index 7a778c0..ab2a99c 100755
--- a/layout/_cover/search.ejs
+++ b/layout/_cover/search.ejs
@@ -2,6 +2,9 @@
   <img class='logo' src='<%- url_for(theme.cover.logo) %>'/>
 <% } else { %>
   <p class="title <%- theme.backstretch && theme.backstretch.is_dark ? 'white' : '' %>"><%- theme.cover.title ? theme.cover.title : config.title %></p>
+  <% if (theme.cover.subtitle) { %>
+    <p class="subtitle <%- theme.backstretch && theme.backstretch.is_dark ? 'white' : '' %>"><%- theme.cover.subtitle%></p>
+  <% } %>
 <% } %>
 <% if (theme.search.enable === true) { %>
   <div class="m_search">
@@ -11,7 +14,7 @@
     </form>
   </div>
 <% } %>
-<div class='menu navgation'>
+<div class='menu navigation'>
   <ul class='h-list'>
     <% if (theme.cover.features) { %>
       <% (theme.cover.features || []).forEach(function(value){ %>
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index 1293dc6..4a63b0c 100755
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -17,7 +17,7 @@
           <% } %>
         <% } %>
       </a>
-			<div class='menu navgation'>
+			<div class='menu navigation'>
 				<ul class='h-list'>
           <% if (theme.navbar.menu.on_desktop) { %>
   					<% (theme.navbar.menu.on_desktop || []).forEach(function(value){ %>
@@ -66,7 +66,7 @@
 </header>
 	<aside class="menu-phone white-box">
     <header>
-		<nav class="menu navgation">
+		<nav class="menu navigation">
       <ul>
         <% if (theme.navbar.menu.on_mobile) { %>
           <% (theme.navbar.menu.on_mobile || []).forEach(function(value){ %>
diff --git a/layout/_widget/category.ejs b/layout/_widget/category.ejs
index 01db0c2..a610b51 100755
--- a/layout/_widget/category.ejs
+++ b/layout/_widget/category.ejs
@@ -2,9 +2,12 @@
   <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
     <%- partial('header', {item: item}) %>
     <div class='content'>
-      <ul class="entry">
+      <ul class="entry navigation">
         <% site.categories.sort('path').each(function(category){ %>
-          <li><a class="flat-box<%= category.parent ? ' child' : ''%>" title="<%- url_for(category.path) %>" href="<%- url_for(category.path) %>"><div class='name'><%- category.name %></div><div class='badge'>(<%- category.posts.length %>)</div></a></li>
+          <li><a class="flat-box<%= category.parent ? ' child' : ''%>"
+            title="<%- url_for(category.path) %>" href="<%- url_for(category.path) %>"
+            id="<%= url_for(category.path).replace(/\/|%/g, "")?url_for(category.path).replace(/\/|%/g, ""):"home" %>"
+            ><div class='name'><%- category.name %></div><div class='badge'>(<%- category.posts.length %>)</div></a></li>
         <% }) %>
       </ul>
     </div>
diff --git a/layout/_widget/grid.ejs b/layout/_widget/grid.ejs
index ee82927..08aaec2 100755
--- a/layout/_widget/grid.ejs
+++ b/layout/_widget/grid.ejs
@@ -1,7 +1,7 @@
 <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
   <%- partial('header', {item: item}) %>
   <div class='content'>
-    <ul class="grid navgation">
+    <ul class="grid navigation">
       <% (item.rows||[]).forEach(function(row){ %>
         <li><a class="flat-box" title="<%- url_for(row.url) %>" href="<%- url_for(row.url) %>"
           <% if (row.rel) { %>
diff --git a/layout/_widget/header.ejs b/layout/_widget/header.ejs
index 0cbb7bd..da7892c 100755
--- a/layout/_widget/header.ejs
+++ b/layout/_widget/header.ejs
@@ -1,5 +1,12 @@
 <header>
-  <div><i class="<%- item.icon %> fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;<%- item.title %></div>
+  <div>
+    <% if (item.backurl) { %>
+      <a href='<%- item.backurl %>'><i class="<%- item.icon %> fa-fw" aria-hidden="true"></i><span class='name'><%- item.title %></span></a>
+    <% } else { %>
+      <i class="<%- item.icon %> fa-fw" aria-hidden="true"></i><span class='name'><%- item.title %></span>
+    <% } %>
+
+  </div>
   <% if (item.class == 'toc') { %>
     <!-- <div class='wrapper'><a class="s-toc rightBtn" rel="external nofollow noopener noreferrer" href="javascript:void(0)"><i class="fas fa-thumbtack fa-fw"></i></a></div> -->
   <% } else if(item.more && item.more.url) { %>
diff --git a/layout/_widget/list.ejs b/layout/_widget/list.ejs
index f720a08..adcf6f9 100755
--- a/layout/_widget/list.ejs
+++ b/layout/_widget/list.ejs
@@ -1,7 +1,7 @@
 <section class='widget <%- theme.style.shadow.card ? 'card-shadow' : '' %> <%- theme.style.blur && theme.style.blur.widget ? 'widget-blur' : '' %> <%- item.class %>'>
   <%- partial('header', {item: item}) %>
   <div class='content'>
-    <ul class="entry">
+    <ul class="list entry navigation">
       <% (item.rows||[]).forEach(function(row){ %>
         <li><a class="flat-box" title="<%- url_for(row.url) %>" href="<%- url_for(row.url) %>"
           <% if (row.rel) { %>
@@ -10,6 +10,7 @@
           <% if (row.target) { %>
             target="<%- row.target %>"
           <% } %>
+          id="<%= url_for(row.url).replace(/\/|%/g, "")?url_for(row.url).replace(/\/|%/g, ""):"home" %>"
           >
           <div class='name'>
             <% if(row.img) { %>
diff --git a/source/js/app.js b/source/js/app.js
index 92bb42a..348e74d 100755
--- a/source/js/app.js
+++ b/source/js/app.js
@@ -50,7 +50,7 @@ var customSearch;
 		const $coverAnchor = $('.cover-wrapper');
 		var showHeaderPoint = 0;
 		if ($coverAnchor[0]) {
-			showHeaderPoint = $coverAnchor[0].clientHeight - 164;
+			showHeaderPoint = $coverAnchor[0].clientHeight - 80;
 		}
 		var pos = document.body.scrollTop;
 		$(document, window).scroll(() => {
@@ -118,7 +118,7 @@ var customSearch;
 	}
 
 	function setHeaderMenuSelection() {
-		var $headerMenu = $('body .navgation');
+		var $headerMenu = $('body .navigation');
 		// 先把已经激活的取消激活
 		$headerMenu.find('li a.active').removeClass('active');
 		// var $underline = $headerMenu.find('.underline');
@@ -307,4 +307,4 @@ var customSearch;
 		}, 300);
 	});
 
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/source/less/_base.less b/source/less/_base.less
index 60244d1..dbc16a0 100755
--- a/source/less/_base.less
+++ b/source/less/_base.less
@@ -62,16 +62,18 @@ fancybox{
     align-items: center;
     align-self: center;
     align-content: center;
-    color: fade(@color_text_main, 85%);
-    // padding: @gap;
+    color: fade(@color_text_main, 75%);
+    padding: @gap;
     .title, .logo{
-      font-size: @fontsize_h1*2;
       margin-top: ~"calc(28vh - 2*@{gap})";
       text-align: center;
-      font-weight: bold;
     }
     .title{
-      line-height: ~"calc(@{fontsize_h1}*2 + 2*@{gap})";
+      font-size: @fontsize_h1*2;
+      line-height: @fontsize_h1*2;
+    }
+    .subtitle{
+      font-size: @fontsize_small;
     }
     .logo{
       max-height: 100px;
@@ -83,14 +85,14 @@ fancybox{
     }
     @media(max-width: @on_phone){
       .title, .logo {
-        font-size: @fontsize_h1*2;
-        line-height: @fontsize_h1*2.2;
+        font-size: @fontsize_h1*1.7;
+        line-height: @fontsize_h1*1.7;
       }
     }
     .m_search{
       @iconW: 32px;
       @iconMargin: 4px;
-      margin-top: ~"calc(2vh + 2*@{gap})";
+      margin-top: ~"calc(2vh + 32px)";
       position: relative;
       max-width: ~"calc(100% - 1*@{gap})";
       width: 340px;
@@ -137,6 +139,7 @@ fancybox{
         border: 1px dashed transparent;
         .set-placeholder({
           padding-top: 2px;
+          font-size: @fontsize_small;
           color: fade(@color_text_main, 60%);
         });
         &:hover{
@@ -154,19 +157,25 @@ fancybox{
 
     }
     &.half{
-      height: ~"calc(60vh - @{gap} - @{height_navbar} + 6*@{gap})";
-      margin-bottom: ~"calc(-6*@{gap})";
+      margin-bottom: ~"calc(-100px)";
+      height: ~"calc(60vh - @{height_navbar} + 120px)";
       .title, .logo{
-        margin-top: ~"calc(24vh - 4*@{gap})";
+        margin-top: ~"calc(28vh - 80px)";
       }
-      @media(max-width: @on_phone){
-        height: ~"calc(45vh - @{gap} - @{height_navbar} + 6*@{gap})";
+      .m_search{
+        margin-top: @gap*2;
+      }
+      @media(max-width: @on_pad){
+        height: ~"calc(40vh - @{height_navbar} + 160px)";
         .title, .logo{
-          margin-top: ~"calc(24vh - 6*@{gap})";
+          margin-top: ~"calc(22vh - 90px)";
         }
       }
-      .m_search{
-        margin-top: @gap;
+      @media(max-width: @on_phone){
+        height: ~"calc(30vh - @{height_navbar} + 200px)";
+        .title, .logo{
+          margin-top: ~"calc(22vh - 70px)";
+        }
       }
     }
     .menu{
diff --git a/source/less/_side.less b/source/less/_side.less
index a69c05a..f06cc74 100755
--- a/source/less/_side.less
+++ b/source/less/_side.less
@@ -32,11 +32,19 @@
     justify-content: space-between;
     border-top-left-radius: @border_radius;
     border-top-right-radius: @border_radius;
-    color: @theme_main;
     font-weight: bold;
     line-height: 1.5em;
     padding: ~"calc(@{gap} - 2px)";
     padding-bottom: 0;
+    &,a{
+      color: @theme_main;
+    }
+    a:hover{
+      color: @color_text_highlight;
+    }
+    span.name{
+      margin-left: @gap/2;
+    }
     .rightBtn{
       color: @theme_main;
       &:hover {
@@ -55,11 +63,12 @@
       a{
         color: fade(@color_text_main, 80%);
         padding: 0 @gap;
+        padding-left: @gap/2 + 4px;
         line-height: @height_cell;
         display: flex;
         justify-content: space-between;
         align-content: center;
-        border-left: 2px solid transparent;
+        border-left: 4px solid transparent;
         .enable-trans();
       }
     }
@@ -80,6 +89,15 @@
           border-left: 4px solid @theme_main;
           background: fade(@theme_main, 10%);
         }
+        &.active{
+          border-left: 4px solid @theme_main;
+          .name{
+            color: @theme_main;
+          }
+          .badge{
+            color: fade(@theme_main, 90%);
+          }
+        }
         &:active{
           border-left: 8px solid @theme_main;
         }
@@ -336,6 +354,9 @@
 .aplayer-container{
   display: flex;
   justify-content: center;
+  meting-js{
+    max-width: 100%;
+  }
 }
 .aplayer{
   max-width: 500px;