Конфигурация Темы По Умолчанию

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

export default {
  lang: 'en-US',
  title: 'VitePress',
  description: 'Генератор статических сайтов на Vite & Vue.',

  // Конфигурации, связанные с темой.
  themeConfig: {
    logo: '/logo.svg',
    nav: [...],
    sidebar: { ... }
  }
}

Опции, описанные на этой странице, применимы только к теме по умолчанию. Разные темы могут ожидать различную конфигурацию темы. При использовании пользовательской темы объект конфигурации темы будет передан теме, так что тема может определить условное поведение на его основе.

i18nRouting

Тип: boolean

Изменение локали, например, на zh, изменит URL с /foo (или /en/foo/) на /zh/foo. Вы можете отключить это поведение, установив themeConfig.i18nRouting в false.

logo

Тип: ThemeableImage

Файл логотипа для отображения в навигационной панели, перед названием сайта. Принимает строку пути или объект для установки разных логотипов для светлой/темной темы.

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

type ThemeableImage =
  | string
  | { src: string; alt?: string }
  | { light: string; dark: string; alt?: string }

siteTitle

Тип: string | false

Вы можете настроить этот элемент, чтобы заменить название сайта по умолчанию (title в конфигурации приложения) в навигации. Если установлено значение false, название в навигации будет отключено. Полезно, когда у вас есть logo, которое уже содержит текст названия сайта.

export default {
  themeConfig: {
    siteTitle: 'Привет Мир'
  }
}

nav

Тип: NavItem

Конфигурация для элемента меню навигации. Подробнее в Тема По Умолчанию: Навигация.

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

type NavItem = NavItemWithLink | NavItemWithChildren

interface NavItemWithLink {
  text: string
  link: string
  activeMatch?: string
  target?: string
  rel?: string
}

interface NavItemChildren {
  text?: string
  items: NavItemWithLink[]
}

interface NavItemWithChildren {
  text?: string
  items: (NavItemChildren | NavItemWithLink)[]
  activeMatch?: string
}

Тип: Sidebar

Конфигурация для элемента меню боковой панели. Подробнее в Тема По Умолчанию: Боковая Панель.

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

export type Sidebar = SidebarItem[] | SidebarMulti

export interface SidebarMulti {
  [path: string]: SidebarItem[]
}

export type SidebarItem = {
  /**
   * Текстовая метка элемента.
   */
  text?: string

  /**
   * Ссылка элемента.
   */
  link?: string

  /**
   * Дочерние элементы.
   */
  items?: SidebarItem[]

  /**
   * Если не указано, группа не сворачивается.
   *
   * Если `true`, группа сворачивается и свернута по умолчанию
   *
   * Если `false`, группа сворачивается, но раскрыта по умолчанию
   */
  collapsed?: boolean
}

aside

Тип: boolean | 'left'
По умолчанию: true
Может быть переопределено на странице через frontmatter

Установка этого значения в false предотвращает отображение контейнера сайдбара.
Установка этого значения в true отображает сайдбар справа.
Установка этого значения в left отображает сайдбар слева.

Если вы хотите отключить его для всех видов, вы должны использовать outline: false.

outline

Тип: Outline | Outline['level'] | false
Уровень может быть переопределен на странице через frontmatter

Установка этого значения в false предотвращает отображение контейнера с оглавлением. Смотрите этот интерфейс для более подробной информации:

interface Outline {
  /**
   * Уровни заголовков, которые будут отображаться в оглавлении.
   * Одно число означает, что будут отображаться только заголовки этого уров

ня.
   * Если передан кортеж, первое число - минимальный уровень, а второе - максимальный уровень.
   * `'deep'` то же самое, что и `[2, 6]`, что означает, что будут отображаться все заголовки от `<h2>` до `<h6>`.
   *
   * @default 2
   */
  level?: number | [number, number] | 'deep'

  /**
   * Заголовок, который будет отображаться в оглавлении.
   *
   * @default 'На этой странице'
   */
  label?: string
}

socialLinks

Тип: SocialLink[]

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

export default {
  themeConfig: {
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
      { icon: 'twitter', link: '...' },
      // Вы также можете добавить пользовательские иконки, передав SVG в виде строки:
      {
        icon: {
          svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>'
        },
        link: '...',
        // Вы также можете включить пользовательскую метку для доступности (необязательно, но рекомендуется):
        ariaLabel: 'крутая ссылка'
      }
    ]
  }
}

interface SocialLink {
  icon: SocialLinkIcon
  link: string
  ariaLabel?: string
}

