From a54ff9cfba50f548eac9cfb3fd03eedc87462de8 Mon Sep 17 00:00:00 2001
From: xaoxuu <me@xaoxuu.com>
Date: Thu, 8 Jul 2021 22:23:55 +0800
Subject: [PATCH] navbar

---
 layout/_partial/main/navbar/list_wiki.ejs  |  2 +-
 scripts/tags/navbar.js                     | 47 +++++++++++++++-------
 source/css/_layout/partial/navbar.styl     | 34 +++++++++++++---
 source/css/_layout/tag-plugins/about.styl  |  3 +-
 source/css/_layout/tag-plugins/navbar.styl |  7 +++-
 5 files changed, 70 insertions(+), 23 deletions(-)

diff --git a/layout/_partial/main/navbar/list_wiki.ejs b/layout/_partial/main/navbar/list_wiki.ejs
index 4400ee4..33eb1f5 100644
--- a/layout/_partial/main/navbar/list_wiki.ejs
+++ b/layout/_partial/main/navbar/list_wiki.ejs
@@ -23,7 +23,7 @@ function layoutDiv() {
       }
       el += ' href="' + url_for(group.path) + '">' + group.title + '</a>';
       el += '</a>';
-    } 
+    }
   }
   el += '</nav>';
   el += '</div>';
diff --git a/scripts/tags/navbar.js b/scripts/tags/navbar.js
index f97d998..61ff2b2 100644
--- a/scripts/tags/navbar.js
+++ b/scripts/tags/navbar.js
@@ -1,11 +1,11 @@
 /**
  * navbar.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
- * 
+ *
  * {% navbar [markdown link] ... %}
- * 
+ *
  * example:
- * {% navbar [Home](/) [About](/about/) [Comments](#comments) %}
+ * {% navbar active:1 [Home](/) [About](/about/) [Comments](#comments) %}
  */
 
 'use strict';
@@ -14,24 +14,43 @@ hexo.extend.tag.register('navbar', function(args) {
   if (args.length == 0) {
     return;
   }
+  args = hexo.args.map(args, ['active'], ['links']);
+  if (args.links) {
+    args.links = args.links.split(' ');
+  }
   var el = '<div class="tag-plugin navbar"><nav class="cap">';
-  function layoutItem(a) {
+  function layoutItem(a, i) {
+    var text = '';
+    var href = '';
+    var el = '<a';
+    if ((i+1).toString() === args.active) {
+      el += ' class="active"';
+    }
     if (a.includes('](')) {
       // markdown
-      let el = hexo.render.renderSync({text: a, engine: 'markdown'}).split('\n').join('');
-      if (el.length > 8) {
-        el = el.slice(3, el.length-4);
+      let tmp = a.split('](');
+      if (tmp.length > 1) {
+        text = tmp[0];
+        if (text.length > 1) {
+          text = text.substring(1, text.length);
+        }
+        href = tmp[1];
+        if (href.length > 1) {
+          href = href.substring(0, href.length-1);
+        }
+        el += ' href="' + href + '"';
       }
-      return el;
     } else {
-      var item = '<a href="#' + a + '">';
-      item += a;
-      item += '</a>';
-      return item;
+      el += ' href="#' + a + '"';
+      text = a;
     }
+    el += '>';
+    el += text;
+    el += '</a>';
+    return el;
   }
-  args.forEach((item, i) => {
-    el += layoutItem(item);
+  args.links.forEach((item, i) => {
+    el += layoutItem(item, i);
   });
   el += '</nav></div>';
   return el;
diff --git a/source/css/_layout/partial/navbar.styl b/source/css/_layout/partial/navbar.styl
index 509c517..b8bb97a 100644
--- a/source/css/_layout/partial/navbar.styl
+++ b/source/css/_layout/partial/navbar.styl
@@ -4,25 +4,49 @@
   margin-top: 1.75rem
   top: -2px
   background: var(--site-bg)
-  padding: 0.5rem 1rem 0.38rem
+  padding: 0 1rem
   z-index: 1
+  margin-bottom: 1px
+  &:after
+    content: ''
+    width: 'calc(100% - 2 * %s)' % 1rem
+    height: 2px
+    border-radius: 2px
+    position: absolute
+    bottom: 0
+    left: 1rem
+    background: var(--block-hover)
 
 nav.cap
   display: flex
-  overflow: scroll
+  overflow: scroll visible
   scrollbar(0, 0)
   >p
     margin: 0
   a
-    padding: 0.5rem 0.75rem
-    margin-left: 0.25rem
+    padding: .25rem 1rem
+    margin: 10px 0 8px 0
+    line-height: 2
     color: var(--text-p3)
     border-radius: 4px
     font-weight: 500
     white-space: nowrap
-    &.active, &:hover
+    position: relative
+    z-index: 1
+    &:after
+      content: ''
+      width: 'calc(100% - 2 * %s)' % .5rem
+      height: 2px
+      position: absolute
+      bottom: -8px
+      left: .5rem
+    &:hover
       background: var(--block-hover)
+    &.active, &:hover
       color: var(--text-p1)
+    &.active:after
+      background: $color-theme
+      border-radius: 2px
 
 
 @media screen and (max-width: $device-tablet)
diff --git a/source/css/_layout/tag-plugins/about.styl b/source/css/_layout/tag-plugins/about.styl
index e42aebf..34683ea 100644
--- a/source/css/_layout/tag-plugins/about.styl
+++ b/source/css/_layout/tag-plugins/about.styl
@@ -34,8 +34,9 @@
         a
           margin: 0
           padding: 0
-          color: var(--text-p1)
           color: $color-link
+          &.active
+            background: none
           &:hover
             color: $color-hover
             background: none
diff --git a/source/css/_layout/tag-plugins/navbar.styl b/source/css/_layout/tag-plugins/navbar.styl
index 71f766a..05d5e9a 100644
--- a/source/css/_layout/tag-plugins/navbar.styl
+++ b/source/css/_layout/tag-plugins/navbar.styl
@@ -4,9 +4,12 @@
     padding: 1px
     background: var(--block)
     border-radius: 6px
+    display: inline-flex
     a
       margin: 1px
-      padding: 0.5em 0.75rem
-      &:hover
+      padding: 0.25em 0.75rem
+      &:after
+        display: none
+      &:hover,&.active
         background: var(--card)
         color: var(--text-p1)