Настройка темы по умолчанию
Конфигурация темы позволяет настроить её под себя. Вы можете настроить тему с помощью опции themeConfig
в файле конфигурации:
export default {
lang: 'ru-RU',
title: 'VitePress',
description: 'Генератор статического сайта на базе Vite и Vue.',
// Конфигурации, связанные с темой.
themeConfig: {
logo: '/logo.svg',
nav: [...],
sidebar: { ... }
}
}
Параметры, описанные на этой странице, применимы только к теме по умолчанию. Разные темы предполагают разные конфигурации темы. При использовании пользовательской темы объект конфигурации темы будет передан теме, чтобы она могла определить условное поведение на его основе.
i18nRouting
- Тип:
boolean
При смене локали на ru
URL изменится с /foo
(или /en/foo/
) на /ru/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
в конфигурации приложения) в nav. При установке значения false
заголовок в панели навигации будет отключен. Пригодится, если у вас есть logo
, который уже содержит текст названия сайта.
export default {
themeConfig: {
siteTitle: 'Привет, мир'
}
}
nav
- Тип:
NavItem
Конфигурация для пункта навигационного меню. Подробнее в главе Тема по умолчанию: Навигация.
export default {
themeConfig: {
nav: [
{ text: 'Руководство', link: '/guide' },
{
text: 'Выпадающее меню',
items: [
{ text: 'Пункт A', link: '/item-1' },
{ text: 'Пункт B', link: '/item-2' },
{ text: 'Пункт C', link: '/item-3' }
]
}
]
}
}
type NavItem = NavItemWithLink | NavItemWithChildren
interface NavItemWithLink {
text: string
link: string
activeMatch?: string
target?: string
rel?: string
noIcon?: boolean
}
interface NavItemChildren {
text?: string
items: NavItemWithLink[]
}
interface NavItemWithChildren {
text?: string
items: (NavItemChildren | NavItemWithLink)[]
activeMatch?: string
}
sidebar
- Тип:
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
- Можно переопределить для каждой страницы с помощью метаданных
Установка этого значения в false
предотвращает отрисовку контейнера сайдбара.
Установка этого значения в true
приведёт к отображению сайдбара справа.
Установка этого значения в left
приведёт к отображению сайдбара слева.
Если вы хотите отключить его для всех режимов просмотра, используйте aside: false
.
outline
- Тип:
Outline | Outline['level'] | false
- Уровень можно переопределить для каждой страницы с помощью метаданных
Установка этого значения в 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
- Тип:
Footer
- Можно переопределить для каждой страницы с помощью метаданных
Настройка подвала. Вы можете разместить в подвале сообщение или текст об авторских правах, однако он будет отображаться только в том случае, если страница не содержит боковой панели. Это объясняется соображениями дизайна.
export default {
themeConfig: {
footer: {
message: 'Опубликовано под лицензией MIT.',
copyright: '© 2019 – настоящее время, Эван Ю'
}
}
}
export interface Footer {
message?: string
copyright?: string
}
editLink
- Тип:
EditLink
- Можно переопределить для каждой страницы с помощью метаданных
Ссылка для редактирования позволяет отобразить ссылку для редактирования страницы на сервисах управления 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 'Last updated'
*/
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: 'код-рекламы',
placement: 'место-размещения-рекламы'
}
}
}
export interface CarbonAdsOptions {
code: string
placement: string
}
Подробнее в главе Тема по умолчанию: Carbon Ads
docFooter
- Тип:
DocFooter
Можно использовать для настройки текста, отображаемого над ссылками на предыдущую и следующую страницы. Полезно, если вы не пишете документы только на английском языке. Также можно использовать для глобального отключения подобных ссылок. Если вы хотите выборочно включить/выключить эти ссылки на отдельной странице, воспользуйтесь метаданными.
export default {
themeConfig: {
docFooter: {
prev: 'Предыдущая страница',
next: 'Следующая страница'
}
}
}
export interface DocFooter {
prev?: string | false
next?: string | false
}
darkModeSwitchLabel
- Тип:
string
- По умолчанию:
Appearance
Можно использовать для настройки надписи переключателя тёмного режима. Этот ярлык отображается только в мобильном представлении.
lightModeSwitchTitle
- Тип:
string
- По умолчанию:
Switch to light theme
Может использоваться для настройки заголовка переключателя светлого режима, который появляется при наведении курсора.
darkModeSwitchTitle
- Тип:
string
- По умолчанию:
Switch to dark theme
Можно использовать для настройки заголовка переключателя тёмного режима, который появляется при наведении курсора.
sidebarMenuLabel
- Тип:
string
- По умолчанию:
Menu
Может использоваться для настройки метки бокового меню. Эта метка отображается только в мобильном представлении.
returnToTopLabel
- Тип:
string
- По умолчанию:
Return to top
Может использоваться для настройки метки кнопки возврата наверх. Эта метка отображается только в мобильном представлении.
langMenuLabel
- Тип:
string
- По умолчанию:
Change language
Можно использовать для настройки aria-метки кнопки переключения языка в панели навигации. Это используется только в том случае, если вы используете i18n.
externalLinkIcon
- Тип:
boolean
- По умолчанию:
false
Отображать ли значок внешней ссылки рядом с внешними ссылками в Markdown.