type SocialLinkIcon =
  | 'discord'
  | 'facebook'
  | 'github'
  | 'instagram'
  | 'linkedin'
  | 'mastodon'
  | 'npm'
  | 'slack'
  | 'twitter'
  | 'x'
  | 'youtube'
  | { svg: string }

Тип: Footer
Может быть переопределено на странице через frontmatter

Конфигурация нижнего колонтитула. Вы можете добавить сообщение или текст авторских прав в нижний колонтитул, однако он будет отображаться только в том случае, если страница не содержит боковой панели. Это связано с дизайнерскими соображениями.

export default {
  themeConfig: {
    footer: {
      message: 'Выпущено под лицензией MIT.',
      copyright: 'Copyright © 2019-present Evan You'
    }
  }
}

export interface Footer {
  message?: string
  copyright?: string
}

editLink

Тип: EditLink
Может быть переопределено на странице через frontmatter

Ссылка на редактирование позволяет отображать ссылку для редактирования страницы на сервисах управления Git, таких как GitHub или GitLab. Смотрите Тема По Умолчанию: Ссылка На Редактирование для более подробной информации.

export default {
  themeConfig: {
    editLink: {
      pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
      text: 'Редактировать эту страницу на GitHub'
    }
  }
}

export interface EditLink {
  pattern: string
  text?: string
}

lastUpdated

Тип: LastUpdatedOptions

Позволяет настроить текст и формат даты последнего обновления.

export default {
  themeConfig: {
    lastUpdated: {
      text: 'Обновлено',
      formatOptions: {
        dateStyle: 'full',
        timeStyle: 'medium'
      }
    }
  }
}

export interface LastUpdatedOptions {
  /**
   * @default 'Последнее обновление'
   */
  text?: string

  /**
   * @default
   * { dateStyle: 'short',  timeStyle: 'short' }
   */
  formatOptions?: Intl.DateTimeFormatOptions & { forceLocale?: boolean }
}

algolia

Тип: AlgoliaSearch

Опция для поддержки поиска на вашем сайте документации с использованием Algolia DocSearch. Узнайте больше в Тема По Умолчанию: Поиск

export interface AlgoliaSearchOptions extends DocSearchProps {
  locales?: Record<string, Partial<DocSearchProps>>
}

Полные опции смотрите здесь.

carbonAds

Тип: CarbonAdsOptions

Опция для отображения Carbon Ads.

export default {
  themeConfig: {
    carbonAds: {
      code: 'ваш-carbon-код',
      placement: 'ваш-carbon-размещение'
    }
  }
}

export interface CarbonAdsOptions {
  code: string
  placement: string
}

Узнайте больше в Тема По Умолчанию: Carbon Ads

docFooter

Тип: DocFooter

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

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

export default {
  themeConfig: {
    docFooter: {
      prev: 'Предыдущая страница',
      next: 'Следующая страница'
    }
  }
}

export interface DocFooter {
  prev?: string | false
  next?: string | false
}

darkModeSwitchLabel

Тип: string
По умолчанию: Внешний вид

Может использоваться для настройки метки переключателя темной темы. Эта метка отображается только в мобильном представлении.

lightModeSwitchTitle

Тип: string
По умолчанию: Переключиться на светлую тему

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

darkModeSwitchTitle

Тип: string
По умолчанию: Переключиться на темную тему

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

sidebarMenuLabel

Тип: string
По умолчанию: Меню

Может использоваться для настройки метки меню боковой панели. Эта метка отображается только в мобильном представлении.

returnToTopLabel

Тип: string
По умолчанию: Вернуться наверх

Может использоваться для настройки метки кнопки возврата наверх. Эта метка отображается только в мобильном представлении.

langMenuLabel

Тип: string
По умолчанию: Сменить язык

Может использоваться для настройки aria-label кнопки переключения языка в навигационной панели. Это используется только если вы используете i18n.

externalLinkIcon

Тип: boolean
По умолчанию: false

Показывать ли иконку внешней ссылки рядом с внешними ссылками в markdown.

Конфигурация Темы По Умолчанию ​

i18nRouting ​

logo ​

siteTitle ​

nav ​

sidebar ​

aside ​

outline ​

socialLinks ​

footer ​

editLink ​

lastUpdated ​

algolia ​

carbonAds ​

docFooter ​

darkModeSwitchLabel ​

lightModeSwitchTitle ​

darkModeSwitchTitle ​

sidebarMenuLabel ​

returnToTopLabel ​

langMenuLabel ​

externalLinkIcon ​