navbar

scripts/tags/navbar.js

@@ -5,7 +5,7 @@
  * {% 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('');
+      let tmp = a.split('](');
-      if (el.length > 8) {
+      if (tmp.length > 1) {
-        el = el.slice(3, el.length-4);
+        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 + '">';
+      el += ' href="#' + a + '"';
-      item += a;
+      text = a;
-      item += '</a>';
-      return item;
     }
+    el += '>';
+    el += text;
+    el += '</a>';
+    return el;
   }
-  args.forEach((item, i) => {
+  args.links.forEach((item, i) => {
-    el += layoutItem(item);
+    el += layoutItem(item, i);
   });
   el += '</nav></div>';
   return el;

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
+    padding: .25rem 1rem
-    margin-left: 0.25rem
+    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)

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

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
+      padding: 0.25em 0.75rem
-      &:hover
+      &:after
+        display: none
+      &:hover,&.active
         background: var(--card)
         color: var(--text-p1)