Учебник VuePress

# Боковая панель

Для добавления боковой панели используйте themeConfig.sidebar. Базовая конфигурация ожидает массив ссылок:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: [
      '/',
      '/page-a',
      ['/page-b', 'Явно заданный текст ссылки'],
      {
        title: 'Posts about...',
        children: [
          '/posts/post_intro/',
          '/posts/post_main/',
          '/posts/post_next/',
        ]
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Вы можете опускать расширение .md, и пути заканчивающиеся на / будут указывать на */README.md. Текст для ссылки автоматически подставляется (либо из первого заголовка на странице, либо в явно указанном свойстве title в секции YAML front matter). Если вы хотите явно указать текст ссылки, используйте массив в формате [ссылка, текст].

# Вложенность ссылок заголовков

Боковая панель автоматически отображает ссылки для заголовков текущей активной страницы, вложенные под ссылкой самой страницы. Вы можете настроить это поведение с помощью themeConfig.sidebarDepth. По умолчанию глубина 1, которая извлекает заголовки h2. Установка её в значение 0 отключает ссылки заголовков, а максимальное значение 2 будет извлекать заголовки h2 и h3.

Страница также может переопределять это значение в секции YAML front matter:

---
sidebarDepth: 3
---
1
2
3

# Активность ссылок заголовков

По умолчанию, вложенные ссылки заголовков и хэш URL обновляются по мере прокрутки страницы пользователем к другим секциям страницы. Это поведение можно отключить опцией:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    activeHeaderLinks: false, // По умолчанию: true
  }
}
1
2
3
4
5
6

ПРИМЕЧАНИЕ

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

# Группировка в боковой панели

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

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'Группа 1',
        collapsable: false,
        children: [
          '/'
        ]
      },
      {
        title: 'Группа 2',
        children: [ /* ... */ ]
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Группы в боковой панели по умолчанию свёрнуты. Вы можете заставить группу всегда показываться в развёрнутом виде с помощью опции collapsable: false.

# Несколько боковых панелей

Если вы хотите отображать несколько боковых панелей для различных секций контента, сначала организуйте ваши страницы по каталогам для каждой желаемой секции:

docs
├─ .vuepress
│   └─ config.js
├─ README.md
├─ contact.md
├─ about.md
├─ foo/
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar/
   ├─ README.md
   ├─ three.md
   └─ four.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: {
      '/foo/': [
        '',     /* /foo/ */
        'one',  /* /foo/one.html */
        'two'   /* /foo/two.html */
      ],

      '/bar/': [
        '',      /* /bar/ */
        'three', /* /bar/three.html */
        'four'   /* /bar/four.html */
      ],

      // fallback
      '/': [
        '',        /* / */
        'contact', /* /contact.html */
        'about'    /* /about.html */
      ]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

ВНИМАНИЕ

Убедитесь что указали fallback в конце конфигурации.

VuePress проверяет конфигурацию каждой боковой панели сверху вниз. Если fallback конфигурация будет первой, VuePress будет некорректно сопоставлять /foo/ или /bar/four.html, потому что в обоих случаях они начинаются с /.

# Автоматическая боковая панель для простых страниц

Если вы хотите автоматически генерировать боковую панель, которая содержит только ссылки заголовков текущей страницы, вы можете использовать YAML front matter на этой странице:

---
sidebar: auto
---
1
2
3

Вы также можете включить её для всех страниц в файле конфигурации:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: 'auto'
  }
}
1
2
3
4
5
6

При наличии интернационализации, вы также можете указать опцию для конкретной локализации:

// .vuepress/config.js
module.exports = {
  themeConfig: {
     '/': {
       sidebar: 'auto'
     }
  }
}
1
2
3
4
5
6
7
8

# Отключение боковой панели

Вы можете отключить боковую панель на некоторых страницах, указав в YAML front matter:

---
sidebar: false
---
1
2
3

← 10 Интернационализация →