v1.10.0

docs/.vuepress/config.ts

@@ -328,7 +328,8 @@ export default defineConfig4CustomTheme<VdoingThemeConfig>({
   ],
 
   markdown: {
-    lineNumbers: true
+    lineNumbers: true,
+    extractHeaders: ['h2', 'h3', 'h4', 'h5', 'h6'], // 提取标题到侧边栏的级别，默认['h2', 'h3']
   },
 
   // 监听文件变化并重新构建

package.json

@@ -24,7 +24,7 @@
     "vuepress-plugin-one-click-copy": "^1.0.2",
     "vuepress-plugin-thirdparty-search": "^1.0.2",
     "vuepress-plugin-zooming": "^1.1.7",
-    "vuepress-theme-vdoing": "^1.9.5",
+    "vuepress-theme-vdoing": "^1.10.0",
     "yamljs": "^0.3.0"
   }
 }

vdoing/components/RightMenu.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="right-menu-wrapper">
     <div class="right-menu-margin">
+      <div class="right-menu-title">目录</div>
       <div class="right-menu-content">
         <div
           :class="[
@@ -51,49 +52,94 @@ export default {
 .right-menu-wrapper
   width $rightMenuWidth
   float right
-  margin-right -($rightMenuWidth + 60px)
+  margin-right -($rightMenuWidth + 55px)
+  // margin-top -($navbarHeight *2 + 1.5rem)
   position sticky
   top 0
-  font-size 0.9rem
+  font-size 0.75rem
   .right-menu-margin
     margin-top: ($navbarHeight + 1rem)
+    border-radius 3px
+    overflow hidden
+  .right-menu-title
+    padding 10px 15px 0 15px
+    background var(--mainBg)
+    font-size 1rem
+    &:after
+      content ''
+      display block
+      width 100%
+      height 1px
+      background var(--borderColor)
+      margin-top 10px
   .right-menu-content
     max-height 80vh
     position relative
     overflow hidden
+    background var(--mainBg)
+    padding 4px 3px 4px 0
+    &::-webkit-scrollbar
+      width 3px
+      height 3px
     &::-webkit-scrollbar-track-piece
       background none
     &::-webkit-scrollbar-thumb:vertical
       background-color hsla(0, 0%, 49%, 0.3)
     &:hover
       overflow-y auto
+      padding-right 0
     .right-menu-item
       padding 4px 15px
-      border-left 1px solid var(--borderColor)
+      // border-left 1px solid var(--borderColor)
+      overflow hidden
+      white-space nowrap
+      text-overflow ellipsis
+      position relative
+      &.level2
+        font-size 0.8rem
       &.level3
-        padding-left 28px
+        padding-left 27px
+      &.level4
+        padding-left 37px
+      &.level5
+        padding-left 47px
+      &.level6
+        padding-left 57px
       &.active
-        border-color $accentColor
+        &:before
+          content ''
+          position absolute
+          top 5px
+          left 0
+          width 3px
+          height 14px
+          background $accentColor
+          border-radius 0 4px 4px 0
         a
           color $accentColor
           opacity 1
       a
         color var(--textColor)
         opacity 0.75
-        display block
+        display inline-block
-        width: ($rightMenuWidth - 30px)
+        width 100%
+        overflow hidden
+        white-space nowrap
+        text-overflow ellipsis
         &:hover
-          color $accentColor
+          opacity 1
+    &:hover
+      color $accentColor
 .have-body-img
   .right-menu-wrapper
     .right-menu-margin
-      padding 0.3rem 0
+      // padding 0.3rem 0
-      background var(--sidebarBg)
+      // background var(--sidebarBg)
-      border-radius 5px
+      // border-radius 5px
       .right-menu-item
-        border-color transparent
+        // border-color transparent
-        &.active
+        // &.active
-          border-left 0.2rem solid $accentColor
+        // border-left 0.2rem solid $accentColor
-        &:hover
+        // &:hover
-          border-left 0.2rem solid $accentColor
+        // border-left 0.2rem solid $accentColor
 </style>

vdoing/components/SidebarLink.vue

@@ -6,7 +6,7 @@ export default {
 
   props: ['item', 'sidebarDepth'],
 
-  render (h,
+  render(h,
     {
       parent: {
         $page,
@@ -54,7 +54,7 @@ export default {
   }
 }
 
-function renderLink (h, to, text, active) {
+function renderLink(h, to, text, active) {
   return h('router-link', {
     props: {
       to,
@@ -68,18 +68,18 @@ function renderLink (h, to, text, active) {
   }, text)
 }
 
-function renderChildren (h, children, path, route, maxDepth, depth = 1) {
+function renderChildren(h, children, path, route, maxDepth, depth = 1) {
   if (!children || depth > maxDepth) return null
   return h('ul', { class: 'sidebar-sub-headers' }, children.map(c => {
     const active = isActive(route, path + '#' + c.slug)
-    return h('li', { class: 'sidebar-sub-header' }, [
+    return h('li', { class: 'sidebar-sub-header level' + c.level }, [
       renderLink(h, path + '#' + c.slug, c.title, active),
       renderChildren(h, c.children, path, route, maxDepth, depth + 1)
     ])
   }))
 }
 
-function renderExternal (h, to, text) {
+function renderExternal(h, to, text) {
   return h('a', {
     attrs: {
       href: to,
@@ -97,6 +97,12 @@ function renderExternal (h, to, text) {
 .sidebar .sidebar-sub-headers
   padding-left 1rem
   font-size 0.95em
+  .level4
+    padding-left 0.2rem
+  .level5
+    padding-left 0.4rem
+  .level6
+    padding-left 0.6rem
 a.sidebar-link
   font-size 1em
   font-weight 400

vdoing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-vdoing",
-  "version": "1.9.5",
+  "version": "1.10.0",
   "description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。",
   "author": {
     "name": "gaoyi(Evan) Xu"

vdoing/styles/index.styl

@@ -222,6 +222,12 @@ h2
 
 h3
   font-size 1.35rem
+h4
+  font-size 1.25rem
+h5
+  font-size 1.15rem
+h6
+  font-size 1.05rem
 
 a.header-anchor
   font-size 0.85em