# Configuración del Tema Predeterminado {#default-theme-config}
La configuración del tema te permite personalizar tu tema. puede definir la configuración del tema a travez de la opción `themeConfig` en el archivo de configuración:
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:
```ts
export default {
lang: 'pt-BR',
title: 'VitePress',
description: 'Gerador de site estático Vite & Vue.',
description: 'Generador de site estático Vite & Vue.',
// Configurações relacionadas ao tema.
// Configuraciones relacionadas con el tema.
themeConfig: {
logo: '/logo.svg',
nav: [...],
@ -50,12 +50,12 @@ type ThemeableImage =
- Tipo: `string | false`
Puede 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.
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.
```ts
export default {
themeConfig: {
siteTitle: 'Olá Mundo'
siteTitle: 'Hola mundo'
}
}
```
@ -72,7 +72,7 @@ export default {
nav: [
{ text: 'Guia', link: '/guide' },
{
text: 'Menu Dropdown',
text: 'Menú Dropdown',
items: [
{ text: 'Item A', link: '/item-1' },
{ text: 'Item B', link: '/item-2' },
@ -190,7 +190,7 @@ 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 sifnifica que todos los titulos `<h2>` a `<h6>` serán mostrados.
* `'deep'` es lo mismo que `[2, 6]`, lo que significa que todos los titulos `<h2>` a `<h6>` serán mostrados.
*
* @default 2
*/
@ -209,7 +209,7 @@ interface Outline {
- Tipo: `SocialLink[]`
Você pode definir esta opção para mostrar os links de redes sociais com ícones na navegação.
Puedes configurar esta opción para mostrar enlaces de redes sociales con íconos en la navegación.
Consulte [Tema PErsonalizado: Última Actualización](./default-theme-config#lastupdated) para obtener más. Cualquier valor positivo a nivel de tema también habilitará la funcionalidad a menos que esté explícitamente deshabilitado a nivel de página o sitio.
Consulte [Tema Personalizado: Última Actualización](./default-theme-config#lastupdated) para obtener más. Cualquier valor positivo a nivel de tema también habilitará la funcionalidad a menos que esté explícitamente deshabilitado a nivel de página o sitio.
La opción `doc` es el layout predeterminado y aplca estlo a todo el contenido de Markdown el aspecto de "documentación". Funciona agrupando todo el contenido en la clase CSS `vp-doc`, y aplicando estilos a los elementos debajo de ella.
La opción `doc` es el layout predeterminado y aplica estilo a todo el contenido de Markdown el aspecto de "documentación". Funciona agrupando todo el contenido en la clase CSS `vp-doc`, y aplicando estilos a los elementos debajo de ella.
Casi todos los elementos genéricos como `p` o `h2`, recibir un estilo especial. Por tanto, recuerda que si añades algún HTML contenido personalizado dentro del contenido Markdown, también se verá afectado por estos estilos.
Casi todos los elementos genéricos como `p` o `h2`, recibirá un estilo especial. Por tanto, recuerda que si añades algún HTML contenido personalizado dentro del contenido Markdown, también se verá afectado por estos estilos.
También proporciona recursos de documentación específicos que se enumeran a continuación. Estas funciones solo están habilitadas en este layout.
@ -28,11 +28,11 @@ pero esto no recibirá ningún estilo predeterminado.
El layout de la página le permitirá diseñar todo sin que el tema de VitePress afecte el marcado. Esto es útil cuando desea crear su propia página personalizada.
Tenga en cuenta que incluso en este mismo layout, a barra lateral seguirá apareciendo si la página tiene una configuración de barra lateral correspondiente.
Tenga en cuenta que incluso en este mismo layout, la barra lateral seguirá apareciendo si la página tiene una configuración de barra lateral correspondiente.
## Layout de Home {#home-layout}
La opción `home` gerará un modelo de _"Homepage"_. En este layout você pofra definir opciones extras, como `hero` y `features`, para personalizar todavá más el contenido. Visite [Tema padrão: Página Inicial](./default-theme-home-page) para obter más detalles.
La opción `home` gerará un modelo de _"Homepage"_. En este layout podrás definir opciones extras, como `hero` y `features`, para personalizar todavá más el contenido. Visite [Tema predeterminado: Página Inicial](./default-theme-home-page) para obter más detalles.
Refiriéndose a la barra de navegación que se muestra en la parte superior de la página. Contiene el título del sitio, enlaces del menú global, etc.
@ -37,7 +37,7 @@ export default {
También puedes pasar un objeto como logotipo si quieres agregar un atributo. `alt` o personalizarlo según el modo claro/oscuro. Consultar [`themeConfig.logo`](./default-theme-config#logo) para obtener más detalles.
## Links de Navegaion {#navigation-links}
## Links de Navegación {#navigation-links}
Puedes configurar la opción `themeConfig.nav` para añadir enlaces a tu navegación.
@ -140,7 +140,7 @@ export default {
### Personalizar los atributos "target" y "rel" de links {#customize-link-s-target-and-rel-attributes}
Por defecto, VitePress determina automaticamente lod atributos `target` y `rel` en función de si existe un enlace externo o no. Pero si quieres, también puedes personalizarlos.
Por defecto, VitePress determina automáticamente lod atributos `target` y `rel` en función de si existe un enlace externo o no. Pero si quieres, también puedes personalizarlos.
Alternativamente, puedes usar [Algolia DocSearch](#algolia-search) ou algunos complementos comunitarios como <https://www.npmjs.com/package/vitepress-plugin-search> o <https://www.npmjs.com/package/vitepress-plugin-pagefind>.
Alternativamente, puedes usar [Algolia DocSearch](#algolia-search) o algunos complementos comunitarios como <https://www.npmjs.com/package/vitepress-plugin-search> o <https://www.npmjs.com/package/vitepress-plugin-pagefind>.
### i18n {#local-search-i18n}
@ -96,7 +96,7 @@ export default defineConfig({
})
```
Obtenga más información en [documentação do MiniSearch](https://lucaong.github.io/minisearch/classes/MiniSearch.MiniSearch.html).
Obtenga más información en [documentación de MiniSearch](https://lucaong.github.io/minisearch/classes/MiniSearch.MiniSearch.html).
### Presentador de contenido personalizado {#custom-content-renderer}
@ -116,7 +116,7 @@ export default defineConfig({
* @param {import('markdown-it')} md
*/
_render(src, env, md) {
// retorne a string HTML
// retorne un string HTML
}
}
}
@ -151,7 +151,7 @@ export default defineConfig({
```
::: warning Nota
En este caso, una función `_render` se proporciona, es necesario manipular el `search: false` desde el frente por su cuenta. Además, el objeto `env` não estará completamente populado antes que `md.render` no estará completamente poblado antes `env`, como `frontmatter`, debe hacerse después de eso.
En este caso, una función `_render` se proporciona, es necesario manipular el `search: false` desde el frente por su cuenta. Además, el objeto `env` no estará completamente poblado antes que `md.render` se llama, luego verifica las propiedades opcionales `env`, como `frontmatter`, debe hacerse después de eso.
VitePress admite la búsqueda en su sitio de documentación utilizando [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch). Consulte su guía de introducción. en tu archivo `.vitepress/config.ts`, Deberá proporcionar al menos lo siguiente para que funcione:
Puede mostrar una barra lateral diferente según la ruta de la página. Por ejemplo, como se muestra en este sitio, es posible que desee crear secciones separadas de contenido en su documentación, como la página "Guía" y la página "Configuración".
Puedes mostrar una barra lateral diferente según la ruta de la página. Por ejemplo, como se muestra en este sitio, es posible que desee crear secciones separadas de contenido en su documentación, como la página "Guía" y la página "Configuración".
Para hacer esto, primero organice sus páginas en directorios para cada sección deseada:
Si desea presentar a su equipo, puede utilizar componentes del equipo para crear la página del equipo. Hay dos formas de utilizar estos componentes. Una es incrustarlo en la página del documento y otra es crear una página de equipo completa.
Si deseas presentar a tu equipo, puedes utilizar componentes del equipo para crear la página del equipo. Hay dos formas de utilizar estos componentes. Una es incrustarlo en la página del documento y otra es crear una página de equipo completa.
## Mostrar miembros del equipo en una página {#show-team-members-in-a-page}
@ -4,7 +4,7 @@ VitePress ofrece varias API integradas para permitir el acceso a los datos de la
Los métodos auxiliares son importaciones globales de `vitepress` y se utilizan a menudo en componentes Vue de temas personalizados. Sin embargo, también se pueden utilizar dentro de páginas `.md` porque los archivos de rebajas se compilan en [Componentes de Archivo Único Vue (SFC)](https://vuejs.org/guide/scaling-up/sfc.html).
Métodos que começam com `use*` indicam que é uma função da [API de Composição Vue 3](https://vuejs.org/guide/introduction.html#composition-api) ("Composable") que só pode ser usada dentro de `setup()` o `<script setup>`.
Métodos que comienzan con `use*` indican que es una función de [API de Composición Vue 3](https://vuejs.org/guide/introduction.html#composition-api) ("Composable") que solo puede ser utilizada dentro de `setup()` o `<script setup>`.
## `useData`<Badgetype="info"text="composable"/>
@ -13,7 +13,7 @@ Retorna datos específicos de la página. El objeto devuelto tiene el siguiente
Puede configurar la instancia subyacente de [Markdown-It](https://github.com/markdown-it/markdown-it) usando la opción [markdown](#markdown) en su configuración VitePress.
El directorio donde se almacenan sus páginas de rebajas, en relación con la raíz del proyecto. vea también [Directorio Raiz y de origen](../guide/routing#root-and-source-directory).
El directorio donde se almacenan tus páginas de rebajas, en relación con la raíz del proyecto. vea también [Directorio Raiz y de origen](../guide/routing#root-and-source-directory).
```ts
export default {
@ -390,7 +390,7 @@ export default {
- Tipo: `string`
- Predeterminado: `undefined`
Un [patrón glob](https://github.com/mrmlnc/fast-glob#pattern-syntax) para hacer coincidir los archivos de rebajas que deben exluirse como conenido de origen.
Un [patrón glob](https://github.com/mrmlnc/fast-glob#pattern-syntax) para hacer coincidir los archivos de rebajas que deben exluirse como contenido de origen.
```ts
export default {
@ -524,7 +524,7 @@ Consulte la [declaración de tipo y jsdocs](https://github.com/vuejs/vitepress/b
- Tipo: `import('vite').UserConfig`
Pase la [Configuración Vite](https://vitejs.dev/config/) sin procesar al servidor interno / empacotador Vite.
Pase la [Configuración Vite](https://vitejs.dev/config/) sin procesar al servidor interno / empaquetador Vite.
```js
export default {
@ -553,7 +553,7 @@ export default {
Los enlaces de compilación VitePress permiten agregar nuevas funciones al su sitio web:
John Freddy Tutistar
5 months ago
committed by
GitHub