feat(theme): nav active link style

3 files changed, 23 insertions, 8 deletions

diff --git a/hugo.toml b/hugo.toml
index 4d2fae62..91d5888f 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -22,12 +22,12 @@ favicon = "/favicon.png"
 
 [[params.nav]]
 name = "关于"
-link = "/about"
+link = "/about/"
 target = "_self"
 
 [[params.nav]]
 name = "链接"
-link = "/links"
+link = "/links/"
 target = "_self"
 
 [[params.nav]]
diff --git a/themes/yinyang/assets/css/index.css b/themes/yinyang/assets/css/index.css
index aabbd648..46e9fea4 100644
--- a/themes/yinyang/assets/css/index.css
+++ b/themes/yinyang/assets/css/index.css
@@ -155,18 +155,33 @@ a:hover {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--text-color);
   width: fit-content;
-  padding: 0.25rem 0.75rem;
   border-radius: 1rem;
+  overflow: hidden;
 }
 
 .header-item a {
+  display: inline-block;
   color: var(--background-color);
+  padding: 0.25rem 0.5rem;
+  background-color: var(--text-color);
+}
+
+.header-item:first-child a {
+  padding-left: 0.75rem
+}
+
+.header-item:last-child a {
+  padding-right: 0.75rem
 }
 
-.header-item {
-  margin: 0 5px;
+.header-item.active a {
+  color: var(--text-color);
+  background-color: var(--block-background-color);
+}
+
+.header-item a:hover {
+  text-decoration: none;
 }
 
 .header-line {
diff --git a/themes/yinyang/layouts/partials/header.html b/themes/yinyang/layouts/partials/header.html
index c176b880..b1f6e50e 100644
--- a/themes/yinyang/layouts/partials/header.html
+++ b/themes/yinyang/layouts/partials/header.html
@@ -10,8 +10,8 @@
 <!-- Navigation -->
 <nav class="header-items">
   {{ range .Site.Params.nav }}
-  <div class="header-item">
+  <div class="header-item {{ if eq .link $.Page.RelPermalink }}active{{ end }}">
     <a href="{{ .link }}" target="{{ .target }}">{{ .name }}</a>
   </div>
   {{ end }}
-</nav>
\ No newline at end of file
+</nav>