@ -12,29 +12,33 @@ 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 directorios públicos absolutos (en base a la raíz del proyecto) o directorios relativos (en 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.
::: tip Los archivos vinculados no se tratan como recursos.
Los PDF u otros documentos a los que se hace referencia mediante enlaces dentro de archivos Markdown no se tratan automáticamente como recursos. Para que los archivos vinculados sean accesibles, debe colocarlos manualmente en el directorio [`public`](#the-public-directory) de su proyecto.
:::
Todas las referencias de path **estáticas**, incluyendo paths absolutos, deben ser basadas en la estructura de su directorio de trabajo.
Todos los assets referenciados, incluyendo aquellos usando directorios 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.
## El directorio público {#the-public-directory}
Todas las referencias de directorios **estáticas**, incluyendo directorios absolutos, deben ser basadas en la estructura de su directorio de trabajo.
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.
## El Directorio Público {#the-public-directory}
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`.
A veces, puede ser necesario proveer assets estáticos que no son referenciados directamente en ningún Markdown o componentes del tema, o usted puede querer servir ciertos archivos con el nombre del archivo original. Ejemplos de tales archivos incluyen `robots.txt`, favicons e iconos PWA.
Los assets colocados en `public` serán copiados a la raiz del directorio de salida tal como son.
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 ubicación por defecto del directorio fuente, entonces el directorio público será `./docs/public`.
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`.
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` utilizando directorio 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}
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 directorios 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:
```md
@ -48,7 +52,7 @@ Sin embargo, se estuviera creando un componente de tema que vincula assets diná
<img:src="theme.logoPath"/>
```
En este caso, es recomendable complementar el path con el [`auxiliar withBase`](../reference/runtime-api#withbase) proporcionado por VitePress:
En este caso, es recomendable complementar el directorio con el [auxiliar `withBase`](../reference/runtime-api#withbase) proporcionado por VitePress:
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:
@ -20,7 +20,7 @@ Como cada CMS funcionará de forma diferente, aqui podemos proveer apenas un flu
const env = loadEnv('', process.cwd())
```
2. Obtenga los datos necesarios del CMS y aplique formato en paths de datos apropiados:
2. Obtenga los datos necesarios del CMS y aplique formato en directorios de datos apropiados:
```js
export default {
@ -28,7 +28,7 @@ Como cada CMS funcionará de forma diferente, aqui podemos proveer apenas un flu
// use la biblioteca del cliente CMS respectiva si es necesario
const data = await (await fetch('https://my-cms-api', {
headers: {
// token caso necesario
// token si es necesario
}
})).json()
@ -42,7 +42,7 @@ Como cada CMS funcionará de forma diferente, aqui podemos proveer apenas un flu
}
```
3. Presente el contenido en la página:
3. Renderice el contenido en la página:
```md
# {{ $params.title }}
@ -52,6 +52,6 @@ Como cada CMS funcionará de forma diferente, aqui podemos proveer apenas un flu
<!-- @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í!
@ -10,7 +10,7 @@ Puede habilitar un tema personalizado creando un archivo `.vitepress/theme/index
```
.
├─ docs # raiz del proyecto
├─ docs # raíz del proyecto
│ ├─ .vitepress
│ │ ├─ theme
│ │ │ └─ index.js # entrada de tema
@ -19,16 +19,16 @@ Puede habilitar un tema personalizado creando un archivo `.vitepress/theme/index
└─ 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}
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
interface Theme {
/**
* Componente raiz de layout para todas las páginas
* Componente raíz de layout para cada página
* @required
*/
Layout: Component
@ -46,7 +46,7 @@ interface Theme {
interface EnhanceAppContext {
app: App // instancia de la aplicación Vue
router: Router // instancia del enrutador VitePress
router: Router // Enrutador VitePress
siteData: Ref<SiteData> // Metadata a nivel del sitio
}
```
@ -67,7 +67,25 @@ 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.
El valor `router` es la misma instancia del enrutador VitePress que devuelve [`useRouter()`](../reference/runtime-api#userouter). Para escuchar los cambios de ruta, asigne manejadores al enrutador:
```ts [.vitepress/theme/index.ts]
export default {
enhanceApp({ router }) {
router.onBeforeRouteChange = (to) => {
console.log('navegando a', to)
}
router.onAfterRouteChange = (to) => {
console.log('navegando a', to)
}
}
}
```
Devuelve `false` desde `onBeforeRouteChange` o `onBeforePageLoad` para cancelar la navegación.
La exportación predeterminada es el único contrato para un tema personalizado, y solo se requiere la propiedad `Layout`. Por lo tanto, técnicamente, un tema de VitePress puede ser tan simple como un único componente de 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).
@ -77,9 +95,9 @@ El componente de layout más básico necesita un componente [`<Content />`](../r
```vue [.vitepress/theme/Layout.vue]
<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/>
</template>
```
@ -93,16 +111,17 @@ const { page } = useData()
</script>
<template>
<h1>Layout Personalizado!</h1>
<h1>¡Layout Personalizado!</h1>
<divv-if="page.isNotFound">
Página 404 personalizada!
¡Página 404 personalizada!
</div>
<Contentv-else/>
</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 para condicionalmente en tiempo de ejecución mostrar layouts diferentes. Uno de los otros datos que podemos acceder 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:
@ -156,23 +175,23 @@ Consulte la [Referencia del API en tiempo de Ejecución](../reference/runtime-ap
## 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 plantilla 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:
1. Exporte el objeto del tema como la exportación por defecto en su archivo de paquete.
1. Exporta el objeto de tema como exportación predeterminada en la entrada de tu paquete.
2. Si aplica, exporte la definición de configuración del tipo de tema como `ThemeConfig`.
2. Si aplica, exporte la definición del tipo de configuración de su tema como `ThemeConfig`.
3. Si su tema exige ajustes en la configuración de VitePress, exporte esa configuración en un subdirectorio del paquete (por ejemplo, `mi-tema/config`) para que el usuario pueda extenderlo.
3. Si su tema exige ajustes en la configuración de VitePress, exporte esa configuración en un subdirectorio del paquete (por ejemplo, `mi-tema/config`) para que el usuario pueda ampliarla.
4. Documente las opciones de configuración del tema (Ambos, via archivo y frontmatter).
5. Proporcione instrucciones claras sobre cómo consumir su tema(vea abajo).
5. Proporcione instrucciones claras sobre cómo consumir su tema(vea abajo).
## 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:
```js [.vitepress/theme/index.js]
import Theme from 'awesome-vitepress-theme'
@ -195,8 +214,7 @@ export default {
Si el tema exige una configuración especial de VitePress, también necesitará extenderlo en su propia configuración:
```ts
// .vitepress/theme/config.ts
```ts [.vitepress/config.ts]
import baseConfig from 'awesome-vitepress-theme/config'
export default {
@ -207,8 +225,7 @@ export default {
Finalmente, si el tema proporciona tipos para la configuración del tema:
```ts
// .vitepress/theme/config.ts
```ts [.vitepress/config.ts]
import baseConfig from 'awesome-vitepress-theme/config'
import { defineConfigWithTheme } from 'vitepress'
import type { ThemeConfig } from 'awesome-vitepress-theme'
description: Carga datos arbitrarios en tiempo de compilación usando cargadores de datos de VitePress e impórtalos desde páginas o componentes.
description: Carga datos arbitrarios en tiempo de compilación usando cargadores de datos de VitePress e impórtalo desde páginas o componentes.
---
# 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 datos** que permite cargar datos arbitrarios e importarlos desde páginas o componentes. La carga de datos es ejecutada **solo en el tiempo del compilación** 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 obtener datos remotos o generar metadatos a partir de archivos locales. Por ejemplo, puede usar cargadores de datos para analizar todas sus páginas de API locales y generar automáticamente un índice de todas las entradas de la API.
## Uso Básico {#basic-usage}
Un archivo de cargados de datos debe terminar con `.data.js` o `.data.ts`. El archivo debe proporcionar una exportación por defecto de un objeto con el método `load()`:
Un archivo de carga de datos debe terminar con `.data.js` o `.data.ts`. El archivo debe proporcionar una exportación predeterminada de un objeto con el método `load()`:
```js [example.data.js]
export default {
@ -22,8 +22,9 @@ export default {
}
```
El módulo del cargador es validado apenas en Node.js, entonces puede importar APIs Node y dependencias npm caso necesario.
Puede importar entonces datos de este archivo en páginas `.md` y componentes `.vue` usando la exportación llamada `data`:
El módulo de carga se evalúa únicamente en Node.js, por lo que puedes importar las API de Node y las dependencias de npm según sea necesario.
Luego puedes importar datos de este archivo en páginas `.md` y componentes `.vue` usando la exportación llamada `data`:
```vue
<scriptsetup>
@ -41,9 +42,9 @@ 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 cargador de datos en sí no exporta el `data`. Es VitePress llamando el método `load()` internamente y expone implícitamente el resultado a través de la exportación llamada `data`.
Esto funciona incluso si el cargador fuera asíncrono:
Esto funciona incluso si el cargador es asíncrono:
```js
export default {
@ -56,11 +57,11 @@ export default {
## Datos de Archivos Locales {#data-from-local-files}
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 en caliente.
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 directorio 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 compilación, usted no enviará el procesador de CSV para el cliente!
```js
import fs from 'node:fs'
@ -69,9 +70,9 @@ import { parse } from 'csv-parse/sync'
export default {
watch: ['./data/*.csv'],
load(watchedFiles) {
// watchedFiles será un array de paths absolutos de los archivos um array de caminhos absolutos dos arquivos correspondientes.
// generar un array de metadatos de post que puede ser usado para mostrar
// una lista en el layout del tema
// watchedFiles será un array con las rutas absolutas de los archivos coincidentes.
// Genera un array con los metadatos de las entradas del blog que se pueden usar para renderizar
// una lista en el diseño del tema.
return watchedFiles.map((file) => {
return parse(fs.readFileSync(file, 'utf-8'), {
columns: true,
@ -84,7 +85,7 @@ export default {
## `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 [posts.data.js]
import { createContentLoader } from 'vitepress'
@ -92,16 +93,16 @@ 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 las marca de tiempo 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.
Los datos cargados serán un _array_ con el tipo `ContentData[]`:
Los datos cargados serán un array con el tipo `ContentData[]`:
```ts
interface ContentData {
// URL mapeada para la página. Ex: /posts/hello.html (no incluye la base)
// itere manualmente o use `transform` personalizado para normalizar los paths
// URL mapeada para la página. p. ej.: /posts/hola.html (no incluye la base)
// itere manualmente o use `transform` personalizado para normalizar los directorios
url: string
// datos frontmatter de la página
frontmatter: Record<string,any>
@ -114,8 +115,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, solo se proporcionan `url` y `frontmatter`. Esto se debe a que los datos cargados se insertarán como JSON en el paquete del cliente, por lo que debemos tener cuidado con su tamaño. Aquí hay un ejemplo que utiliza los datos para crear una página de índice de blog mínima:
```vue
<scriptsetup>
import { data as posts } from './posts.data.js'
@ -140,9 +140,9 @@ Los datos por defecto pueden no atender todas las necesidades - puede optar por
description: Despliega tu sitio VitePress en plataformas populares como Netlify, Vercel, GitHub Pages y más.
outline: deep
description: Despliega tu sitio VitePress en plataformas populares como Netlify, Vercel, GitHub Pages y más.
---
# Despliegue su Sitio VitePress {#deploy-your-vitepress-site}
@ -8,7 +8,7 @@ outline: deep
Las siguientes orientaciones están basadas en algunos supuestos:
- El sitio VitePress está dentro del directorio `docs` de su proyecto.
- Está usando la directorio por defecto para el build (`.vitepress/dist`).
- Está usando la directorio por defecto para el la compilación (`.vitepress/dist`).
- VitePress está instalado como una dependencia local en su proyecto, y usted configuró los siguientes scripts en su `package.json`:
```json [package.json]
@ -46,27 +46,27 @@ Las siguientes orientaciones están basadas en algunos supuestos:
}
```
Ahora el método `docs:preview` implantará el servidor en `http://localhost:8080`.
Ahora, el método `docs:preview` iniciará el servidor en `http://localhost:8080`.
## Configurando un Path Base Publico {#setting-a-public-base-path}
## Configurando un Directorio 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 directorio raíz de un dominio (`/`). Si su sitio fuera servido en un subdirectorio, por ejemplo, `https://mipagina.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:** Si utilizas Github (o GitLab) Pages y realizas el despliegue en `user.github.io/repo/`, entonces establece tu `base` en`/repo/`.
## 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 al visitar 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`.
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`se genera a partir del contenido de este archivo. Se garantiza que la misma URL con hash servirá el mismo contenido del archivo; si el contenido cambia, las URL también cambian. Esto significa que puede usar con seguridad los encabezados de caché más seguros para estos archivos. Todos estos archivos se colocarán en `assets/` en el directorio de salida, por lo que puede configurar el siguiente encabezado para ellos:
```
Cache-Control: max-age=31536000,immutable
```
::: details 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 colocarse en el [directorio público](./asset-handling#the-public-directory) - en nuestro caso, `docs/public/_headers` - para que se copie tal cual al directorio de salida.
[Documentación de headers personalizados de Netlify](https://docs.netlify.com/routing/headers/)
:::
::: details de Ejemplo de configuración Vercel em`vercel.json`
::: details de Ejemplo de configuración Vercel en`vercel.json`
```json
{
@ -98,13 +98,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)
@ -115,25 +115,25 @@ Configure un nuevo proyecto y altere estas configuraciones usando su panel:
- **Versión de Node:**`20` (o superior)
::: 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 si fueran removidos.
:::
### GitHub Pages
1. Cree un archivo llamado `deploy.yml` dentro del directorio `.github/workflows` do seu projeto com algum conteúdo como este:
1. Crea un archivo llamado `deploy.yml` dentro del directorio `.github/workflows` de tu proyecto con un contenido como este:
```yaml [.github/workflows/deploy.yml]
# Ejemplo de flujo de trabajo para compilar e implantar un sitio VitePress en GitHub Pages
#
name: Implante el sitio VitePress en Pages
name: Despliegue el sitio VitePress en Pages
on:
# Ejecute en push direccionados a la branch `main`.
# Cambie para `master` si estuviera usando la branch `master` por defecto.
# Se ejecuta en los pushes dirigidos a la rama `main`. Cámbialo a `master`
# si estás usando la rama `master` como rama predeterminada.
push:
branches: [main]
# Permite ejecutar manualmente este flujo de trabajo en la guia Actions
# Permite ejecutar este flujo de trabajo manualmente desde la pestaña Acciones
workflow_dispatch:
# Define permisos GITHUB_TOKEN para la implementación en GitHub Pages
@ -142,8 +142,9 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
pages: 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.
# Sin embargo, NO cancela ejecuciones en progreso, pues queremos permitir que esas implantaciones de producción sean concuidas.
# Permitir solo una implementación simultánea, omitiendo las ejecuciones en cola entre la ejecución en curso y la última en cola.
# Sin embargo, NO cancelar las ejecuciones en curso, ya que queremos permitir que estas implementaciones de producción se completen.
concurrency:
group: pages
cancel-in-progress: false
@ -156,28 +157,35 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
- name: Checkout
uses: actions/checkout@v5
with:
fetch-depth: 0 # No necesario se lastUpdated no estuviera habilitado
fetch-depth: 0 # No necesario si lastUpdated no estuviera habilitado
run: npm ci # o pnpm install / yarn install / bun install
- name: Build with VitePress
run: npm run docs:build # o pnpm docs:build / yarn docs:build / bun run docs:build
- name: Build with VitePress
run: npm run docs:build # o pnpm docs:build / yarn docs:build / bun run docs:build
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: docs/.vitepress/dist
# Trabajo de implantación
# Trabajo de despliegue
deploy:
environment:
name: github-pages
@ -192,18 +200,18 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
```
::: warning
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 [Configurando un Directorio Base Publico](#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".
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. 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://<usuario>.github.io/[repositorio]/` o `https://<dominio-personalizado>/` dependiendo de sus configuraciones. Su sitio será implantado automáticamente en cada push para la branch `main`.
### 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>/`. No necesita `base` si está implementando en un dominio personalizado, páginas de usuario o grupo, o si la configuración "Use unique domain" está habilitada en GitLab.
1. Establezca `outDir` en la configuración de VitePress a `../public`. Configure la opción `base` a `'/<repositorio>/'` si desea implementar en `https://<usuario>.gitlab.io/<repositorio>/`. No necesita `base` si está implementando en un dominio personalizado, páginas de usuario o grupo, o si tiene habilitada la opción "Usar dominio único" en GitLab.
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 cambios en el contenido.
```yaml [.gitlab-ci.yml]
image: node:24
@ -212,7 +220,7 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
paths:
- node_modules/
script:
# - apk add git # Desconecte eso se estuviera usando imagenes pequeñas de Docker como Alpine y tuviera lastUpdated habilitado
# - apk add git # Descomente esto si está utilizando imágenes de Docker pequeñas como alpine y tiene la última actualización habilitada.
- npm install
- npm run docs:build
artifacts:
@ -222,9 +230,11 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
- main
```
<!-- Mantener los encabezados ordenados alfabéticamente, dejar nginx al final -->
### Azure
1. Siga la [documentación oficial](https://docs.microsoft.com/en-us/azure/static-web-apps/build-configuration).
1. Follow the [documentación oficial](https://learn.microsoft.com/es-es/azure/static-web-apps/build-configuration).
2. Configure esos valores en su archivo de configuración (y remueva aquellos que no necesita, como `api_location`):
@ -238,7 +248,7 @@ Puedes desplegar tu proyecto VitePress con [CloudRay](https://cloudray.io/) sigu
### 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`:
@ -261,7 +271,7 @@ Puedes desplegar tu proyecto VitePress con [CloudRay](https://cloudray.io/) sigu
}
```
2. Después de ejecutar `npm run docs:build`, ejecute este comando para implantar:
2. Después de ejecutar `npm run docs:build`, ejecute este comando para desplegar:
```sh
firebase deploy
@ -269,9 +279,9 @@ Puedes desplegar tu proyecto VitePress con [CloudRay](https://cloudray.io/) sigu
### 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 siguiente contenido:
```json [static.json]
{
@ -285,7 +295,7 @@ Puedes desplegar tu proyecto VitePress con [Hostinger](https://www.hostinger.com
### Kinsta
Puede implantar su sitio VitePress em [Kinsta](https://kinsta.com/static-site-hosting/) siguiendo estas [instrucciones](https://kinsta.com/docs/vitepress-static-site-example/).
Puede implantar su sitio VitePress en [Kinsta](https://kinsta.com/static-site-hosting/) siguiendo estas [instrucciones](https://kinsta.com/docs/vitepress-static-site-example/).
Jackestar
1 week ago
committed by
GitHub