修复导航条定位问题

_config.yml

@@ -1,12 +1,33 @@
 #####################################
 ##      Material X                 ##
-##      version: 1.0 beta1         ##
-##      updated: 2018-11-16        ##
+##      version: 1.0 beta2         ##
+##      updated: 2018-11-22        ##
 #####################################
 
 # >> 主题配置写法示例 ---------------------------------------------------------------------
 # ⚠️ 注意：这里的内容需要复制到主目录到config中才有效，写在这里是为了提供参考
 
+# 导航栏
+nav_menu:
+  - name: 主页
+    icon: fas fa-home
+    url: https://xaoxuu.com/
+  - name: 博客
+    icon: fas fa-rss
+    url: /
+  - name: 归档
+    icon: fas fa-archive
+    url: archives/
+  - name: 项目
+    icon: fas fa-flask
+    url: https://xaoxuu.com/projects/
+  - name: 关于
+    icon: fas fa-user
+    url: https://xaoxuu.com/about/
+
+# 公告的写法示例
+announcement: '本站使用 <b><a href="https://xaoxuu.com/wiki/material-x/">Material X</a></b> 作为主题，喜欢这个主题的朋友可以阅读文档进行安装哦。'
+
 # 友链的写法示例
 links:
 - name: xaoxuu's blog
@@ -37,24 +58,6 @@ google_fonts: 'Ubuntu|Ubuntu+Mono' # 多个字体中间用英文竖线隔开
 # style: material    # 导航栏和标题栏背景是主题色
 style: pure        # 导航栏和标题栏背景是白色
 
-# 导航栏
-nav_menu:
-  - name: 主页
-    slug:
-    icon: fas fa-home
-    url: https://xaoxuu.com/
-  - name: 项目
-    slug:
-    icon: fas fa-flask
-    url: https://xaoxuu.com/projects/
-  - name: 博客
-    slug: home
-    icon: fas fa-rss
-    url: /
-  - name: 归档
-    slug: archives
-    icon: fas fa-archive
-    url: /archives/
 
 # 右边的小窗口，不想显示哪一项的注释掉对应的即可
 widgets:
@@ -65,6 +68,7 @@ widgets:
     title: false # 是否显示博客名、头衔等等。如果是，需要在主目录的config中写title
     motto: false # 是否显示格言座右铭等等。如果是，需要在主目录的config中写motto
     social: true # 是否显示社交信息（内容同页脚的社交信息）如果是，需要在主目录的config中写social，支持icon和URL
+  # 公告，内容写在主目录的config中
   announcement:
     enable: true
     icon: fas fa-bullhorn

layout/_partial/header.ejs

@@ -4,10 +4,10 @@
 			<a class="logo flat-box" href='<%= url_for("/") %>' ><%- config.title %></a>
 				<div class='menu'>
 					<ul class='h-list'>
-            <% if (theme.nav_menu) { %>
-    					<% (theme.nav_menu || []).forEach(function(value){ %>
+            <% if (config.nav_menu) { %>
+    					<% (config.nav_menu || []).forEach(function(value){ %>
     						<li>
-    							<a class='nav-<%=value.slug%> flat-box' href='<%=url_for(value.url)%>'>
+    							<a class="nav <%- page.path.replace('index.html', '').replace("/", "") == value.url.replace("/", "") ? 'current' : '' %> flat-box" href="<%= url_for(value.url) %>">
     								<i class='<%=value.icon%> fa-fw'></i>&nbsp;<%=value.name%>
   								</a>
   							</li>
@@ -46,11 +46,12 @@
 	<aside class="menu-phone">
 		<nav>
       <ul>
-          <% if (theme.nav_menu) { %>
-              <% (theme.nav_menu || []).forEach(function(value){ %>
+          <% if (config.nav_menu) { %>
+              <% (config.nav_menu || []).forEach(function(value){ %>
                   <li>
-                      <a class='nav-<%=value.slug%> flat-box nav flat-box' href='<%=url_for(value.url)%>'>
-                      <i class='<%=value.icon%> fa-fw'></i>&nbsp;<%=value.name%></a>
+										<a class="nav <%- page.path.replace('index.html', '').replace("/", "") == value.url.replace("/", "") ? 'current' : '' %> flat-box" href="<%= url_for(value.url) %>">
+											<i class='<%=value.icon%> fa-fw'></i>&nbsp;<%=value.name%>
+										</a>
                   </li>
               <%})%>
        <% } %>

source/less/_header.less

@@ -67,27 +67,32 @@
             font-size: @fontsize_base;
             color: fade(@theme_text_in_header,60%);
             padding: 0 8px;
-            &:hover,&.active{
+            &:hover{
                 color: @theme_text_in_header;
+                border-bottom: 4px solid @theme_text_header;
+                background: fade(@theme_text_header, 10%);
+            }
+            &.current{
+              border-bottom: 4px solid @theme_text_header;
             }
         }
         @media(max-width: @on_phone){
             display:none;
         }
 
-        .underline{
-            .enable-trans();
-            position: absolute;
-            background: @theme_text_in_header;
-            left: 0;
-            bottom: 0;
-            width: 0;
-            height: 4px;
-            border-radius: 4px;
-            &:hover{
-                height: 8px;
-            }
-        }
+        // .underline{
+        //     .enable-trans();
+        //     position: absolute;
+        //     background: @theme_text_in_header;
+        //     left: 0;
+        //     bottom: 0;
+        //     width: 0;
+        //     height: 4px;
+        //     border-radius: 4px;
+        //     &:hover{
+        //         height: 8px;
+        //     }
+        // }
     }
     .switcher{
         display: none;
@@ -301,6 +306,9 @@
                 border-left: 4px solid @theme_bg_quote;
                 background: fade(@theme_bg_quote, 10%);
             }
+            &.current{
+              border-left: 4px solid @theme_bg_quote;
+            }
         }
     }
 }

source/less/_widget.less

@@ -165,14 +165,21 @@
 
 .m_widget.announcement{
   .content{
+      font-size: @fontsize_small;
+      font-weight: bold;
       word-break: break-all;
       padding: @gap/2 @gap;
       &.pure{
         padding: 0 @gap @gap @gap; // 适合白色导航栏背景
       }
       a{
-        color: @theme_base_tint;
+        color: @theme_text_link;
+        .enable-trans();
         &:hover {
+            color: @theme_text_highlight;
+            text-decoration: underline;
+        }
+        &:active {
             color: darken(@theme_text_highlight, 25%);
         }
       }