Боковая Панель

Боковая панель является основным блоком навигации для вашей документации. Вы можете настроить меню боковой панели в themeConfig.sidebar.

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Руководство',
        items: [
          { text: 'Введение', link: '/introduction' },
          { text: 'Начало работы', link: '/getting-started' },
          ...
        ]
      }
    ]
  }
}

Основы

Самая простая форма меню боковой панели - это передача одного массива ссылок. Элемент первого уровня определяет "секцию" для боковой панели. Он должен содержать text, который является заголовком секции, и items, которые являются фактическими навигационными ссылками.

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Заголовок Секции A',
        items: [
          { text: 'Пункт A', link: '/item-a' },
          { text: 'Пункт B', link: '/item-b' },
          ...
        ]
      },
      {
        text: 'Заголовок Секции B',
        items: [
          { text: 'Пункт C', link: '/item-c' },
          { text: 'Пункт D', link: '/item-d' },
          ...
        ]
      }
    ]
  }
}

Каждая link должна указывать путь к фактическому файлу, начиная с /. Если вы добавите слэш в конце ссылки, это покажет страницу index.md соответствующего каталога.

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Руководство',
        items: [
          // Это покажет страницу `/guide/index.md`.
          { text: 'Введение', link: '/guide/' }
        ]
      }
    ]
  }
}

Вы можете дополнительно вложить элементы боковой панели до 6 уровней глубины, начиная с корневого уровня. Обратите внимание, что элементы, вложенные глубже 6 уровня, будут игнорироваться и не будут отображаться на боковой панели.

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Уровень 1',
        items: [
          {
            text: 'Уровень 2',
            items: [
              {
                text: 'Уровень 3',
                items: [
                  ...
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Несколько Боковых Панелей

Вы можете отображать разные боковые панели в зависимости от пути страницы. Например, как показано на этом сайте, вы можете создать отдельные разделы контента в вашей документации, такие как страница "Руководство" и страница "Конфигурация".

Для этого сначала организуйте свои страницы в каталоги для каждого желаемого раздела:

.
├─ guide/
│  ├─ index.md
│  ├─ one.md
│  └─ two.md
└─ config/
   ├─ index.md
   ├─ three.md
   └─ four.md

Затем обновите вашу конфигурацию, чтобы определить вашу боковую панель для каждого раздела. На этот раз вам следует передать объект вместо массива.

export default {
  themeConfig: {
    sidebar: {
      // Эта боковая панель отображается, когда пользователь
      // находится в каталоге `guide`.
      '/guide/': [
        {
          text: 'Руководство',
          items: [
            { text: 'Индекс', link: '/guide/' },
            { text: 'Один', link: '/guide/one' },
            { text: 'Два', link: '/guide/two' }
          ]
        }
      ],

      // Эта боковая панель отображается, когда пользователь
      // находится в каталоге `config`.
      '/config/': [
        {
          text: 'Конфигурация',
          items: [
            { text: 'Индекс', link: '/config/' },
            { text: 'Три', link: '/config/three' },
            { text: 'Четыре', link: '/config/four' }
          ]
        }
      ]
    }
  }
}

Сворачиваемые Группы Боковой Панели

Добавив опцию collapsed к группе боковой панели, она покажет кнопку переключения для скрытия/показ

а каждого раздела.

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Заголовок Секции A',
        collapsed: false,
        items: [...]
      }
    ]
  }
}

Все разделы по умолчанию "открыты". Если вы хотите, чтобы они были "закрыты" при первой загрузке страницы, установите опцию collapsed в true.

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Заголовок Секции A',
        collapsed: true,
        items: [...]
      }
    ]
  }
}

useSidebar composable

Возвращает данные, связанные с боковой панелью. Возвращаемый объект имеет следующий тип:

export interface DocSidebar {
  isOpen: Ref<boolean>
  sidebar: ComputedRef<DefaultTheme.SidebarItem[]>
  sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
  hasSidebar: ComputedRef<boolean>
  hasAside: ComputedRef<boolean>
  leftAside: ComputedRef<boolean>
  isSidebarEnabled: ComputedRef<boolean>
  open: () => void
  close: () => void
  toggle: () => void
}

Пример:

<script setup>
import { useSidebar } from 'vitepress/theme'

const { hasSidebar } = useSidebar()
</script>

<template>
  <div v-if="hasSidebar">Показать только когда есть боковая панель</div>
</template>