Configuración del Tema Predeterminado
La configuración del tema te permite personalizar tu tema. puedes definir la configuración del tema a través de la opción themeConfig
en el archivo de configuración:
export default {
lang: 'pt-BR',
title: 'VitePress',
description: 'Generador de site estático Vite & Vue.',
// Configuraciones relacionadas con el tema.
themeConfig: {
logo: '/logo.svg',
nav: [...],
sidebar: { ... }
}
}
Las opciones documentadas de esta página se aplican unicamente al tema por defecto. Diferentes temas esperan configuraciones diferentes de tema. Cuando se utiliza un tema personalizado, el objeto de configuración del tema se pasará al tema para que se puedan definir comportamientos condicionales.
i18nRouting
- Tipo:
boolean
Cambie la configuración a, por ejemplo, zh
será alterado para URL /foo
(ou /en/foo/
) para /zh/foo
. Puedes desactivar este comportamiento configurado themeConfig.i18nRouting
como false
.
logo
- Tipo:
ThemeableImage
Archivo de logotipo que se mostrará en la barra de navegación, justo antes del título del sitio. Acepta una ruta de cadena o un objeto para definir un logotipo diferente para los modos claro/oscuro.
export default {
themeConfig: {
logo: '/logo.svg'
}
}
type ThemeableImage =
| string
| { src: string; alt?: string }
| { light: string; dark: string; alt?: string }
siteTitle
- Tipo:
string | false
Puedes personalizar este elemento para reemplazar el título del sitio predeterminado (title
en configuración de la aplicación) en navegación. Cuando se establece como false
, el título en la navegación quedará deshabilitado. Útil cuando tienes un logo
que ya contiene el título del sitio.
export default {
themeConfig: {
siteTitle: 'Hola mundo'
}
}
nav
- Tipo:
NavItem
La configuración del elemento del menú de navegación. Más detalles en Tema Predeterminado: Navegación.
export default {
themeConfig: {
nav: [
{ text: 'Guia', link: '/guide' },
{
text: 'Menú 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
La configuración del elemento del menú de la barra lateral. Más detalles en Tema Predeterminado: Barra Lateral.
export default {
themeConfig: {
sidebar: [
{
text: 'Guia',
items: [
{ text: 'Introducción', link: '/introduction' },
{ text: 'A partir de', link: '/getting-started' },
...
]
}
]
}
}
export type Sidebar = SidebarItem[] | SidebarMulti
export interface SidebarMulti {
[path: string]: SidebarItem[]
}
export type SidebarItem = {
/**
* El rotulo del item.
*/
text?: string
/**
* El link del item.
*/
link?: string
/**
* Los hijos del item.
*/
items?: SidebarItem[]
/**
* Si no se especifica, el grupo no es retráctil.
*
* Si es 'true', el grupo se puede contraer y está contraído de forma predeterminada.
*
* Si es 'false', el grupo se puede contraer pero se expande de forma predeterminada.
*/
collapsed?: boolean
}
aside
- Tipo:
boolean | 'left'
- Estandar:
true
- Puede ser anulado por la página a través de frontmatter
Definir este valor como false
evita que se muestre el elemento lateral.
Definir este valor como true
presenta el lado de la derecha.
Definir este valor como left
presenta el lado de la izquierda.
Si desea deshabilitarlo para todas las vistas, debe usar outline: false
en vez de eso.
outline
- Tipo:
Outline | Outline['level'] | false
- El nivel se puede superponer por página mediante frontmatter
Definir este valor como false
evita que el elemento se muestre outline. Consulte la interfaz para más detalles:
interface Outline {
/**
* Los niveles de título que se mostrarán en el esquema.
* Un solo número significa que solo se mostrarán los títulos de ese nivel.
* Si se pasa una tupla, el primer número es el nivel mínimo y el segundo número es el nivel máximo.
* `'deep'` es lo mismo que `[2, 6]`, lo que significa que todos los titulos `<h2>` a `<h6>` serán mostrados.
*
* @default 2
*/
level?: number | [number, number] | 'deep'
/**
* El titulo que se mostrará en el equema.
*
* @default 'On this page'
*/
label?: string
}
socialLinks
- Tipo:
SocialLink[]
Puedes configurar esta opción para mostrar enlaces de redes sociales con íconos en la navegación.
export default {
themeConfig: {
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' },
{ icon: 'twitter', link: '...' },
// También puedes agregar íconos personalizados pasando 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: '...',
// También puedes incluir una etiqueta personalizada de accesibilidad (opcional pero recomendada):
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
- Se puede superponer por página mediante frontmatter
Configuración de pie de página. Puede agregar un mensaje o texto de derechos de autor en el pie de página; sin embargo, solo se mostrará cuando la página no contenga una barra lateral. Esto se debe a preocupaciones de diseño.
export default {
themeConfig: {
footer: {
message: 'Publicado bajo la licencia MIT.',
copyright: 'Derechos de autor © 2019-presente Evan You'
}
}
}
export interface Footer {
message?: string
copyright?: string
}
editLink
- Tipo:
EditLink
- Se puede superponer por página mediante frontmatter
EditLink le permite mostrar un enlace para editar la página en los servicios de administración Git, como GitHub o GitLab. Consulte Tema por defecto: Editar Link para más detalles.
export default {
themeConfig: {
editLink: {
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
text: 'Editar esta página en GitHub'
}
}
}
export interface EditLink {
pattern: string
text?: string
}
lastUpdated
- Tipo:
LastUpdatedOptions
Permite la personalización del formato de fecha y texto actualizado por ultima vez.
export default {
themeConfig: {
lastUpdated: {
text: 'Actualizado en',
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
Una opción para dar soporte para buscar en su sitio de documentación usando Algolia DocSearch. Obtenga más información en Tema predeterminado: Buscar.
export interface AlgoliaSearchOptions extends DocSearchProps {
locales?: Record<string, Partial<DocSearchProps>>
}
Ver todas las opciones aquí.
carbonAds
- Tipo:
CarbonAdsOptions
Una opción para mostrar Carbon Ads.
export default {
themeConfig: {
carbonAds: {
code: 'su-código-carbon',
placement: 'su-colocación-carbon'
}
}
}
export interface CarbonAdsOptions {
code: string
placement: string
}
Obtenga más información en Tema Predeterminado: Carbon Ads.
docFooter
- Tipo:
DocFooter
Se puede utilizar para personalizar el texto que aparece encima de los enlaces anterior y siguiente. Útil si no estás escribiendo documentación en inglés. También se puede utilizar para desactivar globalmente los enlaces anteriores/siguientes. Si desea habilitar/deshabilitar selectivamente enlaces anteriores/siguientes, puede 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
- Estandar:
Appearance
Se puede utilizar para personalizar la etiqueta del botón del modo oscuro. Esta etiqueta solo se muestra en la vista móvil.
lightModeSwitchTitle
- Tipo:
string
- Estandar:
Switch to light theme
Se puede utilizar para personalizar el título del botón borrar que aparece al pasar el mouse.
darkModeSwitchTitle
- Tipo:
string
- Estandar:
Switch to dark theme
Se puede utilizar para personalizar el título del botón del modo oscuro que aparece al pasar el mouse.
sidebarMenuLabel
- Tipo:
string
- Estandar:
Menu
Se puede utilizar para personalizar la etiqueta del menú de la barra lateral. Esta etiqueta solo se muestra en la vista móvil.
returnToTopLabel
- Tipo:
string
- Estandar:
Return to top
Se puede utilizar para personalizar la etiqueta del botón Volver al principio. Esta etiqueta solo se muestra en la vista móvil.
langMenuLabel
- Tipo:
string
- Estandar:
Change language
Se puede utilizar para personalizar la etiqueta aria del botón de idioma en la barra de navegación. Esto sólo se usa si estás usando i18n.
externalLinkIcon
- Tipo:
boolean
- Estandar:
false
Se debe mostrar um ícono de link externo junto a los enlaces externos en markdown.