@ -8,9 +8,9 @@ Todos los archivos Markdown son compilados en componentes Vue y procesados por [
```
```
Puede referenciar assets estáticos en sus archivos markdown, sus componentes `*.vue` en el tema, estilos y simples archivos `.css`, usando paths públicos absolutos (com base en la raiz del projeto) o paths relativos (con base en su sistema de arhivos). Este último es semejante al comportamiento que está acostumbrado se ya usó Vite, Vue CLI o el `file-loader` de webpack.
Puede referenciar assets estáticos en sus archivos markdown, sus componentes `*.vue` en el tema, estilos y simples archivos `.css`, usando paths públicos absolutos (com base en la raíz del proyecto) o paths relativos (con base en su sistema de archivos). Este último es semejante al comportamiento que está acostumbrado se ya usó Vite, Vue CLI o el `file-loader` de webpack.
Tipos comunes de archivos de imagen, media y fuente son detectados e incluidos automaticamente como assets.
Tipos comunes de archivos de imagen, media y fuente son detectados e incluidos automáticamente como assets.
Todos los assets referenciados, incluyendo aquellos usando paths absolutos, serán copiados al directorio de salida con un nombre de archivo hash en la compilación de producción. Assets nunca referenciados no serán copiados. Assets de imagen menores que 4KB serán incorporados en base64 - esto puede ser configurado por la opción [`vite`](../reference/site-config#vite) en configuración.
Todos los assets referenciados, incluyendo aquellos usando paths absolutos, serán copiados al directorio de salida con un nombre de archivo hash en la compilación de producción. Assets nunca referenciados no serán copiados. Assets de imagen menores que 4KB serán incorporados en base64 - esto puede ser configurado por la opción [`vite`](../reference/site-config#vite) en configuración.
@ -20,15 +20,15 @@ Todas las referencias de path **estáticas**, incluyendo paths absolutos, deben
A veces, puede ser necesario proveer assets estáticos que no son referenciados directamente en ninguno de sus componentes del tema o Markdown, o usted puede querer servir ciertos archivos con el nombre del archivo original. Ejemplos de tales archivos incluyen `robots.txt`, favicons e iconos PWA.
A veces, puede ser necesario proveer assets estáticos que no son referenciados directamente en ninguno de sus componentes del tema o Markdown, o usted puede querer servir ciertos archivos con el nombre del archivo original. Ejemplos de tales archivos incluyen `robots.txt`, favicons e iconos PWA.
Puede colocar esos archivos en el directorio `public` sobre el [directorio de origen](./routing#source-directory). Por ejemplo, se la raiz de su proyecto fuera `./docs` y estuviera usando localización por defecto del directorio fuente, entonces el directorio público será `./docs/public`.
Puede colocar esos archivos en el directorio `public` sobre el [directorio de origen](./routing#source-directory). Por ejemplo, se la raíz de su proyecto fuera `./docs` y estuviera usando localización por defecto del directorio fuente, entonces el directorio público será `./docs/public`.
Los assets colocados en `public` serán copiados a la raiz del directorio de salida tal como son.
Los assets colocados en `public` serán copiados a la raíz del directorio de salida tal como son.
Observe que usted debe referenciar archivos colocados en `public` usando e path absoluto de la raiz - por ejemplo, `public/icon.png` debe siempre ser referenciado en el código fuente como `/icon.png`.
Observe que usted debe referenciar archivos colocados en `public` usando e path absoluto de la raíz - por ejemplo, `public/icon.png` debe siempre ser referenciado en el código fuente como `/icon.png`.
## URL Base {#base-url}
## URL Base {#base-url}
Si su sitio estuviera implantado en una URL que no sea la raiz, será necesario definir la opción `base` en `.vitepress/config.js`. Por ejemplo, se planea implantar su sitio en `https://foo.github.io/bar/`, entonces `base` debe ser definido como `'/bar/'` (siempre debe comenzar y terminar con una barra).
Si su sitio estuviera implantado en una URL que no sea la raíz, será necesario definir la opción `base` en `.vitepress/config.js`. Por ejemplo, se planea implantar su sitio en `https://foo.github.io/bar/`, entonces `base` debe ser definido como `'/bar/'` (siempre debe comenzar y terminar con una barra).
Todos los paths de sus assets estáticos son procesados automáticamente para ajustarse a los diferentes valores de configuración `base`. Por ejemplo, se tuviera una referencia absoluta a un asset sobre `public` en su Markdown:
Todos los paths de sus assets estáticos son procesados automáticamente para ajustarse a los diferentes valores de configuración `base`. Por ejemplo, se tuviera una referencia absoluta a un asset sobre `public` en su Markdown:
Conectar VitePress a un CMS girará mayormente en torno a [Rutas dinámicas](./routing#dynamic-routes). Asegurese de entender cómo funcionan antes de proceder.
Conectar VitePress a un CMS girará mayormente en torno a [Rutas dinámicas](./routing#dynamic-routes). Asegúrese de entender cómo funcionan antes de proceder.
Como cada CMS funcionará de forma diferente, aqui podemos proveer apenas un flujo de trabajo genérico que requiere ser adaptado para cada escenario específico.
Como cada CMS funcionará de forma diferente, aquí podemos proveer apenas un flujo de trabajo genérico que requiere ser adaptado para cada escenario específico.
1. Si su CMS exige autenticación, cree un archivo `.env` para almacenar los tokens del API y cargarlos como:
1. Si su CMS exige autenticación, cree un archivo `.env` para almacenar los tokens del API y cargarlos como:
@ -51,6 +51,6 @@ Como cada CMS funcionará de forma diferente, aqui podemos proveer apenas un flu
<!-- @content -->
<!-- @content -->
```
```
## Guias de Integración {#integration-guides}
## Guías de Integración {#integration-guides}
Se usted escribió una guía sobre cómo integrar VitePress con un CMS específico, por favor use el link "Edite esta página" abajo para enviarlo hacia aqui!
Se usted escribió una guía sobre cómo integrar VitePress con un CMS específico, por favor use el link "Edite esta página" abajo para enviarlo hacia aquí!
@ -6,7 +6,7 @@ Puede habilitar un tema personalizado creando un archivo `.vitepress/theme/index
```
```
.
.
├─ docs # raiz del proyecto
├─ docs # raíz del proyecto
│ ├─ .vitepress
│ ├─ .vitepress
│ │ ├─ theme
│ │ ├─ theme
│ │ │ └─ index.js # entrada de tema
│ │ │ └─ index.js # entrada de tema
@ -15,16 +15,16 @@ Puede habilitar un tema personalizado creando un archivo `.vitepress/theme/index
└─ package.json
└─ package.json
```
```
VitePress siempre usará el tema personalizado en vez del tema por defecto cuando detecte la precencia de un archivo de entrada de tema. Sin embargo, puede [extender el tema por defecto](./extending-default-theme) para realizar personalizaciones avanzadas sobre el.
VitePress siempre usará el tema personalizado en vez del tema por defecto cuando detecte la presencia de un archivo de entrada de tema. Sin embargo, puede [extender el tema por defecto](./extending-default-theme) para realizar personalizaciones avanzadas sobre el.
## Interfaz del Tema {#theme-interface}
## Interfaz del Tema {#theme-interface}
Un tema personalizado de VitePress es definifo como un objeto con la siguiente interfaz:
Un tema personalizado de VitePress es definido como un objeto con la siguiente interfaz:
```ts
```ts
interface Theme {
interface Theme {
/**
/**
* Componente raiz de layout para todas las páginas
* Componente raíz de layout para todas las páginas
* @required
* @required
*/
*/
Layout: Component
Layout: Component
@ -64,7 +64,7 @@ export default {
}
}
```
```
La exportación por defecto es el único contrato para un tema personalizado, y apenas la propiedad `Layout` es exigida. Tecnicamente, un tema de VitePress puede ser tan simple como un único componente Vue.
La exportación por defecto es el único contrato para un tema personalizado, y apenas la propiedad `Layout` es exigida. Técnicamente, un tema de VitePress puede ser tan simple como un único componente Vue.
Dentro de su componente de layout, el funciona como una aplicación Vite + Vue 3 normal. Note que el tema también necesita ser [compatible con SSR](./ssr-compat).
Dentro de su componente de layout, el funciona como una aplicación Vite + Vue 3 normal. Note que el tema también necesita ser [compatible con SSR](./ssr-compat).
@ -77,7 +77,7 @@ El componente de layout más básico necesita un componente [`<Content />`](../r
<template>
<template>
<h1>Layout Personalizado!</h1>
<h1>Layout Personalizado!</h1>
<!-- aqui es donde el contenido markdown será presentado -->
<!-- aquí es donde el contenido markdown será presentado -->
<Content/>
<Content/>
</template>
</template>
```
```
@ -100,7 +100,7 @@ const { page } = useData()
</template>
</template>
```
```
El auxiliar [`useData()`](../reference/runtime-api#usedata) proporciona todos los datos en tiempo de ejecución que necesitamos para mostrar layouts diferentes. Uno de los otros datos que podemos accesar es el frontmatter de la página actual. Podemos aprovechar esto para permitir que el usuario final controle el layout en cada página. Por ejemplo, el usuario puede indicar que la página debe usar un layout especial de la pagina inicial con:
El auxiliar [`useData()`](../reference/runtime-api#usedata) proporciona todos los datos en tiempo de ejecución que necesitamos para mostrar layouts diferentes. Otro de los datos que podemos acceder es al frontmatter de la página actual. Podemos aprovechar esto para permitir que el usuario final controle el layout en cada página. Por ejemplo, el usuario puede indicar que la página debe usar un layout especial de la pagina inicial con:
```md
```md
---
---
@ -154,7 +154,7 @@ Consulte la [Referencia del API en tiempo de Ejecución](../reference/runtime-ap
## Distribuyendo un Tema Personalizado {#distributing-a-custom-theme}
## Distribuyendo un Tema Personalizado {#distributing-a-custom-theme}
La manera más facil de distribuir un tema personalizado es proporcionarlo como un [repositorio de template en GitHub](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository).
La manera más fácil de distribuir un tema personalizado es proporcionarlo como un [repositorio de template en GitHub](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository).
Si desea distribuir su tema como un paquete npm, siga estos pasos:
Si desea distribuir su tema como un paquete npm, siga estos pasos:
@ -170,7 +170,7 @@ Si desea distribuir su tema como un paquete npm, siga estos pasos:
## Consumiendo un Tema Personalizado {#consuming-a-custom-theme}
## Consumiendo un Tema Personalizado {#consuming-a-custom-theme}
Para consumir un tema extereno, importelo e reexportelo a partir del archivo de entrada del tema personalizado:
Para consumir un tema externo, importelo y reexportelo a partir del archivo de entrada del tema personalizado:
# Carga de Datos en Tiempo de Compilacion {#build-time-data-loading}
# Carga de Datos en Tiempo de Compilación {#build-time-data-loading}
VitePress proporciona un recurso llamado **cargadores de dato** que permite cargar datos arbitrarios e importarlos desde páginas o componentes. La carga de datos es ejecutada **apenas en el tiempo del build** los datos resultantes serán serializados como JSON en el paquete de JavaScript final.
VitePress proporciona un recurso llamado **cargadores de dato** que permite cargar datos arbitrarios e importarlos desde páginas o componentes. La carga de datos es ejecutada **apenas en el tiempo del build** los datos resultantes serán serializados como JSON en el paquete de JavaScript final.
Los cargadores de datos pueden ser usados para buscar datos remotos o generar metadatos con base en archivos locales. Por ejemplo, puede usar cargadores de datos para procesar todas sus pagínas API locales y generar automáticamente un indice de todas las entradas del API.
Los cargadores de datos pueden ser usados para buscar datos remotos o generar metadatos con base en archivos locales. Por ejemplo, puede usar cargadores de datos para procesar todas sus páginas API locales y generar automáticamente un indice de todas las entradas del API.
## Uso Básico {#basic-usage}
## Uso Básico {#basic-usage}
@ -38,7 +38,7 @@ Salida:
}
}
```
```
Notará que el propio cargados de datos no exporta `data`. Es VitePress llamando el método `load()` entre bastidores y exponiendo implicitamente el resultado por medio de la exportación llamada `data`.
Notará que el propio cargados de datos no exporta `data`. Es VitePress llamando el método `load()` entre bastidores y exponiendo implícitamente el resultado por medio de la exportación llamada `data`.
Esto funciona incluso si el cargador fuera asíncrono:
Esto funciona incluso si el cargador fuera asíncrono:
@ -55,7 +55,7 @@ export default {
Cuando necesita generar datos con base en archivos locales, debe usar la opción `watch` en el cargador de datos para que los cambios hechos en esos archivos puedan accionar actualizaciones rápidas.
Cuando necesita generar datos con base en archivos locales, debe usar la opción `watch` en el cargador de datos para que los cambios hechos en esos archivos puedan accionar actualizaciones rápidas.
La opción `watch` tabién es conveniente porque puede usar [patrones glob](https://github.com/mrmlnc/fast-glob#pattern-syntax) para corresponder a vários archivos. Los patrones pueden ser relativos al propio archivo del cargador, y la función `load()` recibirá los archivos correspondientes como paths absolutos.
La opción `watch` también es conveniente porque puede usar [patrones glob](https://github.com/mrmlnc/fast-glob#pattern-syntax) para corresponder a varios archivos. Los patrones pueden ser relativos al propio archivo del cargador, y la función `load()` recibirá los archivos correspondientes como paths absolutos.
El siguiente ejemplo muestra el cargamento de archivos CSV y la transformación de estos en JSON usando [csv-parse](https://github.com/adaltas/node-csv/tree/master/packages/csv-parse/). Como este archivo solo es ejecutado en el tiempo del build, usted no enviará el procesador de CSV para el cliente!
El siguiente ejemplo muestra el cargamento de archivos CSV y la transformación de estos en JSON usando [csv-parse](https://github.com/adaltas/node-csv/tree/master/packages/csv-parse/). Como este archivo solo es ejecutado en el tiempo del build, usted no enviará el procesador de CSV para el cliente!
@ -66,7 +66,7 @@ import { parse } from 'csv-parse/sync'
export default {
export default {
watch: ['./data/*.csv'],
watch: ['./data/*.csv'],
load(watchedFiles) {
load(watchedFiles) {
// watchedFiles será un array de paths absolutos de los archivos um array de caminhos absolutos dos arquivos correspondientes.
// watchedFiles será un array de paths absolutos de los archivos coincidentes
// generar un array de metadatos de post que puede ser usado para mostrar
// generar un array de metadatos de post que puede ser usado para mostrar
// una lista en el layout del tema
// una lista en el layout del tema
return watchedFiles.map((file) => {
return watchedFiles.map((file) => {
@ -81,7 +81,7 @@ export default {
## `createContentLoader`
## `createContentLoader`
Al construir un sitio enfocado en contenido, frecuentemente necesitamos crear una página de "archivo" o "índice": una página donde listamos todas las entradas disponibles en nuestra colección de contenido, por ejemplo, articulos de blog o páginas de API. Nosotros **podemos** implementar esto directamente con el API de cargador de datos, pero como este es un caso de uso tan común, VitePress también proporciona un auxiliar `createContentLoader` para simplificar esto:
Al construir un sitio enfocado en contenido, frecuentemente necesitamos crear una página de "archivo" o "índice": una página donde listamos todas las entradas disponibles en nuestra colección de contenido, por ejemplo, artículos de blog o páginas de API. Nosotros **podemos** implementar esto directamente con el API de cargador de datos, pero como este es un caso de uso tan común, VitePress también proporciona un auxiliar `createContentLoader` para simplificar esto:
```js
```js
// posts.data.js
// posts.data.js
@ -90,7 +90,7 @@ import { createContentLoader } from 'vitepress'
El auxiliar acepta un patrón glob relativo al [diretório fuente](./routing#source-directory) y retorna un objeto de cargador de datos `{ watch, load }` que puede ser usado como exportación por defecto en un archivo de cargador de datos. El también implementa cache con base en los sellos se datos del archivo para mejorar el desempeño en el desarrollo.
El auxiliar acepta un patrón glob relativo al [directorio fuente](./routing#source-directory) y retorna un objeto de cargador de datos `{ watch, load }` que puede ser usado como exportación por defecto en un archivo de cargador de datos. El también implementa cache con base en los sellos se datos del archivo para mejorar el desempeño en el desarrollo.
Note que el cargador solo funciona con archivos Markdown - archivos no Markdown encontrados serán ignorados.
Note que el cargador solo funciona con archivos Markdown - archivos no Markdown encontrados serán ignorados.
@ -112,7 +112,7 @@ interface ContentData {
}
}
```
```
Por defecto, apenas `url` y `frontmatter` son proporcionados. Esto ocurre porque los datos cargados serán incorporados como JSON en el paquete del cliente, entonces necesitamos ser cautelosos con su tamaño. Aqui está un ejemplo de cómo usar los datos para construir una página de índice de blog mínima:
Por defecto, apenas `url` y `frontmatter` son proporcionados. Esto ocurre porque los datos cargados serán incorporados como JSON en el paquete del cliente, entonces necesitamos ser cautelosos con su tamaño. Aquí está un ejemplo de cómo usar los datos para construir una página de índice de blog mínima:
@ -49,23 +49,23 @@ Las siguientes orientaciones están basadas en algunos supuestos:
## Configurando un Path Base Publico {#setting-a-public-base-path}
## Configurando un Path Base Publico {#setting-a-public-base-path}
Por defecto, asumimos que el sitio será implantado en el path raiz de un dominio (`/`). Si su sitio fuera servido en un subpath, por ejemplo, `https://meusite.com/blog/`, necesitará entonces configurar la opción [`base`](../reference/site-config#base) para `'/blog/'` en la configuración VitePress.
Por defecto, asumimos que el sitio será implantado en el path raíz de un dominio (`/`). Si su sitio fuera servido en un subpath, por ejemplo, `https://meusite.com/blog/`, necesitará entonces configurar la opción [`base`](../reference/site-config#base) para `'/blog/'` en la configuración VitePress.
**Ejemplo:** Al usar GitHub Pages (ou GitLab Pages) e implantar en `user.github.io/repo/`, defina su `base` como `/repo/`.
**Ejemplo:** Al usar GitHub Pages (ou GitLab Pages) e implantar en `user.github.io/repo/`, defina su `base` como `/repo/`.
## Headers de Cache HTTP {#http-cache-headers}
## Headers de Cache HTTP {#http-cache-headers}
Si tiene control sobre los headers HTTP de su servidor en producción, se puede configurar headers `cache-control` para obtener mejor desempeño en vistar repetidas.
Si tiene control sobre los headers HTTP de su servidor en producción, se puede configurar headers `cache-control` para obtener mejor desempeño en visitas repetidas.
La compilación de producción usa nombres de archivos con hash para assets estáticos (JavaScript, CSS e otros assets que no están en `public`). Se inspecciona la previa de producción usando las herramientas de desarrollador de su navegador en la pestaña red, verá archivos como `app.4f283b18.js`.
La compilación de producción usa nombres de archivos con hash para assets estáticos (JavaScript, CSS e otros assets que no están en `public`). Se inspecciona la previa de producción usando las herramientas de desarrollador de su navegador en la pestaña red, verá archivos como `app.4f283b18.js`.
Este hash `4f283b18` es generado a partir del contenido de este archivo. La misma URL con hash es garantizada para servir el mismo contenido del archivo - se el contenido cambia, las URLs también cambian. Esto significa que puede utilizar con seguridad los headers de cahe más fuertespara esos archivos. Todos esos archivos serán colocados en `assets/` en la directorio de salida, entonces puede configurar el siguiente header para ellos:
Este hash `4f283b18` es generado a partir del contenido de este archivo. La misma URL con hash es garantizada para servir el mismo contenido del archivo - se el contenido cambia, las URLs también cambian. Esto significa que puede utilizar con seguridad los headers de cache más fuertespara esos archivos. Todos esos archivos serán colocados en `assets/` en la directorio de salida, entonces puede configurar el siguiente header para ellos:
```
```
Cache-Control: max-age=31536000,immutable
Cache-Control: max-age=31536000,immutable
```
```
::: detralles Ejemplo de archivo `_headers` do Netlify
::: detalles Ejemplo de archivo `_headers` do Netlify
Nota: el archivo `_headers` debe ser colocado en [diretório public](./asset-handling#the-public-directory) - en nuestro caso, `docs/public/_headers` - para que el sea copiado exactamente para la directorio de salida.
Nota: el archivo `_headers` debe ser colocado en [directorio public](./asset-handling#the-public-directory) - en nuestro caso, `docs/public/_headers` - para que el sea copiado exactamente para la directorio de salida.
[Documentación de headers personalizados de Netlify](https://docs.netlify.com/routing/headers/)
[Documentación de headers personalizados de Netlify](https://docs.netlify.com/routing/headers/)
@ -97,13 +97,13 @@ Nota: el archivo `_headers` debe ser colocado en [diretório public](./asset-han
}
}
```
```
Nota: el archivo `vercel.json` debe ser colocado en la raiz de su **repositório**.
Nota: el archivo `vercel.json` debe ser colocado en la raíz de su **repositorio**.
[Documentación Vercel sobre configuración de headers ](https://vercel.com/docs/concepts/projects/project-configuration#headers)
[Documentación Vercel sobre configuración de headers ](https://vercel.com/docs/concepts/projects/project-configuration#headers)
@ -114,12 +114,12 @@ Configure un nuevo proyecto y altere estas configuraciones usando su panel:
- **Versión de Node:**`18` (o superior)
- **Versión de Node:**`18` (o superior)
::: warning
::: warning
No active opciones como _Auto Minify_ para código HTML. Eso removera comentarios de salida que tiene significado para Vue. Habrán errores de incompatibilidad de hidratación se fueran removidos.
No active opciones como _Auto Minify_ para código HTML. Eso removerá comentarios de salida que tiene significado para Vue. Habrán errores de incompatibilidad de hidratación se fueran removidos.
:::
:::
### GitHub Pages
### GitHub Pages
1. Cree un archivo llamado `deploy.yml` dentro del directorio `.github/workflows` do seu projeto com algum conteúdo como este:
1. Cree un archivo llamado `deploy.yml` dentro del directorio `.github/workflows` de su proyecto con contenido como este:
```yaml
```yaml
# Ejemplo de flujo de trabajo para compilar e implantar un sitio VitePress en GitHub Pages
# Ejemplo de flujo de trabajo para compilar e implantar un sitio VitePress en GitHub Pages
@ -132,7 +132,7 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
push:
push:
branches: [main]
branches: [main]
# Permite ejecutar manualmente este flujo de trabajo en la guia Actions
# Permite ejecutar manualmente este flujo de trabajo en la guía Actions
workflow_dispatch:
workflow_dispatch:
# Define permisos GITHUB_TOKEN para la implementación en GitHub Pages
# Define permisos GITHUB_TOKEN para la implementación en GitHub Pages
@ -142,7 +142,7 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
id-token: write
id-token: write
# Permite apenas una implantación simultánea, omitiendo ejecuciones en fila entre la ejecución en progreso y la última de la fila.
# Permite apenas una implantación simultánea, omitiendo ejecuciones en fila entre la ejecución en progreso y la última de la fila.
# Sin embargo, NO cancela ejecuciones en progreso, pues queremos permitir que esas implantaciones de producción sean concuidas.
# Sin embargo, NO cancela ejecuciones en progreso, pues queremos permitir que esos despliegues a producción se completen.
concurrency:
concurrency:
group: pages
group: pages
cancel-in-progress: false
cancel-in-progress: false
@ -192,18 +192,18 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
uses: actions/deploy-pages@v4
uses: actions/deploy-pages@v4
```
```
Asegurese de que la opción `base` en su VitePress esté configurada correctamentse. Vea [Configuranco un Path base Público](#setting-a-public-base-path) para más detalles.
Asegúrese de que la opción `base` en su VitePress esté configurada correctamente. Vea [Configuración un Path base Público](#setting-a-public-base-path) para más detalles.
:::
:::
2. En las configuraciones de su repositorio sobre el item del menú "Pages", seleccione "GitHub Actions" en "Build and deployment > Source".
2. En las configuraciones de su repositorio sobre el item del menú "Pages", seleccione "GitHub Actions" en "Build and deployment > Source".
3. Envie sus modificaciones para el branch `main` y espere la conclusión del flujo de trabajo de GitHub Actions. Verá su sitio implantado en `https://<username>.github.io/[repository]/` o `https://<custom-domain>/` dependiendo de sus configuraciones. Su sitio será implantado automáticamente en cada push para la branch `main`.
3. Envié sus modificaciones para el branch `main` y espere la conclusión del flujo de trabajo de GitHub Actions. Verá su sitio implantado en `https://<username>.github.io/[repository]/` o `https://<custom-domain>/` dependiendo de sus configuraciones. Su sitio será implantado automáticamente en cada push para la branch `main`.
### GitLab Pages
### GitLab Pages
1. Defina `outDir` en la configuración VitePress como `../public`. Configure la opción `base` para `'/<repository>/'` se desea implantar en `https://<username>.gitlab.io/<repository>/`.
1. Defina `outDir` en la configuración VitePress como `../public`. Configure la opción `base` para `'/<repository>/'` se desea implantar en `https://<username>.gitlab.io/<repository>/`.
2. Cree un archivo llamado `.gitlab-ci.yml` en la raiz del proyecto con el contenido abajo. Esto construirá e implantará su sitio siempre que haga alteraciones en el contenido.
2. Cree un archivo llamado `.gitlab-ci.yml` en la raíz del proyecto con el contenido abajo. Esto construirá e implantará su sitio siempre que haga alteraciones en el contenido.
```yaml
```yaml
image: node:18
image: node:18
@ -212,7 +212,7 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
paths:
paths:
- node_modules/
- node_modules/
script:
script:
# - apk add git # Desconecte eso se estuviera usando imagenes pequeñas de Docker como Alpine y tuviera lastUpdated habilitado
# - apk add git # Desconecte eso se estuviera usando imágenes pequeñas de Docker como Alpine y tuviera lastUpdated habilitado
- npm install
- npm install
- npm run docs:build
- npm run docs:build
artifacts:
artifacts:
@ -234,7 +234,7 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
### Firebase {#firebase}
### Firebase {#firebase}
1. Cree `firebase.json` y `.firebaserc` en la raiz de su proyecto:
1. Cree `firebase.json` y `.firebaserc` en la raíz de su proyecto:
`firebase.json`:
`firebase.json`:
@ -273,9 +273,9 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
### Heroku
### Heroku
1. Siga la documentación y el guia proporcionados por [`heroku-buildpack-static`](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static).
1. Siga la documentación y el guía proporcionados por [`heroku-buildpack-static`](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static).
2. Cree un archivo llamado `static.json` en la raiz de su proyecto con el contenido abajo:
2. Cree un archivo llamado `static.json` en la raíz de su proyecto con el contenido abajo:
@ -15,12 +15,12 @@ Sin embargo, hay casos en que apenas la configuración no será suficiente. Por
Esas personalizaciones avanzadas exigirán el uso de un tema personalizado que "extiende" el tema por defecto.
Esas personalizaciones avanzadas exigirán el uso de un tema personalizado que "extiende" el tema por defecto.
::: tip
::: tip
Antes de seguir, asegurese de leer primero [Usando un Tema Personalizado](./custom-theme) para entender como funcionan los temas personalizados.
Antes de seguir, asegúrese de leer primero [Usando un Tema Personalizado](./custom-theme) para entender como funcionan los temas personalizados.
:::
:::
## Personalizando el CSS {#customizing-css}
## Personalizando el CSS {#customizing-css}
El CSS del tema por defecto puede ser personalizado substuyendo las variables CSS a nivel de la raiz:
El CSS del tema por defecto puede ser personalizado substrayendo las variables CSS a nivel de la raíz:
```js
```js
// .vitepress/theme/index.js
// .vitepress/theme/index.js
@ -38,11 +38,11 @@ export default DefaultTheme
}
}
```
```
Vea las [variables CSS del tema por defecto](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css) que pueden ser substituídas.
Vea las [variables CSS del tema por defecto](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css) que pueden ser substituidas.
## Usando Fuentes Diferentes {#using-different-fonts}
## Usando Fuentes Diferentes {#using-different-fonts}
VitePress usa [Inter](https://rsms.me/inter/) como fuente por defecto e incluirá las fuentes en la salida de compilación. La fuente también es pre-cargada automaticamente en producción. Sin embargo, eso puede no ser deseable se quiere usar una fuente principal diferente.
VitePress usa [Inter](https://rsms.me/inter/) como fuente por defecto e incluirá las fuentes en la salida de compilación. La fuente también es pre-cargada automáticamente en producción. Sin embargo, eso puede no ser deseable se quiere usar una fuente principal diferente.
Para evitar la inclusión de Inter en la salida de compilación, importe el tema de `vitepress/theme-without-fonts`:
Para evitar la inclusión de Inter en la salida de compilación, importe el tema de `vitepress/theme-without-fonts`:
@ -63,7 +63,7 @@ export default DefaultTheme
```
```
::: warning
::: warning
Si está usando componentes opcionales como los componentes de la [Página del equipo](../reference/default-theme-team-page), asegurese de también importarlos de `vitepress/theme-without-fonts`!
Si está usando componentes opcionales como los componentes de la [Página del equipo](../reference/default-theme-team-page), asegúrese de también importarlos de `vitepress/theme-without-fonts`!
:::
:::
Si su fuente es un archivo local referenciado via `@font-face`, ella será procesada como un asset e incluida en `.vitepress/dist/assets` con un nombre de archivo hash. Para pre-cargar ese archivo, use el hook de construcción [transformHead](../reference/site-config#transformhead):
Si su fuente es un archivo local referenciado via `@font-face`, ella será procesada como un asset e incluida en `.vitepress/dist/assets` con un nombre de archivo hash. Para pre-cargar ese archivo, use el hook de construcción [transformHead](../reference/site-config#transformhead):
@ -123,11 +123,11 @@ export default {
} satisfies Theme
} satisfies Theme
```
```
Como estamos usando Vite, puede también aprovechar la [funcionalidad de importación glob](https://vitejs.dev/guide/features.html#glob-import) de Vite para registrar automaticamente un directorio de componetes.
Como estamos usando Vite, puede también aprovechar la [funcionalidad de importación glob](https://vitejs.dev/guide/features.html#glob-import) de Vite para registrar automáticamente un directorio de componentes.
## _Slots_ en el Layout {#layout-slots}
## _Slots_ en el Layout {#layout-slots}
El componente `<Layout/>` del tema por defecto posee algunos _slots_ que pueden ser usados para inyectar contenido en lugares específicos de la página. Aqui un ejemplo de como inyectar un componente antes del esquema:
El componente `<Layout/>` del tema por defecto posee algunos _slots_ que pueden ser usados para inyectar contenido en lugares específicos de la página. Aquí un ejemplo de como inyectar un componente antes del esquema:
@ -9,7 +9,7 @@ Puede experimentar VitePress directamente en su navegador en [StackBlitz](https:
### Prerrequisitos {#prerequisites}
### Prerrequisitos {#prerequisites}
- [Node.js](https://nodejs.org/) versión 18 o superior.
- [Node.js](https://nodejs.org/) versión 18 o superior.
- Terminal para acessar VitePress a través de su interfaz de linea de comando (CLI).
- Terminal para acceder VitePress a través de su interfaz de linea de comando (CLI).
- Editor de texto con soporte a sintaxis [Markdown](https://en.wikipedia.org/wiki/Markdown).
- Editor de texto con soporte a sintaxis [Markdown](https://en.wikipedia.org/wiki/Markdown).
- [VSCode](https://code.visualstudio.com/) es recomendado, junto con la [extensión oficial Vue](https://marketplace.visualstudio.com/items?itemName=Vue.volar).
- [VSCode](https://code.visualstudio.com/) es recomendado, junto con la [extensión oficial Vue](https://marketplace.visualstudio.com/items?itemName=Vue.volar).
@ -53,7 +53,7 @@ Si usa PNPM, percibirá un aviso de ausencia de `@docsearch/js`. Esto no evita q
::: tip NOTA
::: tip NOTA
VitePress es un paquete apenas para ESM. No use `require()` para importarlo, y asegurese de que el `package.json` más cercano contiene `"type": "module"`, o cambie la extensión de archivo de sus archivos relevantes como `.vitepress/config.js` a `.mjs`/`.mts`. Consulte la [Guía de resolución de problemas Vite](http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only) para más detalles. Además de eso, dentro de contextos de JavaScript asíncronos, puede usar `await import('vitepress')`.
VitePress es un paquete apenas para ESM. No use `require()` para importarlo, y asegúrese de que el `package.json` más cercano contiene `"type": "module"`, o cambie la extensión de archivo de sus archivos relevantes como `.vitepress/config.js` a `.mjs`/`.mts`. Consulte la [Guía de resolución de problemas Vite](http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only) para más detalles. Además de eso, dentro de contextos de JavaScript asíncronos, puede usar `await import('vitepress')`.
:::
:::
@ -86,7 +86,7 @@ Será saludado con algunas preguntas simples:
<<<@/snippets/init.ansi
<<<@/snippets/init.ansi
::: tip Vue como Dependencia Correspondiente
::: tip Vue como Dependencia Correspondiente
Si tiene la intención de realizar una personalización que usa componentes Vue o APIs, debe instalar explicitamente `vue` como una dependencia correspondiente.
Si tiene la intención de realizar una personalización que usa componentes Vue o APIs, debe instalar explícitamente `vue` como una dependencia correspondiente.
:::
:::
## Estrutura de Archivos {#file-structure}
## Estrutura de Archivos {#file-structure}
@ -106,7 +106,7 @@ Asumiendo la opción de desarrollar el proyecto VitePress en `./docs`, la estruc
└─ package.json
└─ package.json
```
```
El directorio `docs` es considerado la **raiz del proyecto** de su sitio VitePress. El directorio `.vitepress` es un lugar reservado para archivos de configuración VitePress, caché del servidor de desarrollo, resultado del build, y código de personalización de tema opcional.
El directorio `docs` es considerado la **raíz del proyecto** de su sitio VitePress. El directorio `.vitepress` es un lugar reservado para archivos de configuración VitePress, caché del servidor de desarrollo, resultado del build, y código de personalización de tema opcional.
::: tip
::: tip
Por defecto, VitePress almacena el caché del servidor de desarrollo en `.vitepress/cache`, y el resultado del build de producción en `.vitepress/dist`. Se usa Git, debe adicionarlos a su archivo `.gitignore`. Estas ubicaciones también pueden ser [configuradas](../reference/site-config#outdir).
Por defecto, VitePress almacena el caché del servidor de desarrollo en `.vitepress/cache`, y el resultado del build de producción en `.vitepress/dist`. Se usa Git, debe adicionarlos a su archivo `.gitignore`. Estas ubicaciones también pueden ser [configuradas](../reference/site-config#outdir).
@ -114,7 +114,7 @@ Por defecto, VitePress almacena el caché del servidor de desarrollo en `.vitepr
### El archivo de configuración {#the-config-file}
### El archivo de configuración {#the-config-file}
El archivo de configuración (`.vitepress/config.js`) permite que personalice vários aspectos de su sitio VitePress, con las opciones más básicas siendo el titulo y la descripción del sitio:
El archivo de configuración (`.vitepress/config.js`) permite que personalice varios aspectos de su sitio VitePress, con las opciones más básicas siendo el titulo y la descripción del sitio:
```js
```js
// .vitepress/config.js
// .vitepress/config.js
@ -129,15 +129,15 @@ export default {
}
}
```
```
Puede también configurar el comportamiento del tema a través de la opción `themeConfig`. Consulte la [Referencia de Configuración](../reference/site-config) para detaller completos sobre todas las opciones de configuración.
Puede también configurar el comportamiento del tema a través de la opción `themeConfig`. Consulte la [Referencia de Configuración](../reference/site-config) para los detalles completos sobre todas las opciones de configuración.
### Archivos fuente {#source-files}
### Archivos fuente {#source-files}
Archivos Markdown fuera del directorio `.vitepress` son considerados **archivos fuente**.
Archivos Markdown fuera del directorio `.vitepress` son considerados **archivos fuente**.
VitePress usa **enrutamiento basado en archivos**: cada archivo `.md` es compilado en un archivo `.html` correspondiente con el mismo path. Por ejemplo, `index.md` será compilado en `index.html`, y puede ser visitado en el path raiz `/` del sitio VitePress resultante.
VitePress usa **enrutamiento basado en archivos**: cada archivo `.md` es compilado en un archivo `.html` correspondiente con el mismo path. Por ejemplo, `index.md` será compilado en `index.html`, y puede ser visitado en el path raíz `/` del sitio VitePress resultante.
VitePress también proporciona la habilidad de generar URLs limpias, retambém fornece a habilidade de gerar URLs limpas, reescribir paths, y generare páginas dinámicamente. Estos serán tratados en la [Guía de Enrutamiento](./routing).
VitePress también proporciona la habilidad de generar URLs limpias, reescribir paths y generar páginas dinámicamente. Estos serán tratados en la [Guía de Enrutamiento](./routing).
## Instalado y Funcionando {#up-and-running}
## Instalado y Funcionando {#up-and-running}
@ -155,7 +155,7 @@ La herramienta debe tener también inyectado los siguientes scripts npm en su `p
}
}
```
```
El script `docs:dev` iniciará un servidor de desarrollo local con actualizaciones instantáneas. Ejecutelo con el siguiente comando:
El script `docs:dev` iniciará un servidor de desarrollo local con actualizaciones instantáneas. Ejecútelo con el siguiente comando:
::: code-group
::: code-group
@ -199,7 +199,7 @@ $ bun vitepress dev docs
:::
:::
Más usos de la linea de comandos están documaentados en la [Referencia CLI](../reference/cli).
Más usos de la linea de comandos están documentados en la [Referencia CLI](../reference/cli).
El servidor de desarrollo debe estar corriendo en `http://localhost:5173`. Visite la URL en su navegador para ver su nuevo sitio en acción!
El servidor de desarrollo debe estar corriendo en `http://localhost:5173`. Visite la URL en su navegador para ver su nuevo sitio en acción!
@ -213,4 +213,4 @@ El servidor de desarrollo debe estar corriendo en `http://localhost:5173`. Visit
- Se quiere profundizar la personalización de la apariencia de su sitio, explore tanto [Extienda el Tema por Defecto](./extending-default-theme) como [Construya un Tema Personalizado](./custom-theme).
- Se quiere profundizar la personalización de la apariencia de su sitio, explore tanto [Extienda el Tema por Defecto](./extending-default-theme) como [Construya un Tema Personalizado](./custom-theme).
- Una vez que su documentación tome forma, asegurese de leer la [Guia de Despliegue](./deploy).
- Una vez que su documentación tome forma, asegúrese de leer la [Guía de Despliegue](./deploy).
head?: HeadConfig[] // será mezclado con las entradas head existentes, las metatags duplicadas son removidas automáticamente
head?: HeadConfig[] // será mezclado con las entradas head existentes, las metatags duplicadas son removidas automáticamente
themeConfig?: ThemeConfig // será mezclado superficialmente, cosas comunes pueden ser colocadas en la entrada superios de themeConfig
themeConfig?: ThemeConfig // será mezclado superficialmente, las cosas comunes pueden colocar en la entrada themeConfig en la parte superior
}
}
```
```
Consulte la interfaz [`DefaultTheme.Config`](https://github.com/vuejs/vitepress/blob/main/types/default-theme.d.ts) para obtener detaller sobre la personalización de los textos marcadores del tema por defecto. No substituya `themeConfig.algolia` o `themeConfig.carbonAds` en el nivel de idioma. Consulte la [documentação Algolia](../reference/default-theme-search#i18n) para usar la busqueda multilenguaje.
Consulte la interfaz [`DefaultTheme.Config`](https://github.com/vuejs/vitepress/blob/main/types/default-theme.d.ts) para obtener detalles sobre la personalización de los textos marcadores del tema por defecto. No substituya `themeConfig.algolia` o `themeConfig.carbonAds` en el nivel de idioma. Consulte la [documentación Algolia](../reference/default-theme-search#i18n) para usar la búsqueda multilenguaje.
**Consejo profesional:** El archivo de configuración puede ser almacenado en `docs/.vitepress/config/index.ts` también. Esto puede ayudar a organizar las cosas creando un archivo de configuración por idioma y entonces mezclarlos y exportarlos a partir de `index.ts`.
**Consejo profesional:** El archivo de configuración puede ser almacenado en `docs/.vitepress/config/index.ts` también. Esto puede ayudar a organizar las cosas creando un archivo de configuración por idioma y entonces mezclarlos y exportarlos a partir de `index.ts`.
Además de eso, puede definir títulos personalizados globalmente adicionando el siguiente contenifo en el archivo de configuración del sitio, útil si no estuviera escribiendo en ingles:
Además de eso, puede definir títulos personalizados globalmente adicionando el siguiente contenido en el archivo de configuración del sitio, útil si no estuviera escribiendo en ingles:
```ts
```ts
// config.ts
// config.ts
@ -228,7 +228,7 @@ export default defineConfig({
### `raw`
### `raw`
Este es un recipiente especial que puee ser usado para evitar conflictos de estilo y enrutador con VitePress. Esto es especialmente útil al documentar bibliotecas de componentes. Puede tambien verificar [whyframe](https://whyframe.dev/docs/integrations/vitepress) para mejor aislamiento.
Este es un recipiente especial que puede ser usado para evitar conflictos de estilo y enrutador con VitePress. Esto es especialmente útil al documentar bibliotecas de componentes. Puede también verificar [whyframe](https://whyframe.dev/docs/integrations/vitepress) para mejor aislamiento.
**Sintaxis**
**Sintaxis**
@ -260,7 +260,7 @@ La clase `vp-raw` también puede ser usada directamente en elementos. El aislami
```js
```js
postcssIsolateStyles({
postcssIsolateStyles({
includeFiles: [/vp-doc\.css/] // o padrão é /base\.css/
includeFiles: [/vp-doc\.css/] // por defecto a /base\.css/
})
})
```
```
@ -270,7 +270,7 @@ VitePress también soporta [alertas en estilo GitHub](https://docs.github.com/en
```md
```md
> [!NOTE]
> [!NOTE]
> Destaca informaciones que los usuarios deben tener en consideración, incluso leyendo rapidamente.
> Destaca informaciones que los usuarios deben tener en consideración, incluso leyendo rápidamente.
> [!TIP]
> [!TIP]
> Informaciones opcionales para ayudar al usuario a tener más éxito.
> Informaciones opcionales para ayudar al usuario a tener más éxito.
@ -286,7 +286,7 @@ VitePress también soporta [alertas en estilo GitHub](https://docs.github.com/en
```
```
> [!NOTE]
> [!NOTE]
> Destaca informaciones que los usuarios deben tener en consideración, incluso leyendo rapidamente.
> Destaca informaciones que los usuarios deben tener en consideración, incluso leyendo rápidamente.
> [!TIP]
> [!TIP]
> Informaciones opcionales para ayudar al usuario a tener más éxito.
> Informaciones opcionales para ayudar al usuario a tener más éxito.
@ -342,7 +342,7 @@ export default {
</ul>
</ul>
```
```
Una [lista de lenguajes válidas](https://shiki.style/languages) está disponible en el repositório Shiki.
Una [lista de lenguajes válidas](https://shiki.style/languages) está disponible en el repositorio Shiki.
También puede personalizar el tema de destaque de sintaxis en la configuración de la aplicación. Consulte las [opciones `markdown`](../reference/site-config#markdown) para más detalles.
También puede personalizar el tema de destaque de sintaxis en la configuración de la aplicación. Consulte las [opciones `markdown`](../reference/site-config#markdown) para más detalles.
@ -390,7 +390,7 @@ export default { // Destacado
msg: `Destacado!
msg: `Destacado!
Esta linea no está destacada,
Esta linea no está destacada,
pero esta y las próximas están.`,
pero esta y las próximas están.`,
motd: 'VitePress es increible',
motd: 'VitePress es increíble',
lorem: 'ipsum'
lorem: 'ipsum'
}
}
}
}
@ -407,7 +407,7 @@ export default { // Destacado
msg: `Destacado!
msg: `Destacado!
Esta linea no está destacada,
Esta linea no está destacada,
pero esta y las próximas están.`,
pero esta y las próximas están.`,
motd: 'VitePress es increible',
motd: 'VitePress es increíble',
lorem: 'ipsum',
lorem: 'ipsum',
}
}
}
}
@ -430,7 +430,7 @@ export default {
```
```
````
````
**Saída**
**Salida**
```js
```js
export default {
export default {
@ -508,7 +508,7 @@ export default {
## Errores y Avisos en Bloques de Código {#errors-and-warnings-in-code-blocks}
## Errores y Avisos en Bloques de Código {#errors-and-warnings-in-code-blocks}
Adicionar los comentarios `// [!code warning]` o `// [!code error]` en una linea coloreará los bloques conforme necesário.
Adicionar los comentarios `// [!code warning]` o `// [!code error]` en una linea coloreará los bloques conforme necesario.
**Entrada**
**Entrada**
@ -628,7 +628,7 @@ También soporta [destaque de linea](#line-highlighting-in-code-blocks):
::: tip
::: tip
El valor de `@` corresponde a la raiz del código fuente. Por defecto, es la raiz del proyecto VitePress, a menos que `srcDir` sea configurado. Alternativamente, puede también importar de paths relativos:
El valor de `@` corresponde a la raíz del código fuente. Por defecto, es la raíz del proyecto VitePress, a menos que `srcDir` sea configurado. Alternativamente, puede también importar de paths relativos:
```md
```md
<<<../snippets/snippet.js
<<<../snippets/snippet.js
@ -701,7 +701,7 @@ export default config
:::
:::
````
````
**Salída**
**Salida**
::: code-group
::: code-group
@ -758,10 +758,10 @@ También puede [importar _snippets_ de código](#import-code-snippets) en grupos
## Inclusión de Archivo Markdown {#markdown-file-inclusion}
## Inclusión de Archivo Markdown {#markdown-file-inclusion}
Puede incluir un archivo markdown en otro archvo markdown, incluso anidado.
Puede incluir un archivo markdown en otro archivo markdown, incluso anidado.
::: tip
::: tip
Puede prefijar el path del markdown con `@`, el actuará como la raiz de origen. Por defecto, es la raiz del projecto VitePress, a menos que `srcDir` sea configurado.
Puede prefijar el path del markdown con `@`, el actuará como la raíz de origen. Por defecto, es la raíz del proyecto VitePress, a menos que `srcDir` sea configurado.
:::
:::
Por ejemplo, puede incluir un archivo markdown relativo usando esto:
Por ejemplo, puede incluir un archivo markdown relativo usando esto:
@ -837,7 +837,7 @@ Puede ser creada usando `.foorc.json`.
El formato del intervalo de lineas seleccionado puede ser: `{3,}`, `{,10}`, `{1,10}`
El formato del intervalo de lineas seleccionado puede ser: `{3,}`, `{,10}`, `{1,10}`
::: warning
::: warning
Observe que esto no genera errores si el archivo no está presente. Por lo tanto, al usar este recurso, asegurese de que el contenido está siendo mostrado como se espera.:::
Observe que esto no genera errores si el archivo no está presente. Por lo tanto, al usar este recurso, asegúrese de que el contenido está siendo mostrado como se espera.:::
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | la rotacional de $\vec{\mathbf{E}}$ es proporcional a la tasa de variación de $\vec{\mathbf{B}}$ |
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | la rotacional de $\vec{\mathbf{E}}$ es proporcional a la tasa de variación de $\vec{\mathbf{B}}$ |
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | la rotacional de $\vec{\mathbf{E}}$ es proporcional a la tasa de variación de $\vec{\mathbf{B}}$ |
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | la rotacional de $\vec{\mathbf{E}}$ es proporcional a la tasa de variación de $\vec{\mathbf{B}}$ |
El modo MPA (Aplicación de multiples páginas) puede ser habilitado por la linea de comandos con `vitepress build --mpa`, o a través de la configuración por la opción `mpa: true`.
El modo MPA (Aplicación de multiples páginas) puede ser habilitado por la linea de comandos con `vitepress build --mpa`, o a través de la configuración por la opción `mpa: true`.
En el modo MPA, todas las páginas son presentadas por defecto sin JavaScript incluído. Como resultado, el sitio en producción probablemente tendrá una marca de desempeño de visita inicial superior con herramientas de auditoría.
En el modo MPA, todas las páginas son presentadas por defecto sin JavaScript incluido. Como resultado, el sitio en producción probablemente tendrá una marca de desempeño de visita inicial superior con herramientas de auditoría.
Sin embargo, debido a la ausencia de navegación SPA, los links entre páginas resultan en recargas de página completos. Navegaciones después de la carga en el modo MPA no parecerán tan instantáneos en comparación con el modo SPA.
Sin embargo, debido a la ausencia de navegación SPA, los links entre páginas resultan en recargas de página completos. Navegaciones después de la carga en el modo MPA no parecerán tan instantáneos en comparación con el modo SPA.
También note que no tener JavaScript por defecto significa que está esencialmente utilizando Vue como modelo de lenguaje en el lado del servidor. Nungun manipulador de eventos será embutido en el navegador, entonces no habrá interactividad. Para cargar JavaScript en el lado del cliente, necesitará usar el tag especial `<script client>`:
También note que no tener JavaScript por defecto significa que está esencialmente utilizando Vue como modelo de lenguaje en el lado del servidor. Ningún manipulador de eventos será embutido en el navegador, entonces no habrá interactividad. Para cargar JavaScript en el lado del cliente, necesitará usar el tag especial `<script client>`:
## Enrutamiento basasdo en Archivos {#file-based-routing}
## Enrutamiento basado en Archivos {#file-based-routing}
VitePress utiliza enrutamiento basado en archivos, esto significa que las páginas HTML generadas son mapeadas de la estructura de directorios de los archivos Markdown. Por ejemplo, dada la siguiente estructura de directorio:
VitePress utiliza enrutamiento basado en archivos, esto significa que las páginas HTML generadas son mapeadas de la estructura de directorios de los archivos Markdown. Por ejemplo, dada la siguiente estructura de directorio:
El HTML resultante puede ser hospedado en cualquier servidor web que pueda servir archivos estáticos.
El HTML resultante puede ser hospedado en cualquier servidor web que pueda servir archivos estáticos.
## Diretório Raiz y fuente {#root-and-source-directory}
## Directorio Raíz y fuente {#root-and-source-directory}
Existen dos conceptos importantes en la estructura de archivos de un proyecto VitePress: el **directorio raiz** y el **directorio fuente**.
Existen dos conceptos importantes en la estructura de archivos de un proyecto VitePress: el **directorio raíz** y el **directorio fuente**.
### Directorio Raiz {#project-root}
### Directorio Raíz {#project-root}
El directorio raiz es donde VitePress busca por el directorio especial `.vitepress`. El directorio `.vitepress` es un lugar reservado para el archivo de configuración de VitePress, el caché del servidor de desarrollo, el resultado de la compilación y el código de personalización del tema opcional.
El directorio raíz es donde VitePress busca por el directorio especial `.vitepress`. El directorio `.vitepress` es un lugar reservado para el archivo de configuración de VitePress, el caché del servidor de desarrollo, el resultado de la compilación y el código de personalización del tema opcional.
Al ejecutar `vitepress dev` o `vitepress build` en el terminal, VitePress usará el directorio actual como directorio raiz del proyecto. Para especificar un subdirectorio como raiz, es necesario pasar el camino relativo para el comando. Por ejemplo, si el proyecto VitePress estuviera localizado en `./docs`, debe ejecutarse `vitepress dev docs`:
Al ejecutar `vitepress dev` o `vitepress build` en el terminal, VitePress usará el directorio actual como directorio raíz del proyecto. Para especificar un subdirectorio como raíz, es necesario pasar el camino relativo para el comando. Por ejemplo, si el proyecto VitePress estuviera localizado en `./docs`, debe ejecutarse `vitepress dev docs`:
```
```
.
.
├─ docs # directorio raiz
├─ docs # directorio raíz
│ ├─ .vitepress # directorio de configuración
│ ├─ .vitepress # directorio de configuración
│ ├─ getting-started.md
│ ├─ getting-started.md
│ └─ index.md
│ └─ index.md
@ -51,7 +51,7 @@ Al ejecutar `vitepress dev` o `vitepress build` en el terminal, VitePress usará
vitepress dev docs
vitepress dev docs
```
```
Esto resultará en el siguiente mapeamento de fuente para HTML:
Esto resultará en el siguiente mapeo de fuente para HTML:
El directorio fuente es donde sus archivos fuente en Markdown están. Por defecto, es el mismo que el directorio raiz. Sin embargo, puede configurarlo por medio de la opción de configuración [`srcDir`](../reference/site-config#srcdir).
El directorio fuente es donde sus archivos fuente en Markdown están. Por defecto, es el mismo que el directorio raíz. Sin embargo, puede configurarlo por medio de la opción de configuración [`srcDir`](../reference/site-config#srcdir).
La opción `srcDir` es resuelta en relación al directorio raiz del proyecto. Por ejemplo, con `srcDir: 'src'`, su estructura de archivos quedará así:
La opción `srcDir` es resuelta en relación al directorio raíz del proyecto. Por ejemplo, con `srcDir: 'src'`, su estructura de archivos quedará así:
Puede usar tanto paths absolutos como relativos al vincular páginas. Note que, incluso si ambas extensiones `.md` y `.html` funcionan, funcionem, la práctica recomendada es omitir las extensiones de archivo para que VitePress pueda generar las URLs finales con base en su configuración.
Puede usar tanto paths absolutos como relativos al vincular páginas. Note que, incluso si ambas extensiones `.md` y `.html` funcionan, la práctica recomendada es omitir las extensiones de archivo para que VitePress pueda generar las URLs finales con base en su configuración.
```md
```md
<!-- Hacer -->
<!-- Hacer -->
@ -93,7 +93,7 @@ Puede usar tanto paths absolutos como relativos al vincular páginas. Note que,
[Getting Started](./getting-started.html)
[Getting Started](./getting-started.html)
```
```
Averigue más sobre la vinculación de assets, como imagenes, en [Manipulación de Assets](./asset-handling).
Averigue más sobre la vinculación de assets, como imágenes, en [Manipulación de Assets](./asset-handling).
### Vinculación de Páginas No VitePress {#linking-to-non-vitepress-pages}
### Vinculación de Páginas No VitePress {#linking-to-non-vitepress-pages}
@ -151,7 +151,7 @@ Sin embargo, si no puede configurar el servidor con ese soporte, será necesario
```
```
# Reescritura de Ruta {#route-rewrites}
# Reescritura de Ruta {#route-rewrites}
Puede personalizar el mapeamento entre la estructura de directorios fuente y las páginas generadas. Esto es útil cuando tiene una estructura de proyecto compleja. Por ejemplo, digamos que tiene un monorepo con varios paquetes y le gustaría colocar la documentación junto con los archivos fuente de esta forma:
Puede personalizar el mapeado entre la estructura de directorios fuente y las páginas generadas. Esto es útil cuando tiene una estructura de proyecto compleja. Por ejemplo, digamos que tiene un monorepo con varios paquetes y le gustaría colocar la documentación junto con los archivos fuente de esta forma:
```
```
.
.
@ -185,7 +185,7 @@ export default {
}
}
```
```
La opción `rewrites` también soporta parametros de ruta dinámicos. En el ejemplo arriba, sería tedioso listar todos los paths si tiene muchos paquetes. Dado que todos ellos tienen la misma estructura de archivo, puede simplificar la configuración así:
La opción `rewrites` también soporta parámetros de ruta dinámicos. En el ejemplo arriba, sería tedioso listar todos los paths si tiene muchos paquetes. Dado que todos ellos tienen la misma estructura de archivo, puede simplificar la configuración así:
```ts
```ts
export default {
export default {
@ -208,7 +208,7 @@ Cuando las reescrituras están habilitadas, **links relativos deben ser basados
## Rutas Dinámicas {#dynamic-routes}
## Rutas Dinámicas {#dynamic-routes}
Puede generar muchas páginas usando un único archivo Markdown y datos dinámicos. Por ejemplo, puede crear un archivo `packages/[pkg].md` que genera una página correspondiente para cáda paquete en un proyecto. Aqui, el segmento `[pkg]` es un **parámetro** de ruta que diferencia cada página de las otras.
Puede generar muchas páginas usando un único archivo Markdown y datos dinámicos. Por ejemplo, puede crear un archivo `packages/[pkg].md` que genera una página correspondiente para cada paquete en un proyecto. Aqui, el segmento `[pkg]` es un **parámetro** de ruta que diferencia cada página de las otras.
### Archivo de Carga de Paths {#paths-loader-file}
### Archivo de Carga de Paths {#paths-loader-file}
VitePress pre-interpreta la aplicación en Node.js durante la compilación del producción, utilizando las capacidades de Interpretación del lado del servidor (SSR) de Vue. Esto significa que todo el código personalizado en los componentes del tema está sujeto a la compatibilidad SSR.
VitePress pre-interpreta la aplicación en Node.js durante la compilación del producción, utilizando las capacidades de Interpretación del lado del servidor (SSR) de Vue. Esto significa que todo el código personalizado en los componentes del tema está sujeto a la compatibilidad SSR.
La [sección SSR en la documentación Vue oficial](https://vuejs.org/guide/scaling-up/ssr.html) proporciona más contexto sobre lo que es SSR, la relación entre SSR / SSG y notas comunes sobre escribir código amigable con SSR. La regla general es acceder apenas APIs deln navegador / DOM en los hooks `beforeMount` o `mounted` de los componentes Vue.
La [sección SSR en la documentación Vue oficial](https://vuejs.org/guide/scaling-up/ssr.html) proporciona más contexto sobre lo que es SSR, la relación entre SSR / SSG y notas comunes sobre escribir código amigable con SSR. La regla general es acceder apenas APIs del navegador / DOM en los hooks `beforeMount` o `mounted` de los componentes Vue.
## `<ClientOnly>`
## `<ClientOnly>`
@ -107,7 +107,7 @@ import { defineClientComponent } from 'vitepress'
En VitePress, cada archivo Markdown es compilado para HTML y entonces procesado como un [Componente de Archivo Único de Vue](https://vuejs.org/guide/scaling-up/sfc.html). Esto significa que puede usar cualquier funcionalidad de Vue dentro del Markdown, incluyendo la interpolación dinámica, usar componentes Vue o lógica arbitrária de componentes Vue dentro de la página adicionando una tag `<script>`.
En VitePress, cada archivo Markdown es compilado para HTML y entonces procesado como un [Componente de Archivo Único de Vue](https://vuejs.org/guide/scaling-up/sfc.html). Esto significa que puede usar cualquier funcionalidad de Vue dentro del Markdown, incluyendo la interpolación dinámica, usar componentes Vue o lógica arbitraria de componentes Vue dentro de la página adicionando una tag `<script>`.
Vale resaltar que VitePress aprovecha el compilador Vue para detectar y optimizar automáticamente las partes puramente estáticas del contenido Markdown. Los contenidos estáticaos son optimizados en nodos de espacio reservado únicos y eliminados de la carga JavaScript de la página para visitas iniciales. Ellos también son ignorados durante la hidratación en el lado del cliente. En resumen, solo paga por las partes dinámicas en cualquier página específica.
Vale resaltar que VitePress aprovecha el compilador Vue para detectar y optimizar automáticamente las partes puramente estáticas del contenido Markdown. Los contenidos estáticos son optimizados en nodos de espacio reservado únicos y eliminados de la carga JavaScript de la página para visitas iniciales. Ellos también son ignorados durante la hidratación en el lado del cliente. En resumen, solo paga por las partes dinámicas en cualquier página específica.
::: tip Compatibilidad SSR
::: tip Compatibilidad SSR
Todo uso de Vue necesita ser compatible con SSR. Consulte [Compatibilidad SSR](./ssr-compat) para detalles y soluciones comunes.
Todo uso de Vue necesita ser compatible con SSR. Consulte [Compatibilidad SSR](./ssr-compat) para detalles y soluciones comunes.
@ -40,7 +40,7 @@ Las Directivas también funcionan (observe que, por definición, HTML crudo tamb
## `<script>` e `<style>`
## `<script>` e `<style>`
las tags `<script>` e `<style>` en nivel raiz en los archivos Markdown funcionan igualmente como en los componentes de archivo único Vue, incluyendo `<script setup>`, `<style module>`, y etc. La principal diferencia aquí es que no hay una tag `<template>`: todo contenido en nivel raiz es Markdown. Además, observe que todas las tags deben ser colocadas **después** del frontmatter:
las tags `<script>` e `<style>` en nivel raíz en los archivos Markdown funcionan igualmente como en los componentes de archivo único Vue, incluyendo `<script setup>`, `<style module>`, y etc. La principal diferencia aquí es que no hay una tag `<template>`: todo contenido en nivel raíz es Markdown. Además, observe que todas las tags deben ser colocadas **después** del frontmatter:
```html
```html
---
---
@ -68,10 +68,10 @@ El conteo es: {{ count }}
```
```
::: warning Evite `<style scoped>` en el Markdown
::: warning Evite `<style scoped>` en el Markdown
Cuando es usado en Markdown, `<style scoped>` exige la adición de atributos especiales a cada elemento en la página actual, lo que aumentará significativamente el tamaño de la página. `<style module>` es preferido cuando es necesaria una estilización localizada en una página.
Cuando es usado en Markdown, `<style scoped>` exige la adición de atributos especiales a cada elemento en la página actual, lo que aumentará significativamente el tamaño de la página. `<style module>` es preferido cuando es necesaria una estilizado localizada en una página.
:::
:::
También tiene acceso a los APIs de tiempo de ejecución VitePress, como el [auxiliar `useData`](../reference/runtime-api#usedata), que proporciona acceso a los metadados de la página actual:
También tiene acceso a los APIs de tiempo de ejecución VitePress, como el [auxiliar `useData`](../reference/runtime-api#usedata), que proporciona acceso a los metadatos de la página actual:
**Entrada**
**Entrada**
@ -102,7 +102,7 @@ Puede importar y usar componentes Vue directamente en los archivos Markdown.
### Importando en el Markdown {#importing-in-markdown}
### Importando en el Markdown {#importing-in-markdown}
Si un componente es usado apenas por algunas páginas, es recomendable importarlos explicitamente donde son usados. Esto permite que ellos sean divididos adecuadamente y cargados apenas cuando las páginas relevantes son mostradas.
Si un componente es usado apenas por algunas páginas, es recomendable importarlos explícitamente donde son usados. Esto permite que ellos sean divididos adecuadamente y cargados apenas cuando las páginas relevantes son mostradas.
```md
```md
<scriptsetup>
<scriptsetup>
@ -125,7 +125,7 @@ Este es un archivo .md usando un componente personalizado
Si un componente fuera usado en la mayoría de las páginas, ellos pueden ser registrados globalmente personalizando la instancia de la aplicación Vue. Consulte la sección relevante en [Extendiendo el Tema por Defecto](./extending-default-theme#registering-global-components) para un ejemplo.
Si un componente fuera usado en la mayoría de las páginas, ellos pueden ser registrados globalmente personalizando la instancia de la aplicación Vue. Consulte la sección relevante en [Extendiendo el Tema por Defecto](./extending-default-theme#registering-global-components) para un ejemplo.
::: warning IMPORTANT
::: warning IMPORTANT
Asegurese de que el nombre de un componente personalizado contenga un hífen o esté en PascalCase. Caso contrario, el será tratado como un elemento alineado y envuelto dentro de una tag `<p>`, lo que llevará a una incompatibilidad de hidratación pues `<p>` no permite que elementos de bloque sean colocados dentro de el.
Asegúrese de que el nombre de un componente personalizado contenga un guion o esté en PascalCase. Caso contrario, el será tratado como un elemento alineado y envuelto dentro de una tag `<p>`, lo que llevará a una incompatibilidad de hidratación pues `<p>` no permite que elementos de bloque sean colocados dentro de el.
:::
:::
### Usando Componentes En Headers <ComponenteEnHeader/> {#using-components-in-headers}
### Usando Componentes En Headers <ComponenteEnHeader/> {#using-components-in-headers}
@ -145,25 +145,25 @@ EL HTML de salida es realizado por [Markdown-it](https://github.com/Markdown-it/
## Escapes {#escaping}
## Escapes {#escaping}
Puede escapar de interpolaciones Vue envolvientdolas en un `<span>` u otros elementos con la directiva `v-pre`:
Puede escapar de interpolaciones Vue envolviéndolas en un `<span>` u otros elementos con la directiva `v-pre`:
**Entrada**
**Entrada**
```md
```md
Esto <spanv-pre>{{ será exibido como es }}</span>
Esto <spanv-pre>{{ será mostrado como es }}</span>
```
```
**Salida**
**Salida**
<divclass="escape-demo">
<divclass="escape-demo">
<p>Esto <spanv-pre>{{ será exibido como es }}</span></p>
<p>Esto <spanv-pre>{{ será mostrado como es }}</span></p>
</div>
</div>
Alternativamente, puede envolver todo el paragrafo en un contenedor personalizadon`v-pre`:
Alternativamente, puede envolver todo el párrafo en un contenedor personalizado`v-pre`:
```md
```md
::: v-pre
::: v-pre
{{ Esto será exibido como es }}
{{ Esto será mostrado como es }}
:::
:::
```
```
@ -172,12 +172,12 @@ Alternativamente, puede envolver todo el paragrafo en un contenedor personalizad
<divclass="escape-demo">
<divclass="escape-demo">
::: v-pre
::: v-pre
{{ Esto será exibido como es }}
{{ Esto será mostrado como es }}
:::
:::
</div>
</div>
## "Desescape" en bloques de Código {#unescape-in-code-blocks}
## Evitar escapes en bloques de Código {#unescape-in-code-blocks}
Por defecto, todos los bloques de código cercados son automáticamente envueltos con `v-pre`, entonces ninguna sintaxis Vue será procesada dentro de ellos. Para permitir la interpolación en el estilo Vue dentro de la valla, puede adicionar el lenguaje con el sufijo `-vue`, por ejemplo, `js-vue`:
Por defecto, todos los bloques de código cercados son automáticamente envueltos con `v-pre`, entonces ninguna sintaxis Vue será procesada dentro de ellos. Para permitir la interpolación en el estilo Vue dentro de la valla, puede adicionar el lenguaje con el sufijo `-vue`, por ejemplo, `js-vue`:
@ -200,7 +200,7 @@ Observe que esto puede impedir que ciertos tokens sean realzados correctamente.
VitePress poseé [soporte embutido](https://vitejs.dev/guide/features.html#css-pre-processors) para preprocesadores CSS: archivos `.scss`, `.sass`, `.less`, `.styl` e `.stylus`. No es necesario instalar plugins específicos de Vite para ellos, pero el propio preprocesados correspondiente debe ser instalado:
VitePress posee [soporte embutido](https://vitejs.dev/guide/features.html#css-pre-processors) para preprocesadores CSS: archivos `.scss`, `.sass`, `.less`, `.styl` e `.stylus`. No es necesario instalar plugins específicos de Vite para ellos, pero el propio preprocesados correspondiente debe ser instalado:
VitePress es un [Generador de Sitios Estáticos](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) proyectado para crear sitios rápidos y centrados en contenido. En suma, VitePress utiliza su contenido fuente escrito en [Markdown](https://en.wikipedia.org/wiki/Markdown), aplica un tema a el y genera páginas HTML estáticas que pueden ser facilmente implantadas en cualquier lugar.
VitePress es un [Generador de Sitios Estáticos](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) proyectado para crear sitios rápidos y centrados en contenido. En suma, VitePress utiliza su contenido fuente escrito en [Markdown](https://en.wikipedia.org/wiki/Markdown), aplica un tema a el y genera páginas HTML estáticas que pueden ser fácilmente implantadas en cualquier lugar.
Quiere apenas experimentar? Valla al [Início Rápido](./getting-started).
Quiere apenas experimentar? Valla al [Inicio Rápido](./getting-started).
</div>
</div>
@ -15,9 +15,9 @@ Quiere apenas experimentar? Valla al [Início Rápido](./getting-started).
La [documentación oficial Vue.js](https://vuejs.org/) también está basada en VitePress, pero usa un tema personalizado compartido entre varias traducciones.
La [documentación oficial Vue.js](https://vuejs.org/) también está basada en VitePress, pero usa un tema personalizado compartido entre varias traducciones.
- **Blogs, Portfólios y sitios de Marketing**
- **Blogs, Portfolios y sitios de Marketing**
VitePress soporta [temas totalmente personalizables](./custom-theme), con la experiencia de desarrollador por defecto de una aplicaciónn Vite + Vue. La construcción con Vite significa que puede aprovechar directamente plugins Vite de su rico ecosistema. Adicionalmente, VitePress proporciona APIs flexibles para[cargar datos](./data-loading) (locales o remotos) y [generar rutas dinámicamente](./routing#dynamic-routes). Puede usarlo para construir practicamente cualquier cosa desde que los datos puedan ser determinados en el momento del build.
VitePress soporta [temas totalmente personalizables](./custom-theme), con la experiencia de desarrollador por defecto de una aplicación Vite + Vue. La construcción con Vite significa que puede aprovechar directamente plugins Vite de su rico ecosistema. Adicionalmente, VitePress proporciona APIs flexibles para[cargar datos](./data-loading) (locales o remotos) y [generar rutas dinámicamente](./routing#dynamic-routes). Puede usarlo para construir prácticamente cualquier cosa desde que los datos puedan ser determinados en el momento del build.
El [blog oficial Vue.js](https://blog.vuejs.org/) es un blog simple que genera su página inicial basada en contenido local.
El [blog oficial Vue.js](https://blog.vuejs.org/) es un blog simple que genera su página inicial basada en contenido local.
@ -27,7 +27,7 @@ VitePress visa proporcionar excelente Experiencia de Desarrollador (DX) al traba
- **[Alimentado por Vite:](https://vitejs.dev/)** inicialización instantánea del servidor, con ediciones siempre reflejadas instantáneamente (<100ms)sinrecargadepágina.
- **[Alimentado por Vite:](https://vitejs.dev/)** inicialización instantánea del servidor, con ediciones siempre reflejadas instantáneamente (<100ms)sinrecargadepágina.
- **[Extensiones Markdown Integradas:](./markdown)** Frontmatter, tablas, destaque de sintaxis... usted escoje. Especificamente, VitePress proporciona muchos recursos para trabajar con bloques de código, tornandolo ideal para documentación altamente técnica.
- **[Extensiones Markdown Integradas:](./markdown)** Frontmatter, tablas, destaque de sintaxis... usted encoje. Específicamente, VitePress proporciona muchos recursos para trabajar con bloques de código, tornandolo ideal para documentación altamente técnica.
- **[Markdown Mejorado por Vue:](./using-vue)** cada página Markdown es también un [Componente de Archivo único](https://pt.vuejs.org/guide/scaling-up/sfc.html), gracias a la compatibilidad de sintaxis de 100% del template Vue con HTML. Puede también incorporar iteractividad con su contenido estático usando recursos de template Vue o componentes Vue importados.
- **[Markdown Mejorado por Vue:](./using-vue)** cada página Markdown es también un [Componente de Archivo único](https://pt.vuejs.org/guide/scaling-up/sfc.html), gracias a la compatibilidad de sintaxis de 100% del template Vue con HTML. Puede también incorporar iteractividad con su contenido estático usando recursos de template Vue o componentes Vue importados.
@ -37,11 +37,11 @@ Al contrario de muchos SSGs tradicionales, un sitio generado por VitePress es la
- **Carga Inicial Rápida**
- **Carga Inicial Rápida**
La visita inicial a cualquier página será servida con el HTML estático pré-renderizado para velocidad de carga rápida y SEO optimizado. La página entonces carga un paquete JavaScript que transforma la página en una SPA Vue ("hidratación"). El proceso de hidratación es extremadamente rápido: en [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F), sitios típicos VitePress alcanzan puntuaciones de desempeño casi perfectas, incluso en dispositivos móbiles de bajo desempeño con una red lenta.
La visita inicial a cualquier página será servida con el HTML estático pré-renderizado para velocidad de carga rápida y SEO optimizado. La página entonces carga un paquete JavaScript que transforma la página en una SPA Vue ("hidratación"). El proceso de hidratación es extremadamente rápido: en [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F), sitios típicos VitePress alcanzan puntuaciones de desempeño casi perfectas, incluso en dispositivos móviles de bajo desempeño con una red lenta.
- **Navegación Rápida pos-carga**
- **Navegación Rápida pos-carga**
Más importante todavía, el modelo SPA lleva a una mejor experiencia del usuario **después** de la carga inicial. La navegación subsequente dentro del sitio no causará una recarga adicional completa de la página. En vez de eso, el contenido de la página de entrada será buscado y actualizado dinámicamente. VitePress también pre-carga automáticamente pedazos de página para links que están dentro del viewport. En la mayoría de los casos, la navegación pos-carga parecerá instantánea.
Más importante todavía, el modelo SPA lleva a una mejor experiencia del usuario **después** de la carga inicial. La navegación subsecuente dentro del sitio no causará una recarga adicional completa de la página. En vez de eso, el contenido de la página de entrada será buscado y actualizado dinámicamente. VitePress también pre-carga automáticamente pedazos de página para links que están dentro del viewport. En la mayoría de los casos, la navegación pos-carga parecerá instantánea.
- **Interactividad Sin Penalidades**
- **Interactividad Sin Penalidades**
@ -49,7 +49,7 @@ Al contrario de muchos SSGs tradicionales, un sitio generado por VitePress es la
## Y VuePress? {#what-about-vuepress}
## Y VuePress? {#what-about-vuepress}
VitePress es el sucesor espiritual de VuePress. VuePress era orginalmente basado en Vue 2 y webpack. Con Vue 3 y Vite, VitePress ofrece una experiencia de desarrollador significamente mejor, mejor desempeño en producción, un tema por defecto más pulido y un API de personalización más flexible.
VitePress es el sucesor espiritual de VuePress. VuePress era originalmente basado en Vue 2 y webpack. Con Vue 3 y Vite, VitePress ofrece una experiencia de desarrollador significativamente mejor, mejor desempeño en producción, un tema por defecto más pulido y un API de personalización más flexible.
A diferencia del API entre VitePress y VuePress reside principalmente en temas y personalización. Si estuviera usando VuePress 1 con el tema por defecto, la migración para VitePress debe ser relativamente simple.
A diferencia del API entre VitePress y VuePress reside principalmente en temas y personalización. Si estuviera usando VuePress 1 con el tema por defecto, la migración para VitePress debe ser relativamente simple.
@ -4,9 +4,9 @@ La configuración del tema te permite personalizar tu tema. puedes definir la co
```ts
```ts
export default {
export default {
lang: 'pt-BR',
lang: 'es-CO',
title: 'VitePress',
title: 'VitePress',
description: 'Generador de site estático Vite & Vue.',
description: 'Generador de Sitios Estáticos desarrollado con Vite y Vue.',
// Configuraciones relacionadas con el tema.
// Configuraciones relacionadas con el tema.
themeConfig: {
themeConfig: {
@ -70,7 +70,7 @@ La configuración del elemento del menú de navegación. Más detalles en [Tema
export default {
export default {
themeConfig: {
themeConfig: {
nav: [
nav: [
{ text: 'Guia', link: '/guide' },
{ text: 'Guía', link: '/guide' },
{
{
text: 'Menú Dropdown',
text: 'Menú Dropdown',
items: [
items: [
@ -119,7 +119,7 @@ export default {
themeConfig: {
themeConfig: {
sidebar: [
sidebar: [
{
{
text: 'Guia',
text: 'Guía',
items: [
items: [
{ text: 'Introducción', link: '/introduction' },
{ text: 'Introducción', link: '/introduction' },
{ text: 'A partir de', link: '/getting-started' },
{ text: 'A partir de', link: '/getting-started' },
@ -168,7 +168,7 @@ export type SidebarItem = {
## aside
## aside
- Tipo: `boolean | 'left'`
- Tipo: `boolean | 'left'`
- Estandar: `true`
- Defecto: `true`
- Puede ser anulado por la página a través de [frontmatter](./frontmatter-config#aside)
- Puede ser anulado por la página a través de [frontmatter](./frontmatter-config#aside)
Definir este valor como `false` evita que se muestre el elemento lateral.\
Definir este valor como `false` evita que se muestre el elemento lateral.\
@ -197,7 +197,7 @@ interface Outline {
level?: number | [number, number] | 'deep'
level?: number | [number, number] | 'deep'
/**
/**
* El titulo que se mostrará en el equema.
* El titulo que se mostrará en el esquema.
*
*
* @default 'On this page'
* @default 'On this page'
*/
*/
@ -391,48 +391,48 @@ export interface DocFooter {
## darkModeSwitchLabel
## darkModeSwitchLabel
- Tipo: `string`
- Tipo: `string`
- Estandar: `Appearance`
- Defecto: `Appearance`
Se puede utilizar para personalizar la etiqueta del botón del modo oscuro. Esta etiqueta solo se muestra en la vista móvil.
Se puede utilizar para personalizar la etiqueta del botón del modo oscuro. Esta etiqueta solo se muestra en la vista móvil.
## lightModeSwitchTitle
## lightModeSwitchTitle
- Tipo: `string`
- Tipo: `string`
- Estandar: `Switch to light theme`
- Defecto: `Switch to light theme`
Se puede utilizar para personalizar el título del botón borrar que aparece al pasar el mouse.
Se puede utilizar para personalizar el título del botón borrar que aparece al pasar el mouse.
## darkModeSwitchTitle
## darkModeSwitchTitle
- Tipo: `string`
- Tipo: `string`
- Estandar: `Switch to dark theme`
- Defecto: `Switch to dark theme`
Se puede utilizar para personalizar el título del botón del modo oscuro que aparece al pasar el mouse.
Se puede utilizar para personalizar el título del botón del modo oscuro que aparece al pasar el mouse.
## sidebarMenuLabel
## sidebarMenuLabel
- Tipo: `string`
- Tipo: `string`
- Estandar: `Menu`
- Defecto: `Menu`
Se puede utilizar para personalizar la etiqueta del menú de la barra lateral. Esta etiqueta solo se muestra en la vista móvil.
Se puede utilizar para personalizar la etiqueta del menú de la barra lateral. Esta etiqueta solo se muestra en la vista móvil.
## returnToTopLabel
## returnToTopLabel
- Tipo: `string`
- Tipo: `string`
- Estandar: `Return to top`
- Defecto: `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.
Se puede utilizar para personalizar la etiqueta del botón Volver al principio. Esta etiqueta solo se muestra en la vista móvil.
## langMenuLabel
## langMenuLabel
- Tipo: `string`
- Tipo: `string`
- Estandar: `Change language`
- Defecto: `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](../guide/i18n).
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](../guide/i18n).
## externalLinkIcon
## externalLinkIcon
- Tipo: `boolean`
- Tipo: `boolean`
- Estandar: `false`
- Defecto: `false`
Se debe mostrar um ícono de link externo junto a los enlaces externos en markdown.
Se debe mostrar um ícono de link externo junto a los enlaces externos en markdown.
@ -97,7 +97,7 @@ También puedes personalizarlo aún más combinando `--vp-home-hero-name-backgr
}
}
```
```
## Sección de caracteristicas {#features-section}
## Sección de características {#features-section}
En la sección de funciones, puede enumerar cualquier cantidad de funciones que desee mostrar inmediatamente después de la sección. _Hero_. Para configurarlo seleccione la opción `features` para el frontmatter.
En la sección de funciones, puede enumerar cualquier cantidad de funciones que desee mostrar inmediatamente después de la sección. _Hero_. Para configurarlo seleccione la opción `features` para el frontmatter.
@ -113,12 +113,12 @@ features:
details: Lorem ipsum...
details: Lorem ipsum...
- icon:
- icon:
src: /cool-feature-icon.svg
src: /cool-feature-icon.svg
title: Otra caracteristica interesante
title: Otra característica interesante
details: Lorem ipsum...
details: Lorem ipsum...
- icon:
- icon:
dark: /dark-feature-icon.svg
dark: /dark-feature-icon.svg
light: /light-feature-icon.svg
light: /light-feature-icon.svg
title: Otra caracteristica interesante
title: Otra característica interesante
details: Lorem ipsum...
details: Lorem ipsum...
---
---
```
```
@ -128,10 +128,10 @@ interface Feature {
// Muestra el icono en cada cuadro de función.
// Muestra el icono en cada cuadro de función.
icon?: FeatureIcon
icon?: FeatureIcon
// Título de la caracteristica.
// Título de la característica.
title: string
title: string
// Detalles de la caracteristicas.
// Detalles de la características.
details: string
details: string
// Enlace al hacer clic en el componente de funcionalidad
// Enlace al hacer clic en el componente de funcionalidad
@ -31,11 +31,11 @@ Tenga en cuenta que incluso en este mismo layout, la barra lateral seguirá apar
## Layout de Home {#home-layout}
## Layout de Home {#home-layout}
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.
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 obtener más detalles.
## Sin Layout {#no-layout}
## Sin Layout {#no-layout}
Si no quieres ningún diseño, puedes pasar `layout: false` a través del frontmatter. Esta opción es útil si deseas una página de destino completamente personalizable (sin barra lateral, barra de navegacón o pie de página por defecto).
Si no quieres ningún diseño, puedes pasar `layout: false` a través del frontmatter. Esta opción es útil si deseas una página de destino completamente personalizable (sin barra lateral, barra de navegación o pie de página por defecto).
VitePress admite la búsqueda de texto completo utilizando un índice en el navegador gracias a [minisearch](https://github.com/lucaong/minisearch/). Para habilitar esta función, simplemente configure la opción `themeConfig.search.provider` como `'local'` en el archivo `.vitepress/config.ts`:
VitePress admite la búsqueda de texto completo utilizando un índice en el navegador gracias a [minisearch](https://github.com/lucaong/minisearch/). Para habilitar esta función, simplemente configure la opción `themeConfig.search.provider` como `'local'` en el archivo `.vitepress/config.ts`:
@ -126,9 +126,9 @@ export default defineConfig({
Esta función se eliminará de los datos del sitio web en el lado del cliente, por lo que podrá utilizar las API de Node.js en ella.
Esta función se eliminará de los datos del sitio web en el lado del cliente, por lo que podrá utilizar las API de Node.js en ella.
#### Ejemplo: Excluir páginas de la busqueda {#example-excluding-pages-from-search}
#### Ejemplo: Excluir páginas de la búsqueda {#example-excluding-pages-from-search}
Puedes excluir páginas de la busqueda adicionando `search: false` al principio de la página. Alternativamente:
Puedes excluir páginas de la búsqueda adicionando `search: false` al principio de la página. Alternativamente:
```ts
```ts
import { defineConfig } from 'vitepress'
import { defineConfig } from 'vitepress'
@ -141,7 +141,7 @@ export default defineConfig({
_render(src, env, md) {
_render(src, env, md) {
const html = md.render(src, env)
const html = md.render(src, env)
if (env.frontmatter?.search === false) return ''
if (env.frontmatter?.search === false) return ''
if (env.relativePath.startsWith('algum/caminho')) return ''
if (env.relativePath.startsWith('algun/directorio')) return ''
return html
return html
}
}
}
}
@ -176,7 +176,7 @@ export default defineConfig({
})
})
```
```
## Busqueda de Algolia {#algolia-search}
## Búsqueda de Algolia {#algolia-search}
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:
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:
@ -60,7 +60,7 @@ El código anterior mostrará a un miembro del equipo en un elemento similar a u
<VPTeamMemberssize="small":members="members"/>
<VPTeamMemberssize="small":members="members"/>
El componente `<VPTeamMembers>` viene en dos tamaños diferentes, pequeño `small` y médio `medium`. Si bien es una cuestión de preferencia, generalmente el tamaño `small` debería encajar mejor cuando se use en la página del documento. Además, puede agregar más propiedades a cada miembro, como agregar el botón "descripción" o "patrocinador". Obtenga más información sobre en [`<VPTeamMembers>`](#vpteammembers).
El componente `<VPTeamMembers>` viene en dos tamaños diferentes, pequeño `small` y medio `medium`. Si bien es una cuestión de preferencia, generalmente el tamaño `small` debería encajar mejor cuando se use en la página del documento. Además, puede agregar más propiedades a cada miembro, como agregar el botón "descripción" o "patrocinador". Obtenga más información sobre en [`<VPTeamMembers>`](#vpteammembers).
Incrustar miembros del equipo en la página del documento es bueno para equipos pequeños donde tener una página de equipo dedicada completa puede ser demasiado, o introducir miembros parciales como referencia al contexto de la documentación.
Incrustar miembros del equipo en la página del documento es bueno para equipos pequeños donde tener una página de equipo dedicada completa puede ser demasiado, o introducir miembros parciales como referencia al contexto de la documentación.
@ -46,7 +46,7 @@ titleTemplate: Generador de sitios web estáticos con Vite & Vue
---
---
```
```
## descripción
## description
- Tipo: `string`
- Tipo: `string`
@ -94,7 +94,7 @@ Las siguientes opciones de frontmatter solo se aplican cuando se usa el tema pre
Determina el layout de la página.
Determina el layout de la página.
- `doc` - Aplica estilos de documentación por defecto al contenido markdown.
- `doc` - Aplica estilos de documentación por defecto al contenido markdown.
- `home` - Layout especial para la "Página Inicial". Puedes agregar opciones extras como `hero` y `features` para crear rapidamente una hermosa página inicial.
- `home` - Layout especial para la "Página Inicial". Puedes agregar opciones extras como `hero` y `features` para crear rápidamente una hermosa página inicial.
- `page` - Se comporta de manera similar a `doc`, pero no aplica estilos al contenido. Útil cuando desea crear una página totalmente personalizada.
- `page` - Se comporta de manera similar a `doc`, pero no aplica estilos al contenido. Útil cuando desea crear una página totalmente personalizada.
```yaml
```yaml
@ -216,6 +216,6 @@ Luego puede personalizar los estilos para esta página específica en el archivo
La configuración del site es donde puede configurar los ajustes globales del site. Las opciones de configuración de la aplicación definen las configuraciones que se aplican a todos los sites de VitePress, independientemente del tema que estén utilizando. Por ejemplo, el directorio base o el título del site.
La configuración del site es donde puede configurar los ajustes globales del site. Las opciones de configuración de la aplicación definen las configuraciones que se aplican a todos los sites de VitePress, independientemente del tema que estén utilizando. Por ejemplo, el directorio base o el título del site.
@ -10,7 +10,7 @@ La configuración del site es donde puede configurar los ajustes globales del si
### Resolución de configuración {#config-resolution}
### Resolución de configuración {#config-resolution}
El archivo de configuración siempre se resuelve desde `<root>/.vitepress/config.[ext]`, donde `<root>` es la [raiz del proyecto](../guide/routing#root-and-source-directory) VitePress y `[ext]` es una de las extensiones de archivo compatibles. TypeScript es compatible desde el primer momento. Las extensiones compatibles incluyen `.js`, `.ts`, `.mjs` y `.mts`.
El archivo de configuración siempre se resuelve desde `<root>/.vitepress/config.[ext]`, donde `<root>` es la [raíz del proyecto](../guide/routing#root-and-source-directory) VitePress y `[ext]` es una de las extensiones de archivo compatibles. TypeScript es compatible desde el primer momento. Las extensiones compatibles incluyen `.js`, `.ts`, `.mjs` y `.mts`.
Recuerde usar la sintaxis de módulos ES en los archivos de configuración. El archivo de configuración debe exportar por defecto un objeto:
Recuerde usar la sintaxis de módulos ES en los archivos de configuración. El archivo de configuración debe exportar por defecto un objeto:
@ -24,7 +24,7 @@ export default {
}
}
```
```
:::details Configuración dinámica (Assíncrona)
:::details Configuración dinámica (Asíncrona)
Si necesitas generar dinamicamente la configuración, también puedes exportar por defecto una función. Por ejemplo:
Si necesitas generar dinamicamente la configuración, también puedes exportar por defecto una función. Por ejemplo:
@ -92,7 +92,7 @@ export default defineConfig({
})
})
```
```
### Configuración de Tema Escrito {#typed-theme-config}
### Configuración del Tipado del Tema {#typed-theme-config}
Por defecto, el auxiliar `defineConfig` espera el tipo de configuración del tema por defecto:
Por defecto, el auxiliar `defineConfig` espera el tipo de configuración del tema por defecto:
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.
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.
## Metadatos de Site {#site-metadata}
## Metadatos del Sitio {#site-metadata}
### title
### title
@ -147,7 +147,7 @@ También se utilizará como sufijo predeterminado para todos los títulos de pá
```ts
```ts
export default {
export default {
title: 'Mi increible sitio web'
title: 'Mi increíble sitio web'
}
}
```
```
@ -155,7 +155,7 @@ export default {
# Hola
# Hola
```
```
El título de la página será `Hola | Mi increible sitio web`.
El título de la página será `Hola | Mi increíble sitio web`.
### titleTemplate
### titleTemplate
@ -166,7 +166,7 @@ Le permite personalizar el sufijo del título de cada página o el título compl
```ts
```ts
export default {
export default {
title: 'Mi increible sitio web',
title: 'Mi increíble sitio web',
titleTemplate: 'Sufijo Personalizado'
titleTemplate: 'Sufijo Personalizado'
}
}
```
```
@ -185,7 +185,7 @@ export default {
}
}
```
```
Aqui, `:title` será reemplazado por el texto que se deduce del primer título `<h1>` de la página. El título del ejemplo de la página anterior será `Hola - Sufijo Personalizado`.
Aquí, `:title` será reemplazado por el texto que se deduce del primer título `<h1>` de la página. El título del ejemplo de la página anterior será `Hola - Sufijo Personalizado`.
Una opción puede ser definida como `false` para desactivar sufijos del título.
Una opción puede ser definida como `false` para desactivar sufijos del título.
@ -193,7 +193,7 @@ Una opción puede ser definida como `false` para desactivar sufijos del título.
- Tipo: `string`
- Tipo: `string`
- Predeterminado: `Um site VitePress`
- Predeterminado: `Um site VitePress`
- Puede ser sustituído por página a través de [frontmatter](./frontmatter-config#descrição)
- Puede ser sustituido por página a través de [frontmatter](./frontmatter-config#descripcion)
Descripción del sitio web. Esto se presentará como una etiqueta. `<meta>` en la página HTML.
Descripción del sitio web. Esto se presentará como una etiqueta. `<meta>` en la página HTML.
@ -209,7 +209,7 @@ export default {
- Predeterminado: `[]`
- Predeterminado: `[]`
- Se puede agregar por página a través de [frontmatter](./frontmatter-config#head)
- Se puede agregar por página a través de [frontmatter](./frontmatter-config#head)
Elementos adicionales para agregar a la etiqueta `<head>` de la página HTML. Las etiquetas agregadas por los usuarios son mostradas antes de la etiqueta `head` de cierre, despues de las etiquetas VitePress.
Elementos adicionales para agregar a la etiqueta `<head>` de la página HTML. Las etiquetas agregadas por los usuarios son mostradas antes de la etiqueta `head` de cierre, después de las etiquetas VitePress.
```ts
```ts
type HeadConfig =
type HeadConfig =
@ -343,7 +343,7 @@ export default {
}
}
```
```
## Roteamento {#routing}
## Enrutamiento {#routing}
### cleanUrls
### cleanUrls
@ -377,7 +377,7 @@ export default {
- Tipo: `string`
- Tipo: `string`
- Predeterminado: `.`
- Predeterminado: `.`
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).
El directorio donde se almacenan tus páginas de rebajas, en relación con la raíz del proyecto. vea también [Directorio Raíz y de origen](../guide/routing#root-and-source-directory).
```ts
```ts
export default {
export default {
@ -390,7 +390,7 @@ export default {
- Tipo: `string`
- Tipo: `string`
- Predeterminado: `undefined`
- 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 contenido de origen.
Un [patrón glob](https://github.com/mrmlnc/fast-glob#pattern-syntax) para hacer coincidir los archivos de rebajas que deben excluirse como contenido de origen.
```ts
```ts
export default {
export default {
@ -403,7 +403,7 @@ export default {
- Tipo: `string`
- Tipo: `string`
- Predeterminado: `./.vitepress/dist`
- Predeterminado: `./.vitepress/dist`
La ubicación de la salida de compilación para el sitio, en relación con el [raiz del proyecto](../guide/routing#root-and-source-directory).
La ubicación de la salida de compilación para el sitio, en relación con el [raíz del proyecto](../guide/routing#root-and-source-directory).
```ts
```ts
export default {
export default {
@ -429,7 +429,7 @@ export default {
- Tipo: `string`
- Tipo: `string`
- Predeterminado: `./.vitepress/cache`
- Predeterminado: `./.vitepress/cache`
El directorio para los archivos de caché, en relación con el [raiz del proyecto](../guide/routing#root-and-source-directory). Vea también: [cacheDir](https://vitejs.dev/config/shared-options.html#cachedir).
El directorio para los archivos de caché, en relación con el [raíz del proyecto](../guide/routing#root-and-source-directory). Vea también: [cacheDir](https://vitejs.dev/config/shared-options.html#cachedir).
```ts
```ts
export default {
export default {
@ -478,7 +478,7 @@ export default {
Cuando se define como `true`, la aplicación de producción se compilará en [Modo MPA](../guide/mpa-mode). El modo MPA envía 0 kb de JavaScript de forma predeterminada, a expensas de deshabilitar la navegación del lado del cliente y requerir permiso explícito para la interactividad.
Cuando se define como `true`, la aplicación de producción se compilará en [Modo MPA](../guide/mpa-mode). El modo MPA envía 0 kb de JavaScript de forma predeterminada, a expensas de deshabilitar la navegación del lado del cliente y requerir permiso explícito para la interactividad.
## Tematización {#theming}
## Estilizado {#theming}
### appearance
### appearance
@ -553,7 +553,7 @@ export default {
Los enlaces de compilación VitePress permiten agregar nuevas funciones al su sitio web:
Los enlaces de compilación VitePress permiten agregar nuevas funciones al su sitio web:
jackestar
10 months ago