Сайдбар

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

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Руководство',
        items: [
          { text: 'Введение', link: '/ru/introduction' },
          { text: 'Первые шаги', link: '/ru/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: [
          // Ссылка на страницу `/ru/guide/index.md`
          { text: 'Введение', link: '/ru/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: 'Index', link: '/guide/' },
            { text: 'One', link: '/guide/one' },
            { text: 'Two', link: '/guide/two' }
          ]
        }
      ],

      // Эта боковая панель отображается, когда пользователь находится в директории `config`
      '/config/': [
        {
          text: 'Настройка',
          items: [
            { text: 'Index', link: '/config/' },
            { text: 'Three', link: '/config/three' },
            { text: 'Four', link: '/config/four' }
          ]
        }
      ]
    }
  }
}

Сворачиваемые группы

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

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

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

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

Префикс пути

Если структура вашей документации содержит глубоко вложенные каталоги или группы, расположенные в одном подкаталоге, вы можете использовать параметр base, чтобы автоматически добавлять префикс пути ко всем вложенным элементам items внутри этой группы. Это избавляет от необходимости повторять один и тот же префикс пути для каждого link.

Параметр base поддерживается как в конфигурациях с несколькими боковыми панелями, так и во вложенных группах боковой панели.

В нескольких боковых панелях

Вы можете определить base в корне конфигурации раздела боковой панели:

export default {
  themeConfig: {
    sidebar: {
      '/guide/': {
        base: '/guide/',
        items: [
          // Эта ссылка будет разрешена в `/guide/introduction`
          { text: 'Введение', link: 'introduction' },
          // Эта ссылка будет разрешена в `/guide/getting-started`
          { text: 'Первые шаги', link: 'getting-started' }
        ]
      }
    }
  }
}

Во вложенных группах

Параметр base также можно использовать во вложенных группах боковой панели. Он применяется к непосредственным дочерним элементам этой группы:

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Справочник',
        base: '/reference/',
        items: [
          // Эта ссылка будет разрешена в `/reference/site-config`
          { text: 'Конфигурация сайта', link: 'site-config' },
          {
            text: 'Тема по умолчанию',
            // Вложенный `base` переопределяет префикс пути родительской группы
            base: '/reference/default-theme-',
            items: [
              // Эта ссылка будет разрешена в `/reference/default-theme-nav`
              { text: 'Навигация', link: 'nav' },
              // Эта ссылка будет разрешена в `/reference/default-theme-sidebar`
              { text: 'Сайдбар', link: 'sidebar' }
            ]
          }
        ]
      }
    ]
  }
}