侧边栏最大层级是多少

[w2534073922]

目前的侧边栏似乎有层级限制，好像是五层，更深层的就不会展示了

[brc-dd]

Yes maximum is 5 levels deep.

[w2534073922]

Yes maximum is 5 levels deep.

This is bad, my document has 9 layers of directories, is there a solution?

[brc-dd]

I'd say re-organize your content. 9 level deep sidebar won't have enough space to show the titles:

However if you still want you can use patch-package or pnpm patch to apply this:

diff --git a/dist/client/theme-default/components/VPSidebarItem.vue b/dist/client/theme-default/components/VPSidebarItem.vue
index 022584e31d6e67a7f29e4ac4f9ccd52e1647cce7..e2b5b7b1c44314831795851d9dae4c00c819d2d3 100644
--- a/dist/client/theme-default/components/VPSidebarItem.vue
+++ b/dist/client/theme-default/components/VPSidebarItem.vue
@@ -26,7 +26,7 @@ const linkTag = computed(() => (isLink.value ? 'a' : 'div'))
 const textTag = computed(() => {
   return !hasChildren.value
     ? 'p'
-    : props.depth + 2 === 7
+    : props.depth + 2 > 6
       ? 'p'
       : `h${props.depth + 2}`
 })
@@ -95,14 +95,12 @@ function onCaretClick() {
     </div>
 
     <div v-if="item.items && item.items.length" class="items">
-      <template v-if="depth < 5">
-        <VPSidebarItem
-          v-for="i in item.items"
-          :key="i.text"
-          :item="i"
-          :depth="depth + 1"
-        />
-      </template>
+      <VPSidebarItem
+        v-for="i in item.items"
+        :key="i.text"
+        :item="i"
+        :depth="depth + 1"
+      />
     </div>
   </component>
 </template>
@@ -136,10 +134,7 @@ function onCaretClick() {
   transition: background-color 0.25s;
 }
 
-.VPSidebarItem.level-2.is-active > .item > .indicator,
-.VPSidebarItem.level-3.is-active > .item > .indicator,
-.VPSidebarItem.level-4.is-active > .item > .indicator,
-.VPSidebarItem.level-5.is-active > .item > .indicator {
+.VPSidebarItem:not(.level-0):not(.level-1).is-active > .item > .indicator {
   background-color: var(--vp-c-brand-1);
 }
 
@@ -162,45 +157,21 @@ function onCaretClick() {
   color: var(--vp-c-text-1);
 }
 
-.VPSidebarItem.level-1 .text,
-.VPSidebarItem.level-2 .text,
-.VPSidebarItem.level-3 .text,
-.VPSidebarItem.level-4 .text,
-.VPSidebarItem.level-5 .text {
+.VPSidebarItem:not(.level-0) .text {
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
-.VPSidebarItem.level-0.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-1.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-2.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-3.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-4.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-5.is-link > .item > .link:hover .text {
+.VPSidebarItem.is-link > .item > .link:hover .text {
   color: var(--vp-c-brand-1);
 }
 
-.VPSidebarItem.level-0.has-active > .item > .text,
-.VPSidebarItem.level-1.has-active > .item > .text,
-.VPSidebarItem.level-2.has-active > .item > .text,
-.VPSidebarItem.level-3.has-active > .item > .text,
-.VPSidebarItem.level-4.has-active > .item > .text,
-.VPSidebarItem.level-5.has-active > .item > .text,
-.VPSidebarItem.level-0.has-active > .item > .link > .text,
-.VPSidebarItem.level-1.has-active > .item > .link > .text,
-.VPSidebarItem.level-2.has-active > .item > .link > .text,
-.VPSidebarItem.level-3.has-active > .item > .link > .text,
-.VPSidebarItem.level-4.has-active > .item > .link > .text,
-.VPSidebarItem.level-5.has-active > .item > .link > .text {
+.VPSidebarItem.has-active > .item > .text,
+.VPSidebarItem.has-active > .item > .link > .text {
   color: var(--vp-c-text-1);
 }
 
-.VPSidebarItem.level-0.is-active > .item .link > .text,
-.VPSidebarItem.level-1.is-active > .item .link > .text,
-.VPSidebarItem.level-2.is-active > .item .link > .text,
-.VPSidebarItem.level-3.is-active > .item .link > .text,
-.VPSidebarItem.level-4.is-active > .item .link > .text,
-.VPSidebarItem.level-5.is-active > .item .link > .text {
+.VPSidebarItem.is-active > .item .link > .text {
   color: var(--vp-c-brand-1);
 }
 
@@ -236,11 +207,7 @@ function onCaretClick() {
   transform: rotate(0)/*rtl:rotate(180deg)*/;
 }
 
-.VPSidebarItem.level-1 .items,
-.VPSidebarItem.level-2 .items,
-.VPSidebarItem.level-3 .items,
-.VPSidebarItem.level-4 .items,
-.VPSidebarItem.level-5 .items {
+.VPSidebarItem:not(.level-0) .items {
   border-left: 1px solid var(--vp-c-divider);
   padding-left: 16px;
 }