mirror of https://github.com/vuejs/vitepress
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
439 lines
10 KiB
439 lines
10 KiB
# Configuração do Tema Padrão {#default-theme-config}
|
|
|
|
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:
|
|
|
|
```ts
|
|
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.
|
|
|
|
```ts
|
|
export default {
|
|
themeConfig: {
|
|
logo: '/logo.svg'
|
|
}
|
|
}
|
|
```
|
|
|
|
```ts
|
|
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.
|
|
|
|
```ts
|
|
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](./default-theme-nav#navigation-links).
|
|
|
|
```ts
|
|
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' }
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
```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
|
|
|
|
- Tipo: `Sidebar`
|
|
|
|
A configuração para o item do menu da barra lateral. Mais detalhes em [Tema Padrão: Barra Lateral](./default-theme-sidebar).
|
|
|
|
```ts
|
|
export default {
|
|
themeConfig: {
|
|
sidebar: [
|
|
{
|
|
text: 'Guia',
|
|
items: [
|
|
{ text: 'Introdução', link: '/introduction' },
|
|
{ text: 'Começando', link: '/getting-started' },
|
|
...
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
```ts
|
|
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](./frontmatter-config#aside)
|
|
|
|
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](./frontmatter-config#outline)
|
|
|
|
Definir este valor como `false` impede a apresentação do elemento _outline_. Consulte a interface para obter mais detalhes:
|
|
|
|
```ts
|
|
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.
|
|
|
|
```ts
|
|
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'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
```ts
|
|
interface SocialLink {
|
|
icon: string | { svg: string }
|
|
link: string
|
|
ariaLabel?: string
|
|
}
|
|
```
|
|
|
|
## footer
|
|
|
|
- Tipo: `Footer`
|
|
- Pode ser sobreposto por página via [frontmatter](./frontmatter-config#footer)
|
|
|
|
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.
|
|
|
|
```ts
|
|
export default {
|
|
themeConfig: {
|
|
footer: {
|
|
message: 'Lançado sob a Licença MIT.',
|
|
copyright: 'Direitos autorais © 2019-presente Evan You'
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
```ts
|
|
export interface Footer {
|
|
message?: string
|
|
copyright?: string
|
|
}
|
|
```
|
|
|
|
## editLink
|
|
|
|
- Tipo: `EditLink`
|
|
- Pode ser sobreposto por página via [frontmatter](./frontmatter-config#editlink)
|
|
|
|
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](./default-theme-edit-link) para mais detalhes.
|
|
|
|
```ts
|
|
export default {
|
|
themeConfig: {
|
|
editLink: {
|
|
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
|
|
text: 'Editar esta página no GitHub'
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
```ts
|
|
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.
|
|
|
|
```ts
|
|
export default {
|
|
themeConfig: {
|
|
lastUpdated: {
|
|
text: 'Atualizado em',
|
|
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
|
|
|
|
- Tipo: `AlgoliaSearch`
|
|
|
|
Uma opção para dar suporte à pesquisa em seu site de documentação usando [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch). Saiba mais em [Tema Padrão: Pesquisa](./default-theme-search).
|
|
|
|
```ts
|
|
export interface AlgoliaSearchOptions extends DocSearchProps {
|
|
locales?: Record<string, Partial<DocSearchProps>>
|
|
}
|
|
```
|
|
|
|
Veja todas as opções [aqui](https://github.com/vuejs/vitepress/blob/main/types/docsearch.d.ts).
|
|
|
|
## carbonAds {#carbon-ads}
|
|
|
|
- Tipo: `CarbonAdsOptions`
|
|
|
|
Uma opção para mostrar [Carbon Ads](https://www.carbonads.net/).
|
|
|
|
```ts
|
|
export default {
|
|
themeConfig: {
|
|
carbonAds: {
|
|
code: 'seu-código-carbon',
|
|
placement: 'sua-veiculação-carbon'
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
```ts
|
|
export interface CarbonAdsOptions {
|
|
code: string
|
|
placement: string
|
|
}
|
|
```
|
|
|
|
Saiba mais em [Tema Padrão: Carbon Ads](./default-theme-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](./default-theme-prev-next-links).
|
|
|
|
```ts
|
|
export default {
|
|
themeConfig: {
|
|
docFooter: {
|
|
prev: 'Página anterior',
|
|
next: 'Próxima página'
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
```ts
|
|
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](../guide/i18n).
|
|
|
|
## externalLinkIcon
|
|
|
|
- Tipo: `boolean`
|
|
- Padrão: `false`
|
|
|
|
Se deve mostrar um ícone de link externo ao lado de links externos no markdown.
|