feat: add custom tag tabs

XPoet · Sep 19, 2023 · 3720483 · 3720483
1 parent 40d0aa1
commit 3720483
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 0 deletions.
diff --git a/scripts/tags/index.js b/scripts/tags/index.js
@@ -11,3 +11,7 @@ hexo.extend.tag.register('button', buttonTag, true)
 hexo.extend.tag.register('btn', buttonTag, true)
 hexo.extend.tag.register('keep-button', buttonTag, true)
 hexo.extend.tag.register('keep-btn', buttonTag, true)
+
+const tabsTag = require('./tabs')(hexo)
+hexo.extend.tag.register('tabs', tabsTag, true)
+hexo.extend.tag.register('keep-tabs', tabsTag, true)
diff --git a/scripts/tags/tabs.js b/scripts/tags/tabs.js
@@ -0,0 +1,34 @@
+'use strict'
+
+module.exports = (ctx) =>
+  function (args, content = '') {
+    const tabsId = `keep-tabs-${Date.now()}`
+    let activeTabIdx = Number(args[0]) || 1
+
+    const tabBlock = /<!--\s*tab (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtab\s*-->/g
+    const matches = content.matchAll(tabBlock)
+
+    let tabIdx = 1
+    let tabsNav = ''
+    let tabsContent = ''
+
+    for (const match of matches) {
+      let tabName = match[1]
+      const href = `${tabsId}-${tabIdx}`
+      const isActive = tabIdx === activeTabIdx ? ' active' : ''
+      tabIdx += 1
+
+      tabsNav += `<div class="tab${isActive}" data-href="${href}">${tabName}</div>`
+
+      let tabContent = match[2]
+      tabContent = ctx.render.renderSync({ text: tabContent, engine: 'markdown' }).trim()
+      tabsContent += `<div class="tab-pane${isActive}" id="${href}">${tabContent}</div>`
+    }
+
+    tabsNav = `<div class="tabs-nav">${tabsNav}</div>`
+    tabsContent = `<div class="tabs-content">${tabsContent}</div>`
+
+    return `<div class="keep-tabs" id="${tabsId}">
+            ${tabsNav + tabsContent}
+          </div>`
+  }
diff --git a/source/css/common/tags/keep-tabs.styl b/source/css/common/tags/keep-tabs.styl
@@ -0,0 +1,76 @@
+$border-height = 2px
+
+.keep-tabs {
+  position relative
+  box-sizing border-box
+  width 100%
+  height auto
+  background var(--background-color)
+  border-radius 0.4rem
+  box-shadow 0.1rem 0.1rem 0.5rem var(--shadow-color)
+
+  .tabs-nav {
+    position relative
+    display flex
+    justify-content flex-start
+    box-sizing border-box
+    list-style none
+
+    &::before {
+      position absolute
+      bottom 0
+      left 0
+      box-sizing border-box
+      width 100%
+      height $border-height
+      background var(--border-color)
+      content ''
+    }
+
+    .tab {
+      position relative
+      box-sizing border-box
+      margin-right 0.8rem
+      padding 1rem 0.6rem
+      overflow hidden
+      color var(--text-color-3)
+      cursor pointer
+
+      &.active {
+        font-weight 600
+
+        &::before {
+          position absolute
+          bottom 0
+          left 50%
+          box-sizing border-box
+          width 100%
+          height $border-height
+          background var(--primary-color)
+          border-radius 0.2rem
+          transform translateX(-50%)
+          content ''
+        }
+      }
+    }
+  }
+
+
+  .tabs-content {
+    position relative
+    box-sizing border-box
+
+    .tab-pane {
+      position relative
+      box-sizing border-box
+      width 100%
+      height auto
+      min-height 12rem
+      padding 0.6rem 0.8rem
+
+      &:not(.active) {
+        display none
+      }
+    }
+  }
+}
diff --git a/source/css/style.styl b/source/css/style.styl
@@ -5,6 +5,7 @@
 @import "common/code-block/code-theme.styl"
 @import "common/tags/keep-note.styl"
 @import "common/tags/keep-button.styl"
+@import "common/tags/keep-tabs.styl"
 @import "layout/page.styl"
 @import "layout/_partial/local-search.styl"
 @import "layout/_partial/toc.styl"

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -513,6 +513,39 @@ KEEP.initUtils = () => {
             window.location.href = tempHref + '/page/' + current
           }
         })
+    },
+
+    // custom tabs tag active handle
+    tabsActiveHandle() {
+      const activeHandle = (navList, paneList, tab) => {
+        navList.forEach((nav) => {
+          if (tab.dataset.href === nav.dataset.href) {
+            nav.classList.add('active')
+          } else {
+            nav.classList.remove('active')
+          }
+        })
+
+        paneList.forEach((pane) => {
+          if (tab.dataset.href === pane.id) {
+            pane.classList.add('active')
+          } else {
+            pane.classList.remove('active')
+          }
+        })
+      }
+
+      const tabsList = document.querySelectorAll('.keep-tabs')
+      tabsList.length &&
+        tabsList.forEach((tabs) => {
+          const tabNavList = tabs.querySelectorAll('.tabs-nav .tab')
+          const tabPaneList = tabs.querySelectorAll('.tabs-content .tab-pane')
+          tabNavList.forEach((tabNav) => {
+            tabNav.addEventListener('click', () => {
+              activeHandle(tabNavList, tabPaneList, tabNav)
+            })
+          })
+        })
     }
   }
 
@@ -545,4 +578,7 @@ KEEP.initUtils = () => {
 
   // page number jump handle
   KEEP.utils.pageNumberJump()
+
+  // tabs active handle
+  KEEP.utils.tabsActiveHandle()
 }