Навигационная Панель

Навигационная панель отображается в верхней части страницы. Она содержит название сайта, глобальные ссылки меню и т.д.

Название Сайта и Логотип

По умолчанию, навигационная панель показывает название сайта, ссылаясь на значение config.title. Если вы хотите изменить то, что отображается в навигационной панели, вы можете определить пользовательский текст в опции themeConfig.siteTitle.

export default {
  themeConfig: {
    siteTitle: 'Моё Пользовательское Название'
  }
}

Если у вашего сайта есть логотип, вы можете отобразить его, передав путь к изображению. Логотип следует разместить в директории public и определить абсолютный путь к нему.

export default {
  themeConfig: {
    logo: '/my-logo.svg'
  }
}

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

export default {
  themeConfig: {
    logo: '/my-logo.svg',
    siteTitle: false
  }
}

Вы также можете передать объект в качестве логотипа, если хотите добавить атрибут alt или настроить его в зависимости от темной/светлой темы. Смотрите themeConfig.logo для деталей.

Ссылки Навигации

Вы можете определить опцию themeConfig.nav, чтобы добавить ссылки в вашу навигационную панель.

export default {
  themeConfig: {
    nav: [
      { text: 'Руководство', link: '/guide' },
      { text: 'Конфигурация', link: '/config' },
      { text: 'Список изменений', link: 'https://github.com/...' }
    ]
  }
}

text - это текст, отображаемый в навигационной панели, а link - это ссылка, по которой будет выполнен переход при нажатии на текст. Для ссылки укажите путь к фактическому файлу без префикса .md и всегда начинайте с /.

Ссылки навигации также могут быть выпадающими меню. Для этого установите ключ items в опции ссылки.

export default {
  themeConfig: {
    nav: [
      { text: 'Руководство', link: '/guide' },
      {
        text: 'Выпадающее Меню',
        items: [
          { text: 'Пункт A', link: '/item-1' },
          { text: 'Пункт B', link: '/item-2' },
          { text: 'Пункт C', link: '/item-3' }
        ]
      }
    ]
  }
}

Обратите внимание, что заголовок выпадающего меню (Выпадающее Меню в приведенном выше примере) не может иметь свойство link, поскольку он становится кнопкой для открытия диалогового окна выпадающего меню.

Вы можете добавить "секции" к пунктам выпадающего меню, передав более вложенные пункты.

export default {
  themeConfig: {
    nav: [
      { text: 'Руководство', link: '/guide' },
      {
        text: 'Выпадающее Меню',
        items: [
          {
            // Заголовок для секции.
            text: 'Секция A Заголовок',
            items: [
              { text: 'Секция A Пункт A', link: '...' },
              { text: 'Секция B Пункт B', link: '...' }
            ]
          }
        ]
      },
      {
        text: 'Выпадающее Меню',
        items: [
          {
            // Вы также можете опустить заголовок.
            items: [
              { text: 'Секция A Пункт A', link: '...' },
              { text: 'Секция B Пункт B', link: '...' }
            ]
          }
        ]
      }
    ]
  }
}

Настройка "активного" состояния ссылки

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

export default {
  themeConfig: {
    nav: [
      // Эта ссылка получает активное состояние, когда пользователь
      // находится на пути `/config/`.
      {
        text: 'Руководство',
        link: '/guide',
        activeMatch: '/config/'
      }
    ]
  }
}

WARNING

activeMatch должно быть строкой регулярного выражения, но вы должны определить его как строку. Мы не можем использовать фактический объект RegExp здесь, потому что он не сериализуем во время сборки.

Настройка атрибутов "target" и "rel" ссылки

По умолчанию, VitePress автоматически определяет атрибуты target и rel на основе того, является ли ссылка внешней.

Но если вы хотите, вы также можете настроить их.

export default {
  themeConfig: {
    nav: [
      {
        text: 'Товары',
        link: 'https://www.thegithubshop.com/',
        target: '_self',
        rel: 'sponsored'
      }
    ]
  }
}

Социальные Ссылки

Смотрите socialLinks.