介绍

在多级侧边栏中，菜单显示时每一层都有缩进。但是，默认情况下，VitePress 从第二层开始缩进——directory-level-2 是 directory-level-1 的子文件，但视觉上似乎位于同一层级。

这不是 VitePress 侧边栏的问题，因此要修复它，您需要通过 VitePress 的自定义 CSS 自定义现有主题的样式。

在目录中创建一个目录，以覆盖现有样式所需的样式。然后，在目录中，创建一个文件（如果您使用的是 Typescript，请使用 而不是 ）和一个文件。

theme .vitepress theme index.js index.ts index.js custom.css

/
├─ package.json
├─ src/
├─ docs/
│  ├─ .vitepress/
│  │  └─ theme/            <------------ Add this
│  │     ├─ custom.css     <------------ Add this
│  │     └─ index.js       <------------ Add this
│  ├─ example.md
│  └─ index.md
└─ ...

然后将以下内容添加到文件中：index.js

import DefaultTheme from 'vitepress/theme';
import './custom.css';

export default DefaultTheme;

接下来，将以下内容添加到文件中：custom.css

.group:has([role='button']) .VPSidebarItem.level-0 .items {
  padding-left: 16px !important;
  border-left: 1px solid var(--vp-c-divider);
  border-radius: 2px;
  transition: background-color 0.25s;
}

现在启动 VitePress 服务器。这样可以更轻松地查看子内容所在的组的第一级的层次结构。

需要注意的是，您在此处看到的垂直分隔线仅使用 CSS 创建;它应该是使用名为 的 CSS 类创建的，因此您应该知道，将来构建动态页面时可能不会选择垂直分隔线。div indicator