Configuração do Tema Padrão
A configuração do tema permite que você personalize seu tema. Você pode definir a configuração do tema através da opção themeConfig
no arquivo de configuração:
export default {
lang: 'pt-BR',
title: 'VitePress',
description: 'Gerador de site estático Vite & Vue.',
// Configurações relacionadas ao tema.
themeConfig: {
logo: '/logo.svg',
nav: [...],
sidebar: { ... }
}
}
As opções documentadas nesta página se aplicam apenas ao tema padrão. Temas diferentes esperam configurações de tema diferentes. Ao usar um tema personalizado, o objeto de configuração do tema será passado para o tema para que se possam definir comportamentos condicionais.
i18nRouting
- Tipo:
boolean
Alterar o local para, por exemplo, zh
alterará a URL de /foo
(ou /en/foo/
) para /zh/foo
. Você pode desativar esse comportamento definindo themeConfig.i18nRouting
como false
.
logo
- Tipo:
ThemeableImage
Arquivo de logo a ser exibido na barra de navegação, logo antes do título do site. Aceita um caminho em string, ou um objeto para definir um logo diferente para os modos claro/escuro.
export default {
themeConfig: {
logo: '/logo.svg'
}
}
type ThemeableImage =
| string
| { src: string; alt?: string }
| { light: string; dark: string; alt?: string }
siteTitle
- Tipo:
string | false
Você pode personalizar este item para substituir o título padrão do site (title
na configuração da aplicação) na navegação. Quando definido como false
, o título na navegação será desativado. Útil quando você tem um logo
que já contém o título do site.
export default {
themeConfig: {
siteTitle: 'Olá Mundo'
}
}
nav
- Tipo:
NavItem
A configuração para o item do menu de navegação. Mais detalhes em Tema Padrão: Navegação.
export default {
themeConfig: {
nav: [
{ text: 'Guia', link: '/guide' },
{
text: 'Menu Dropdown',
items: [
{ text: 'Item A', link: '/item-1' },
{ text: 'Item B', link: '/item-2' },
{ text: 'Item 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
- Tipo:
Sidebar
A configuração para o item do menu da barra lateral. Mais detalhes em Tema Padrão: Barra Lateral.
export default {
themeConfig: {
sidebar: [
{
text: 'Guia',
items: [
{ text: 'Introdução', link: '/introduction' },
{ text: 'Começando', link: '/getting-started' },
...
]
}
]
}
}
export type Sidebar = SidebarItem[] | SidebarMulti
export interface SidebarMulti {
[path: string]: SidebarItem[]
}
export type SidebarItem = {
/**
* O rótulo de texto do item.
*/
text?: string
/**
* O link do item.
*/
link?: string
/**
* Os filhos do item.
*/
items?: SidebarItem[]
/**
* Se não especificado, o grupo não é retrátil.
*
* Se `true`, o grupo é retrátil e é colapsado por padrão.
*
* Se `false`, o grupo é retrátil, mas expandido por padrão.
*/
collapsed?: boolean
}
aside
- Tipo:
boolean | 'left'
- Padrão:
true
- Pode ser anulado por página via frontmatter
Definir este valor como false
impede a apresentação do elemento aside.
Definir este valor como true
apresenta o aside à direita.
Definir este valor como left
apresenta o aside à esquerda.
Se você quiser desativá-lo para todas as visualizações, você deve usar outline: false
em vez disso.
outline
- Tipo:
Outline | Outline['level'] | false
- O nível pode ser sobreposto por página via frontmatter
Definir este valor como false
impede a apresentação do elemento outline. Consulte a interface para obter mais detalhes:
interface Outline {
/**
* Os níveis de títulos a serem exibidos na outline.
* Um único número significa que apenas os títulos desse nível serão exibidos.
* Se uma tupla for passada, o primeiro número é o nível mínimo e o segundo número é o nível máximo.
* `'deep'` é o mesmo que `[2, 6]`, o que significa que todos os títulos de `<h2>` a `<h6>` serão exibidos.
*
* @default 2
*/
level?: number | [number, number] | 'deep'
/**
* O título a ser exibido na outline.
*
* @default 'On this page'
*/
label?: string
}
socialLinks
- Tipo:
SocialLink[]
Você pode definir esta opção para mostrar os links de redes sociais com ícones na navegação.
export default {
themeConfig: {
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' },
{ icon: 'twitter', link: '...' },
// Você também pode adicionar ícones personalizados passando SVG como string:
{
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: '...',
// Você também pode incluir um rótulo personalizado para acessibilidade (opcional mas recomendado):
ariaLabel: 'cool link'
}
]
}
}
interface SocialLink {
icon: SocialLinkIcon
link: string
ariaLabel?: string
}
type SocialLinkIcon =
| 'discord'
| 'facebook'
| 'github'
| 'instagram'
| 'linkedin'
| 'mastodon'
| 'npm'
| 'slack'
| 'twitter'
| 'x'
| 'youtube'
| { svg: string }
footer
- Tipo:
Footer
- Pode ser sobreposto por página via frontmatter
Configuração do rodapé. Você pode adicionar uma mensagem ou texto de direitos autorais no rodapé, no entanto, ela só será exibida quando a página não contiver uma barra lateral. Isso se deve a preocupações de design.
export default {
themeConfig: {
footer: {
message: 'Lançado sob a Licença MIT.',
copyright: 'Direitos autorais © 2019-presente Evan You'
}
}
}
export interface Footer {
message?: string
copyright?: string
}
editLink
- Tipo:
EditLink
- Pode ser sobreposto por página via frontmatter
O EditLink permite exibir um link para editar a página em serviços de gerenciamento Git, como GitHub ou GitLab. Consulte Tema Padrão: Editar Link para mais detalhes.
export default {
themeConfig: {
editLink: {
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
text: 'Editar esta página no GitHub'
}
}
}
export interface EditLink {
pattern: string
text?: string
}
lastUpdated
- Tipo:
LastUpdatedOptions
Permite personalização para o texto de última atualização e o formato de data.
export default {
themeConfig: {
lastUpdated: {
text: 'Atualizado em',
formatOptions: {
dateStyle: 'full',
timeStyle: 'medium'
}
}
}
}
export interface LastUpdatedOptions {
/**
* @default 'Last updated'
*/
text?: string
/**
* @default
* { dateStyle: 'short', timeStyle: 'short' }
*/
formatOptions?: Intl.DateTimeFormatOptions & { forceLocale?: boolean }
}
algolia
- Tipo:
AlgoliaSearch
Uma opção para dar suporte à pesquisa em seu site de documentação usando Algolia DocSearch. Saiba mais em Tema Padrão: Pesquisa.
export interface AlgoliaSearchOptions extends DocSearchProps {
locales?: Record<string, Partial<DocSearchProps>>
}
Veja todas as opções aqui.
carbonAds
- Tipo:
CarbonAdsOptions
Uma opção para mostrar Carbon Ads.
export default {
themeConfig: {
carbonAds: {
code: 'seu-código-carbon',
placement: 'sua-veiculação-carbon'
}
}
}
export interface CarbonAdsOptions {
code: string
placement: string
}
Saiba mais em Tema Padrão: Carbon Ads.
docFooter
- Tipo:
DocFooter
Pode ser usado para personalizar o texto que aparece acima dos links anterior e próximo. Útil se não estiver escrevendo documentação em inglês. Também pode ser usado para desabilitar globalmente os links anterior/próximo. Se você quiser ativar/desativar seletivamente os links anterior/próximo, pode usar frontmatter.
export default {
themeConfig: {
docFooter: {
prev: 'Página anterior',
next: 'Próxima página'
}
}
}
export interface DocFooter {
prev?: string | false
next?: string | false
}
darkModeSwitchLabel
- Tipo:
string
- Padrão:
Appearance
Pode ser usado para personalizar o rótulo do botão de modo escuro. Esse rótulo é exibido apenas na visualização móvel.
lightModeSwitchTitle
- Tipo:
string
- Padrão:
Switch to light theme
Pode ser usado para personalizar o título do botão de modo claro que aparece ao passar o mouse.
darkModeSwitchTitle
- Tipo:
string
- Padrão:
Switch to dark theme
Pode ser usado para personalizar o título do botão de modo escuro que aparece ao passar o mouse.
sidebarMenuLabel
- Tipo:
string
- Padrão:
Menu
Pode ser usado para personalizar o rótulo do menu da barra lateral. Esse rótulo é exibido apenas na visualização móvel.
returnToTopLabel
- Tipo:
string
- Padrão:
Return to top
Pode ser usado para personalizar o rótulo do botão de retorno ao topo. Esse rótulo é exibido apenas na visualização móvel.
langMenuLabel
- Tipo:
string
- Padrão:
Change language
Pode ser usado para personalizar o aria-label do botão de idioma na barra de navegação. Isso é usado apenas se você estiver usando i18n.
externalLinkIcon
- Tipo:
boolean
- Padrão:
false
Se deve mostrar um ícone de link externo ao lado de links externos no markdown.