|
|
# Настройка темы по умолчанию {#default-theme-config}
|
|
|
|
|
|
Конфигурация темы позволяет настроить её под себя. Вы можете настроить тему с помощью опции `themeConfig` в файле конфигурации:
|
|
|
|
|
|
```ts
|
|
|
export default {
|
|
|
lang: 'ru-RU',
|
|
|
title: 'VitePress',
|
|
|
description: 'Генератор статического сайта на базе Vite и Vue.',
|
|
|
|
|
|
// Конфигурации, связанные с темой.
|
|
|
themeConfig: {
|
|
|
logo: '/logo.svg',
|
|
|
nav: [...],
|
|
|
sidebar: { ... }
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Параметры, описанные на этой странице, применимы только к теме по умолчанию.** Разные темы предполагают разные конфигурации темы. При использовании пользовательской темы объект конфигурации темы будет передан теме, чтобы она могла определить условное поведение на его основе.
|
|
|
|
|
|
## i18nRouting {#i18nrouting}
|
|
|
|
|
|
- Тип: `boolean`
|
|
|
|
|
|
При смене локали на `ru` URL изменится с `/foo` (или `/en/foo/`) на `/ru/foo`. Вы можете отключить это поведение, установив для параметра `themeConfig.i18nRouting` значение `false`.
|
|
|
|
|
|
## logo {#logo}
|
|
|
|
|
|
- Тип: `ThemeableImage`
|
|
|
|
|
|
Файл логотипа для отображения в навигационной панели, прямо перед заголовком сайта. Принимает строку пути или объект, чтобы установить другой логотип для светлого/тёмного режима.
|
|
|
|
|
|
```ts
|
|
|
export default {
|
|
|
themeConfig: {
|
|
|
logo: '/logo.svg'
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
type ThemeableImage =
|
|
|
| string
|
|
|
| { src: string; alt?: string }
|
|
|
| { light: string; dark: string; alt?: string }
|
|
|
```
|
|
|
|
|
|
## siteTitle {#sitetitle}
|
|
|
|
|
|
- Тип: `string | false`
|
|
|
|
|
|
Вы можете настроить этот элемент для замены стандартного заголовка сайта (`title` в конфигурации приложения) в nav. При установке значения `false` заголовок в панели навигации будет отключен. Пригодится, если у вас есть `logo`, который уже содержит текст названия сайта.
|
|
|
|
|
|
```ts
|
|
|
export default {
|
|
|
themeConfig: {
|
|
|
siteTitle: 'Привет, мир'
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## nav {#nav}
|
|
|
|
|
|
- Тип: `NavItem`
|
|
|
|
|
|
Конфигурация для пункта навигационного меню. Подробнее в главе [Тема по умолчанию: Навигация](./default-theme-nav#navigation-links).
|
|
|
|
|
|
```ts
|
|
|
export default {
|
|
|
themeConfig: {
|
|
|
nav: [
|
|
|
{ text: 'Руководство', link: '/guide' },
|
|
|
{
|
|
|
text: 'Выпадающее меню',
|
|
|
items: [
|
|
|
{ text: 'Пункт A', link: '/item-1' },
|
|
|
{ text: 'Пункт B', link: '/item-2' },
|
|
|
{ text: 'Пункт C', link: '/item-3' }
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
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}
|
|
|
|
|
|
- Тип: `Sidebar`
|
|
|
|
|
|
Конфигурация для пунктов меню боковой панели. Подробнее в главе [Тема по умолчанию: Сайдбар](./default-theme-sidebar).
|
|
|
|
|
|
```ts
|
|
|
export default {
|
|
|
themeConfig: {
|
|
|
sidebar: [
|
|
|
{
|
|
|
text: 'Руководство',
|
|
|
items: [
|
|
|
{ text: 'Введение', link: '/introduction' },
|
|
|
{ text: 'Первые шаги', link: '/getting-started' },
|
|
|
...
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
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 {#aside}
|
|
|
|
|
|
- Тип: `boolean | 'left'`
|
|
|
- По умолчанию: `true`
|
|
|
- Можно переопределить для каждой страницы с помощью [метаданных](./frontmatter-config#aside)
|
|
|
|
|
|
Установка этого значения в `false` предотвращает отрисовку контейнера сайдбара.\
|
|
|
Установка этого значения в `true` приведёт к отображению сайдбара справа.\
|
|
|
Установка этого значения в `left` приведёт к отображению сайдбара слева.
|
|
|
|
|
|
Если вы хотите отключить его для всех режимов просмотра, используйте `aside: false`.
|
|
|
|
|
|
## outline {#outline}
|
|
|
|
|
|
- Тип: `Outline | Outline['level'] | false`
|
|
|
- Уровень можно переопределить для каждой страницы с помощью [метаданных](./frontmatter-config#outline)
|
|
|
|
|
|
Установка этого значения в `false` предотвращает отрисовку оглавления. Для получения более подробной информации обратитесь к этому интерфейсу:
|
|
|
|
|
|
```ts
|
|
|
interface Outline {
|
|
|
/**
|
|
|
* Уровни заголовков, которые будут отображаться в оглавлении.
|
|
|
* Одиночное число означает, что будут отображаться только заголовки этого уровня.
|
|
|
* Если передается кортеж, то первое число — это минимальный уровень, а второе — максимальный.
|
|
|
* `'deep'` то же самое, что `[2, 6]`, что означает, что будут отображены все заголовки от `<h2>` до `<h6>`.
|
|
|
*
|
|
|
* @default 2
|
|
|
*/
|
|
|
level?: number | [number, number] | 'deep'
|
|
|
|
|
|
/**
|
|
|
* Заголовок, который будет отображаться в оглавлении.
|
|
|
*
|
|
|
* @default 'На этой странице'
|
|
|
*/
|
|
|
label?: string
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## socialLinks {#sociallinks}
|
|
|
|
|
|
- Тип: `SocialLink[]`
|
|
|
|
|
|
Вы можете задать эту опцию, чтобы показывать ссылки на ваши социальные аккаунты с помощью иконок в панели навигации.
|
|
|
|
|
|
```ts
|
|
|
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: 'классная ссылка'
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
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}
|
|
|
|
|
|
- Тип: `Footer`
|
|
|
- Можно переопределить для каждой страницы с помощью [метаданных](./frontmatter-config#footer)
|
|
|
|
|
|
Настройка подвала. Вы можете разместить в подвале сообщение или текст об авторских правах, однако он будет отображаться только в том случае, если страница не содержит боковой панели. Это объясняется соображениями дизайна.
|
|
|
|
|
|
```ts
|
|
|
export default {
|
|
|
themeConfig: {
|
|
|
footer: {
|
|
|
message: 'Опубликовано под лицензией MIT.',
|
|
|
copyright: '© 2019 – настоящее время, Эван Ю'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
export interface Footer {
|
|
|
message?: string
|
|
|
copyright?: string
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## editLink {#editlink}
|
|
|
|
|
|
- Тип: `EditLink`
|
|
|
- Можно переопределить для каждой страницы с помощью [метаданных](./frontmatter-config#editlink)
|
|
|
|
|
|
Ссылка для редактирования позволяет отобразить ссылку для редактирования страницы на сервисах управления Git, таких как GitHub или GitLab. См. секцию [Тема по умолчанию: Ссылка для редактирования](./default-theme-edit-link) для получения более подробной информации.
|
|
|
|
|
|
```ts
|
|
|
export default {
|
|
|
themeConfig: {
|
|
|
editLink: {
|
|
|
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
|
|
|
text: 'Редактировать эту страницу на GitHub'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
export interface EditLink {
|
|
|
pattern: string
|
|
|
text?: string
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## lastUpdated {#lastupdated}
|
|
|
|
|
|
- Тип: `LastUpdatedOptions`
|
|
|
|
|
|
Позволяет настраивать текст и формат даты последнего обновления.
|
|
|
|
|
|
```ts
|
|
|
export default {
|
|
|
themeConfig: {
|
|
|
lastUpdated: {
|
|
|
text: 'Обновлено',
|
|
|
formatOptions: {
|
|
|
dateStyle: 'full',
|
|
|
timeStyle: 'medium'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
export interface LastUpdatedOptions {
|
|
|
/**
|
|
|
* @default 'Last updated'
|
|
|
*/
|
|
|
text?: string
|
|
|
|
|
|
/**
|
|
|
* @default
|
|
|
* { dateStyle: 'short', timeStyle: 'short' }
|
|
|
*/
|
|
|
formatOptions?: Intl.DateTimeFormatOptions & { forceLocale?: boolean }
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## algolia {#algolia}
|
|
|
|
|
|
- Тип: `AlgoliaSearch`
|
|
|
|
|
|
Опция для поддержки поиска на вашем сайте документации с помощью [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch). Подробнее в главе [Тема по умолчанию: Поиск](./default-theme-search)
|
|
|
|
|
|
```ts
|
|
|
export interface AlgoliaSearchOptions extends DocSearchProps {
|
|
|
locales?: Record<string, Partial<DocSearchProps>>
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Посмотреть все доступные опции можно [здесь](https://github.com/vuejs/vitepress/blob/main/types/docsearch.d.ts).
|
|
|
|
|
|
## carbonAds {#carbon-ads}
|
|
|
|
|
|
- Тип: `CarbonAdsOptions`
|
|
|
|
|
|
Возможность отображения [Carbon Ads](https://www.carbonads.net/).
|
|
|
|
|
|
```ts
|
|
|
export default {
|
|
|
themeConfig: {
|
|
|
carbonAds: {
|
|
|
code: 'код-рекламы',
|
|
|
placement: 'место-размещения-рекламы'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
export interface CarbonAdsOptions {
|
|
|
code: string
|
|
|
placement: string
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Подробнее в главе [Тема по умолчанию: Carbon Ads](./default-theme-carbon-ads)
|
|
|
|
|
|
## docFooter {#docfooter}
|
|
|
|
|
|
- Тип: `DocFooter`
|
|
|
|
|
|
Можно использовать для настройки текста, отображаемого над ссылками на предыдущую и следующую страницы. Полезно, если вы не пишете документы только на английском языке. Также можно использовать для глобального отключения подобных ссылок. Если вы хотите выборочно включить/выключить эти ссылки на отдельной странице, воспользуйтесь [метаданными](./default-theme-prev-next-links).
|
|
|
|
|
|
```ts
|
|
|
export default {
|
|
|
themeConfig: {
|
|
|
docFooter: {
|
|
|
prev: 'Предыдущая страница',
|
|
|
next: 'Следующая страница'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```ts
|
|
|
export interface DocFooter {
|
|
|
prev?: string | false
|
|
|
next?: string | false
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## darkModeSwitchLabel {#darkmodeswitchlabel}
|
|
|
|
|
|
- Тип: `string`
|
|
|
- По умолчанию: `Appearance`
|
|
|
|
|
|
Можно использовать для настройки надписи переключателя тёмного режима. Этот ярлык отображается только в мобильном представлении.
|
|
|
|
|
|
## lightModeSwitchTitle {#lightmodeswitchtitle}
|
|
|
|
|
|
- Тип: `string`
|
|
|
- По умолчанию: `Switch to light theme`
|
|
|
|
|
|
Может использоваться для настройки заголовка переключателя светлого режима, который появляется при наведении курсора.
|
|
|
|
|
|
## darkModeSwitchTitle {#darkmodeswitchtitle}
|
|
|
|
|
|
- Тип: `string`
|
|
|
- По умолчанию: `Switch to dark theme`
|
|
|
|
|
|
Можно использовать для настройки заголовка переключателя тёмного режима, который появляется при наведении курсора.
|
|
|
|
|
|
## sidebarMenuLabel {#sidebarmenulabel}
|
|
|
|
|
|
- Тип: `string`
|
|
|
- По умолчанию: `Menu`
|
|
|
|
|
|
Может использоваться для настройки метки бокового меню. Эта метка отображается только в мобильном представлении.
|
|
|
|
|
|
## returnToTopLabel {#returntotoplabel}
|
|
|
|
|
|
- Тип: `string`
|
|
|
- По умолчанию: `Return to top`
|
|
|
|
|
|
Может использоваться для настройки метки кнопки возврата наверх. Эта метка отображается только в мобильном представлении.
|
|
|
|
|
|
## langMenuLabel {#langmenulabel}
|
|
|
|
|
|
- Тип: `string`
|
|
|
- По умолчанию: `Change language`
|
|
|
|
|
|
Можно использовать для настройки aria-метки кнопки переключения языка в панели навигации. Это используется только в том случае, если вы используете [i18n](../guide/i18n).
|
|
|
|
|
|
## externalLinkIcon {#externallinkicon}
|
|
|
|
|
|
- Тип: `boolean`
|
|
|
- По умолчанию: `false`
|
|
|
|
|
|
Отображать ли значок внешней ссылки рядом с внешними ссылками в Markdown.
|
