mirror of https://github.com/vuejs/vitepress
docs(es): add Spanish translations (#3859)
Co-authored-by: JohnFreddyTutistar <johnfre.157@gmail.com>pull/3291/head
Camilo Parra
5 months ago
committed by
GitHub
parent
d355d8f656
commit
57cd793a2d
@ -0,0 +1,59 @@
|
||||
# Manejo de Assets {#asset-handling}
|
||||
|
||||
## Referenciando Assets Estáticos {#referencing-static-assets}
|
||||
|
||||
Todos los archivos Markdown son compilados en componentes Vue y procesados por [Vite](https://vitejs.dev/guide/assets.html). Usted puede **y debe** referenciar cualquier asset usando URLs relativas:
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
Tipos comunes de archivos de imagen, media y fuente son detectados e incluidos automaticamente 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.
|
||||
|
||||
Todas las referencias de path **estáticas**, incluyendo paths absolutos, deben ser basadas en la estructura de su directorio de trabajo.
|
||||
|
||||
## El directorio público {#the-public-directory}
|
||||
|
||||
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`.
|
||||
|
||||
Los assets colocados en `public` serán copiados a la raiz 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`.
|
||||
|
||||
## 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).
|
||||
|
||||
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:
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
**No** necesita actualizarlo cuando altere el valor de configuración `base` en ese caso.
|
||||
|
||||
Sin embargo, se estuviera creando un componente de tema que vincula assets dinámicamente, por ejemplo, una imagen cuyo `src` esta basado en un valor de configuración del tema:
|
||||
|
||||
```vue
|
||||
<img :src="theme.logoPath" />
|
||||
```
|
||||
|
||||
En este caso, es recomendable complementar el path con el [`auxiliar withBase`](../reference/runtime-api#withbase) proporcionado por VitePress:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { withBase, useData } from 'vitepress'
|
||||
|
||||
const { theme } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<img :src="withBase(theme.logoPath)" />
|
||||
</template>
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Conectando a un CMS {#connecting-to-a-cms}
|
||||
|
||||
## Flujo de Trabajo general {#general-workflow}
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
1. Si su CMS exige autenticación, cree un archivo `.env` para almacenar los tokens del API y cargarlos como:
|
||||
|
||||
```js
|
||||
// posts/[id].paths.js
|
||||
import { loadEnv } from 'vitepress'
|
||||
|
||||
const env = loadEnv('', process.cwd())
|
||||
```
|
||||
|
||||
2. Obtenga los datos necesarios del CMS y aplique formato en paths de datos apropiados:
|
||||
|
||||
```js
|
||||
export default {
|
||||
async paths() {
|
||||
// use la biblioteca del cliente CMS respectiva si es necesario
|
||||
const data = await (await fetch('https://my-cms-api', {
|
||||
headers: {
|
||||
// token caso necesario
|
||||
}
|
||||
})).json()
|
||||
|
||||
return data.map(entry => {
|
||||
return {
|
||||
params: { id: entry.id, /* título, autores, data, etc. */ },
|
||||
content: entry.content
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3. Presente el contenido en la página:
|
||||
|
||||
```md
|
||||
# {{ $params.title }}
|
||||
|
||||
- por {{ $params.author }} en {{ $params.date }}
|
||||
|
||||
<!-- @content -->
|
||||
```
|
||||
|
||||
## Guias 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!
|
||||
@ -0,0 +1,222 @@
|
||||
# Usando un Tema Personalizado {#using-a-custom-theme}
|
||||
|
||||
## Carga de Tema {#theme-resolving}
|
||||
|
||||
Puede habilitar un tema personalizado creando un archivo `.vitepress/theme/index.js` o `.vitepress/theme/index.ts` (o "archivo de entrada de tema"):
|
||||
|
||||
```
|
||||
.
|
||||
├─ docs # raiz del proyecto
|
||||
│ ├─ .vitepress
|
||||
│ │ ├─ theme
|
||||
│ │ │ └─ index.js # entrada de tema
|
||||
│ │ └─ config.js # archivo de configuración
|
||||
│ └─ index.md
|
||||
└─ 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.
|
||||
|
||||
## Interfaz del Tema {#theme-interface}
|
||||
|
||||
Un tema personalizado de VitePress es definifo como un objeto con la siguiente interfaz:
|
||||
|
||||
```ts
|
||||
interface Theme {
|
||||
/**
|
||||
* Componente raiz de layout para todas las páginas
|
||||
* @required
|
||||
*/
|
||||
Layout: Component
|
||||
/**
|
||||
* Mejora la instancia de la aplicación Vue
|
||||
* @optional
|
||||
*/
|
||||
enhanceApp?: (ctx: EnhanceAppContext) => Awaitable<void>
|
||||
/**
|
||||
* Extiende otro tema, llamando su `enhanceApp` antes de nuestro
|
||||
* @optional
|
||||
*/
|
||||
extends?: Theme
|
||||
}
|
||||
|
||||
interface EnhanceAppContext {
|
||||
app: App // instancia de la aplicación Vue
|
||||
router: Router // instancia del enrutador VitePress
|
||||
siteData: Ref<SiteData> // Metadata a nivel del sitio
|
||||
}
|
||||
```
|
||||
|
||||
El archivo de entrada del tema debe exportar el tema como su exportación por defecto:
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
|
||||
// Puede importar archivos Vue directamente en el archivo de entrada del tema
|
||||
// VitePress ya está preconfigurado con @vitejs/plugin-vue.
|
||||
import Layout from './Layout.vue'
|
||||
|
||||
export default {
|
||||
Layout,
|
||||
enhanceApp({ app, router, siteData }) {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
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).
|
||||
|
||||
## Construyendo un Layout {#building-a-layout}
|
||||
|
||||
El componente de layout más básico necesita un componente [`<Content />`](../reference/runtime-api#content):
|
||||
|
||||
```vue
|
||||
<!-- .vitepress/theme/Layout.vue -->
|
||||
<template>
|
||||
<h1>Layout Personalizado!</h1>
|
||||
|
||||
<!-- aqui es donde el contenido markdown será presentado -->
|
||||
<Content />
|
||||
</template>
|
||||
```
|
||||
|
||||
El layout encima simplemente renderiza el markdown de todas las páginas cómo HTML. La primera mejora que podemos adicionar es lidiar con errores 404:
|
||||
|
||||
```vue{1-4,9-12}
|
||||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
const { page } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Layout Personalizado!</h1>
|
||||
|
||||
<div v-if="page.isNotFound">
|
||||
Página 404 personalizada!
|
||||
</div>
|
||||
<Content v-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:
|
||||
|
||||
```md
|
||||
---
|
||||
layout: home
|
||||
---
|
||||
```
|
||||
|
||||
Y podemos ajustar nuestro tema para lidiar con esto:
|
||||
|
||||
```vue{3,12-14}
|
||||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
const { page, frontmatter } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Layout Personalizado!</h1>
|
||||
|
||||
<div v-if="page.isNotFound">
|
||||
Página 404 personalizada!
|
||||
</div>
|
||||
<div v-if="frontmatter.layout === 'home'">
|
||||
Página inicial personalizada!
|
||||
</div>
|
||||
<Content v-else />
|
||||
</template>
|
||||
```
|
||||
|
||||
Puede, claro está, dividir el layout en más componentes:
|
||||
|
||||
```vue{3-5,12-15}
|
||||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
import NotFound from './NotFound.vue'
|
||||
import Home from './Home.vue'
|
||||
import Page from './Page.vue'
|
||||
|
||||
const { page, frontmatter } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Layout Personalizado!</h1>
|
||||
|
||||
<NotFound v-if="page.isNotFound" />
|
||||
<Home v-if="frontmatter.layout === 'home'" />
|
||||
<Page v-else /> <!-- <Page /> renders <Content /> -->
|
||||
</template>
|
||||
```
|
||||
|
||||
Consulte la [Referencia del API en tiempo de Ejecución](../reference/runtime-api) para todo lo que está disponible en componentes de tema. Además, puede aprovechar la [Carga de datos en Tiempo de Compilación](./data-loading) para generar layouts orientados por datos - por ejemplo, una página que lista todos los posts del blog en el proyecto actual.
|
||||
|
||||
## 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).
|
||||
|
||||
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.
|
||||
|
||||
2. Si aplica, exporte la definición de configuración del tipo de 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.
|
||||
|
||||
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).
|
||||
|
||||
## 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:
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
import Theme from 'awesome-vitepress-theme'
|
||||
|
||||
export default Theme
|
||||
```
|
||||
|
||||
Si el tema necesita ser extendido:
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
import Theme from 'awesome-vitepress-theme'
|
||||
|
||||
export default {
|
||||
extends: Theme,
|
||||
enhanceApp(ctx) {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Si el tema exige una configuración especial de VitePress, también necesitará extenderlo en su propia configuración:
|
||||
|
||||
```ts
|
||||
// .vitepress/theme/config.ts
|
||||
import baseConfig from 'awesome-vitepress-theme/config'
|
||||
|
||||
export default {
|
||||
// extienda la configuración base del tema (de ser necesario)
|
||||
extends: baseConfig
|
||||
}
|
||||
```
|
||||
|
||||
Finalmente, si el tema proporciona tipos para la configuración del tema:
|
||||
|
||||
```ts
|
||||
// .vitepress/theme/config.ts
|
||||
import baseConfig from 'awesome-vitepress-theme/config'
|
||||
import { defineConfigWithTheme } from 'vitepress'
|
||||
import type { ThemeConfig } from 'awesome-vitepress-theme'
|
||||
|
||||
export default defineConfigWithTheme<ThemeConfig>({
|
||||
extends: baseConfig,
|
||||
themeConfig: {
|
||||
// El tipo es `ThemeConfig`
|
||||
}
|
||||
})
|
||||
```
|
||||
@ -0,0 +1,247 @@
|
||||
# Carga de Datos en Tiempo de Compilacion {#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.
|
||||
|
||||
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.
|
||||
|
||||
## 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()`:
|
||||
|
||||
```js
|
||||
// example.data.js
|
||||
export default {
|
||||
load() {
|
||||
return {
|
||||
hello: 'world'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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`:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { data } from './example.data.js'
|
||||
</script>
|
||||
|
||||
<pre>{{ data }}</pre>
|
||||
```
|
||||
|
||||
Salida:
|
||||
|
||||
```json
|
||||
{
|
||||
"hello": "world"
|
||||
}
|
||||
```
|
||||
|
||||
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`.
|
||||
|
||||
Esto funciona incluso si el cargador fuera asíncrono:
|
||||
|
||||
```js
|
||||
export default {
|
||||
async load() {
|
||||
// buscar datos remotos
|
||||
return (await fetch('...')).json()
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
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.
|
||||
|
||||
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!
|
||||
|
||||
```js
|
||||
import fs from 'node:fs'
|
||||
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
|
||||
return watchedFiles.map((file) => {
|
||||
return parse(fs.readFileSync(file, 'utf-8'), {
|
||||
columns: true,
|
||||
skip_empty_lines: true
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `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:
|
||||
|
||||
```js
|
||||
// posts.data.js
|
||||
import { createContentLoader } from 'vitepress'
|
||||
|
||||
export default createContentLoader('posts/*.md', /* opciones */)
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
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[]`:
|
||||
|
||||
```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: string
|
||||
// datos frontmatter de la página
|
||||
frontmatter: Record<string, any>
|
||||
|
||||
// los siguientes están presentes si las opciones relevantes están habilitadas
|
||||
// discutiremos sobre eso abajo
|
||||
src: string | undefined
|
||||
html: string | undefined
|
||||
excerpt: string | undefined
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { data as posts } from './posts.data.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Todos los posts del blog</h1>
|
||||
<ul>
|
||||
<li v-for="post of posts">
|
||||
<a :href="post.url">{{ post.frontmatter.title }}</a>
|
||||
<span>por {{ post.frontmatter.author }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Opciones {#options}
|
||||
|
||||
Los datos por defecto pueden no atender todas las necesidades - puede optar por transformar los datos usando opciones:
|
||||
|
||||
```js
|
||||
// posts.data.js
|
||||
import { createContentLoader } from 'vitepress'
|
||||
|
||||
export default createContentLoader('posts/*.md', {
|
||||
includeSrc: true, // incluir fuente markdown en crudo?
|
||||
render: true, // incluir HTML completo de la página presentada?
|
||||
excerpt: true, // incluir extracto?
|
||||
transform(rawData) {
|
||||
// mapee, ordene o filtre los datos en crudo como desee.
|
||||
// el resultado final es lo que será enviado al cliente.
|
||||
return rawData.sort((a, b) => {
|
||||
return +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date)
|
||||
}).map((page) => {
|
||||
page.src // fuente markdown en crudo
|
||||
page.html // HTML completo de la página presentada
|
||||
page.excerpt // HTML del extracto presentado (contenido encima del primer `---`)
|
||||
return {/* ... */}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Vea cómo es usado en el [blog Vue.js](https://github.com/vuejs/blog/blob/main/.vitepress/theme/posts.data.ts).
|
||||
|
||||
El API `createContentLoader` también puede ser usada dentro de los [build hooks](../reference/site-config#build-hooks):
|
||||
|
||||
```js
|
||||
// .vitepress/config.js
|
||||
export default {
|
||||
async buildEnd() {
|
||||
const posts = await createContentLoader('posts/*.md').load()
|
||||
// generar archivos con base en los metadatos de los posts, por ejemplo, feed RSS
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Tipos**
|
||||
|
||||
```ts
|
||||
interface ContentOptions<T = ContentData[]> {
|
||||
/**
|
||||
* Incluir src?
|
||||
* @default false
|
||||
*/
|
||||
includeSrc?: boolean
|
||||
|
||||
/**
|
||||
* Renderizar src para HTML e incluir en los datos?
|
||||
* @default false
|
||||
*/
|
||||
render?: boolean
|
||||
|
||||
/**
|
||||
* Si `boolean`, debe procesarse e incluir el resumen? (presentado como HTML)
|
||||
*
|
||||
* Si `function`, controla como el extracto es extraido del contenido.
|
||||
*
|
||||
* Si `string`, define un separador personalizado usado para extraer el
|
||||
* extracto. El separados por defecto es `---` si `excerpt` fuera `true`.
|
||||
*
|
||||
* @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt
|
||||
* @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt_separator
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
excerpt?:
|
||||
| boolean
|
||||
| ((file: { data: { [key: string]: any }; content: string; excerpt?: string }, options?: any) => void)
|
||||
| string
|
||||
|
||||
/**
|
||||
* Transforma los datos. Observe que los datos serán incorporados como JSON en el paquete del cliente
|
||||
* caso sean importados de componentes o archivos markdown.
|
||||
*/
|
||||
transform?: (data: ContentData[]) => T | Promise<T>
|
||||
}
|
||||
```
|
||||
|
||||
## Cargadores de datos con Tipos {#typed-data-loaders}
|
||||
|
||||
Al usar TypeScript, puede tipar su cargador de datos y exportar `data` de la siguiente forma:
|
||||
|
||||
```ts
|
||||
import { defineLoader } from 'vitepress'
|
||||
|
||||
export interface Data {
|
||||
// tipo de dato
|
||||
}
|
||||
|
||||
declare const data: Data
|
||||
export { data }
|
||||
|
||||
export default defineLoader({
|
||||
// opciones del cargador verificadas por el tipo
|
||||
watch: ['...'],
|
||||
async load(): Promise<Data> {
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Configuración {#configuration}
|
||||
|
||||
Para obtener información de configuración dentro de un cargador, puede usar un código como este:
|
||||
|
||||
```ts
|
||||
import type { SiteConfig } from 'vitepress'
|
||||
|
||||
const config: SiteConfig = (globalThis as any).VITEPRESS_CONFIG
|
||||
```
|
||||
@ -0,0 +1,290 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Despliegue su Sitio VitePress {#deploy-your-vitepress-site}
|
||||
|
||||
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`).
|
||||
- VitePress está instalado como una dependencia local en su proyecto, y usted configuró los siguientes scripts en su `package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"docs:build": "vitepress build docs",
|
||||
"docs:preview": "vitepress preview docs"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Compilar y Testear Localmente {#build-and-test-locally}
|
||||
|
||||
1. Ejecute este comando para compilar la documentación:
|
||||
|
||||
```sh
|
||||
$ npm run docs:build
|
||||
```
|
||||
|
||||
2. Después de la compilación, vea la vista previa ejecutando:
|
||||
|
||||
```sh
|
||||
$ npm run docs:preview
|
||||
```
|
||||
|
||||
El comando `preview` inicializará un servidor web estático local que servirá la directorio de salida `.vitepress/dist` en `http://localhost:4173`. Puede usar eso para garantizar que todo esté correcto antes de enviar a producción.
|
||||
|
||||
3. Puede configurar el puerto del servidor pasando `--port` como argumento.
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"docs:preview": "vitepress preview docs --port 8080"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Ahora el método `docs:preview` implantará el servidor en `http://localhost:8080`.
|
||||
|
||||
## 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.
|
||||
|
||||
**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}
|
||||
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
```
|
||||
Cache-Control: max-age=31536000,immutable
|
||||
```
|
||||
|
||||
::: detralles Ejemplo de archivo `_headers` do Netlify
|
||||
|
||||
```
|
||||
/assets/*
|
||||
cache-control: max-age=31536000
|
||||
cache-control: immutable
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
[Documentación de headers personalizados de Netlify](https://docs.netlify.com/routing/headers/)
|
||||
|
||||
:::
|
||||
|
||||
::: detalles de Ejemplo de configuración Vercel em `vercel.json`
|
||||
|
||||
```json
|
||||
{
|
||||
"headers": [
|
||||
{
|
||||
"source": "/assets/(.*)",
|
||||
"headers": [
|
||||
{
|
||||
"key": "Cache-Control",
|
||||
"value": "max-age=31536000, immutable"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Nota: el archivo `vercel.json` debe ser colocado en la raiz de su **repositório**.
|
||||
|
||||
[Documentación Vercel sobre configuración de headers ](https://vercel.com/docs/concepts/projects/project-configuration#headers)
|
||||
|
||||
:::
|
||||
|
||||
## Guias de Plataforma {#platform-guides}
|
||||
|
||||
### Netlify / Vercel / Cloudflare Pages / AWS Amplify / Render
|
||||
|
||||
Configure un nuevo proyecto y altere estas configuraciones usando su panel:
|
||||
|
||||
- **Comando de Compilación:** `npm run docs:build`
|
||||
- **directorio de Salida:** `docs/.vitepress/dist`
|
||||
- **Versión de Node:** `18` (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.
|
||||
:::
|
||||
|
||||
### GitHub Pages
|
||||
|
||||
1. Cree un archivo llamado `deploy.yml` dentro del directorio `.github/workflows` do seu projeto com algum conteúdo como este:
|
||||
|
||||
```yaml
|
||||
# Ejemplo de flujo de trabajo para compilar e implantar un sitio VitePress en GitHub Pages
|
||||
#
|
||||
name: Implante 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.
|
||||
push:
|
||||
branches: [main]
|
||||
|
||||
# Permite ejecutar manualmente este flujo de trabajo en la guia Actions
|
||||
workflow_dispatch:
|
||||
|
||||
# Define permisos GITHUB_TOKEN para la implementación en GitHub Pages
|
||||
permissions:
|
||||
contents: read
|
||||
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.
|
||||
concurrency:
|
||||
group: pages
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
# Trabajo de compilación
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0 # No necesario se lastUpdated no estuviera habilitado
|
||||
# - uses: pnpm/action-setup@v3 # Desconecte eso si estuviera usando pnpm
|
||||
# - uses: oven-sh/setup-bun@v1 # Desconecte eso se estuviera usando Bun
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: npm # o pnpm / yarn
|
||||
- name: Setup Pages
|
||||
uses: actions/configure-pages@v4
|
||||
- name: Install dependencies
|
||||
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
|
||||
touch docs/.vitepress/dist/.nojekyll
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: docs/.vitepress/dist
|
||||
|
||||
# Trabajo de implantación
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
needs: build
|
||||
runs-on: ubuntu-latest
|
||||
name: Deploy
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
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.
|
||||
:::
|
||||
|
||||
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`.
|
||||
|
||||
### 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>/`.
|
||||
|
||||
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.
|
||||
|
||||
```yaml
|
||||
image: node:18
|
||||
pages:
|
||||
cache:
|
||||
paths:
|
||||
- node_modules/
|
||||
script:
|
||||
# - apk add git # Desconecte eso se estuviera usando imagenes pequeñas de Docker como Alpine y tuviera lastUpdated habilitado
|
||||
- npm install
|
||||
- npm run docs:build
|
||||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
only:
|
||||
- main
|
||||
```
|
||||
|
||||
### Azure Static Web Apps {#azure-static-web-apps}
|
||||
|
||||
1. Siga la [documentación oficial](https://docs.microsoft.com/en-us/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`):
|
||||
|
||||
- **`app_location`**: `/`
|
||||
- **`output_location`**: `docs/.vitepress/dist`
|
||||
- **`app_build_command`**: `npm run docs:build`
|
||||
|
||||
### Firebase {#firebase}
|
||||
|
||||
1. Cree `firebase.json` y `.firebaserc` en la raiz de su proyecto:
|
||||
|
||||
`firebase.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"hosting": {
|
||||
"public": "docs/.vitepress/dist",
|
||||
"ignore": []
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`.firebaserc`:
|
||||
|
||||
```json
|
||||
{
|
||||
"projects": {
|
||||
"default": "<SU_ID_FIREBASE>"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. Después de ejecutar `npm run docs:build`, ejecute este comando para implantar:
|
||||
|
||||
```sh
|
||||
firebase deploy
|
||||
```
|
||||
|
||||
### Surge
|
||||
|
||||
1. Después de ejecutar `npm run docs:build`, ejecute este comando para implantar:
|
||||
|
||||
```sh
|
||||
npx surge docs/.vitepress/dist
|
||||
```
|
||||
|
||||
### Heroku
|
||||
|
||||
1. Siga la documentación y el guia 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:
|
||||
|
||||
```json
|
||||
{
|
||||
"root": "docs/.vitepress/dist"
|
||||
}
|
||||
```
|
||||
|
||||
### Edgio
|
||||
|
||||
Consulte [Crear e Implantar una Aplicación Vitepress en Edgio](https://docs.edg.io/guides/vitepress).
|
||||
|
||||
### Kinsta Static Site Hosting {#kinsta-static-site-hosting}
|
||||
|
||||
Puede implantar su sitio Vitepress em [Kinsta](https://kinsta.com/static-site-hosting/) siguiendo estas [instrucciones](https://kinsta.com/docs/vitepress-static-site-example/).
|
||||
@ -0,0 +1,340 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Extendiendo el Tema por defecto {#extending-the-default-theme}
|
||||
|
||||
El tema por defecto de VitePress es optimizado para documentación y puede ser personalizado. Consulte la [Visión General de Configuración del Tema por Defecto](../reference/default-theme-config) para una lista completa de opciones.
|
||||
|
||||
Sin embargo, hay casos en que apenas la configuración no será suficiente. Por ejemplo:
|
||||
|
||||
1. Es necesario ajustar los estilos CSS;
|
||||
2. Es necesario modificar la instancia de la aplicación Vue, por ejemplo para registrar componentes globales;
|
||||
3. Es necesario inyectar contenido personalizado en el tema por medio de _slots_ en el layout.
|
||||
|
||||
Esas personalizaciones avanzadas exigirán el uso de un tema personalizado que "extiende" el tema por defecto.
|
||||
|
||||
::: tip
|
||||
Antes de seguir, asegurese de leer primero [Usando un Tema Personalizado](./custom-theme) para entender como funcionan los temas personalizados.
|
||||
:::
|
||||
|
||||
## Personalizando el CSS {#customizing-css}
|
||||
|
||||
El CSS del tema por defecto puede ser personalizado substuyendo las variables CSS a nivel de la raiz:
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import './custom.css'
|
||||
|
||||
export default DefaultTheme
|
||||
```
|
||||
|
||||
```css
|
||||
/* .vitepress/theme/custom.css */
|
||||
:root {
|
||||
--vp-c-brand-1: #646cff;
|
||||
--vp-c-brand-2: #747bff;
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## 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.
|
||||
|
||||
Para evitar la inclusión de Inter en la salida de compilación, importe el tema de `vitepress/theme-without-fonts`:
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
import DefaultTheme from 'vitepress/theme-without-fonts'
|
||||
import './my-fonts.css'
|
||||
|
||||
export default DefaultTheme
|
||||
```
|
||||
|
||||
```css
|
||||
/* .vitepress/theme/custom.css */
|
||||
:root {
|
||||
--vp-font-family-base: /* fuente de texto normal */
|
||||
--vp-font-family-mono: /* fuente de código */
|
||||
}
|
||||
```
|
||||
|
||||
::: 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 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):
|
||||
|
||||
```js
|
||||
// .vitepress/config.js
|
||||
export default {
|
||||
transformHead({ assets }) {
|
||||
// ajuste el regex para corresponder a su fuente
|
||||
const myFontFile = assets.find(file => /font-name\.\w+\.woff2/)
|
||||
if (myFontFile) {
|
||||
return [
|
||||
[
|
||||
'link',
|
||||
{
|
||||
rel: 'preload',
|
||||
href: myFontFile,
|
||||
as: 'font',
|
||||
type: 'font/woff2',
|
||||
crossorigin: ''
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Registrando Componentes Globales {#registering-global-components}
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
|
||||
/** @type {import('vitepress').Theme} */
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
enhanceApp({ app }) {
|
||||
// registre sus componentes globales personalizados
|
||||
app.component('MyGlobalComponent' /* ... */)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Si está usando TypeScript:
|
||||
```ts
|
||||
// .vitepress/theme/index.ts
|
||||
import type { Theme } from 'vitepress'
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
enhanceApp({ app }) {
|
||||
// registre sus componentes globales personalizados
|
||||
app.component('MyGlobalComponent' /* ... */)
|
||||
}
|
||||
} 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.
|
||||
|
||||
## _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:
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import MyLayout from './MyLayout.vue'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
// substituya el Layout por un componente wrapper que
|
||||
// inyecta los slots
|
||||
Layout: MyLayout
|
||||
}
|
||||
```
|
||||
|
||||
```vue
|
||||
<!--.vitepress/theme/MyLayout.vue-->
|
||||
<script setup>
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
|
||||
const { Layout } = DefaultTheme
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<template #aside-outline-before>
|
||||
Mi contenido personalizado superior de la barra lateral
|
||||
</template>
|
||||
</Layout>
|
||||
</template>
|
||||
```
|
||||
|
||||
O puede también usar la función _render_.
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
import { h } from 'vue'
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import MyComponent from './MyComponent.vue'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
Layout() {
|
||||
return h(DefaultTheme.Layout, null, {
|
||||
'aside-outline-before': () => h(MyComponent)
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Lista completa de _slots_ disponibles en el layout del tema por defecto:
|
||||
|
||||
- Cuando `layout: 'doc'` (por defecto) está habilitado via frontmatter:
|
||||
- `doc-top`
|
||||
- `doc-bottom`
|
||||
- `doc-footer-before`
|
||||
- `doc-before`
|
||||
- `doc-after`
|
||||
- `sidebar-nav-before`
|
||||
- `sidebar-nav-after`
|
||||
- `aside-top`
|
||||
- `aside-bottom`
|
||||
- `aside-outline-before`
|
||||
- `aside-outline-after`
|
||||
- `aside-ads-before`
|
||||
- `aside-ads-after`
|
||||
- Cuando `layout: 'home'` está habilitado via frontmatter:
|
||||
- `home-hero-before`
|
||||
- `home-hero-info-before`
|
||||
- `home-hero-info`
|
||||
- `home-hero-actions-after`
|
||||
- `home-hero-image`
|
||||
- `home-hero-after`
|
||||
- `home-features-before`
|
||||
- `home-features-after`
|
||||
- Cuando `layout: 'page'` está habilitado via frontmatter:
|
||||
- `page-top`
|
||||
- `page-bottom`
|
||||
- En la página no encontrada (404):
|
||||
- `not-found`
|
||||
- Siempre:
|
||||
- `layout-top`
|
||||
- `layout-bottom`
|
||||
- `nav-bar-title-before`
|
||||
- `nav-bar-title-after`
|
||||
- `nav-bar-content-before`
|
||||
- `nav-bar-content-after`
|
||||
- `nav-screen-content-before`
|
||||
- `nav-screen-content-after`
|
||||
|
||||
## Usando el API View Transitions
|
||||
|
||||
### En la Alternancia de Apariencia {#on-appearance-toggle}
|
||||
|
||||
Puede extender el tema por defecto para proporcionar una transición personalizada cuando el modo de color es alternado. Un ejemplo:
|
||||
|
||||
```vue
|
||||
<!-- .vitepress/theme/Layout.vue -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useData } from 'vitepress'
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import { nextTick, provide } from 'vue'
|
||||
|
||||
const { isDark } = useData()
|
||||
|
||||
const enableTransitions = () =>
|
||||
'startViewTransition' in document &&
|
||||
window.matchMedia('(prefers-reduced-motion: no-preference)').matches
|
||||
|
||||
provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
|
||||
if (!enableTransitions()) {
|
||||
isDark.value = !isDark.value
|
||||
return
|
||||
}
|
||||
|
||||
const clipPath = [
|
||||
`circle(0px at ${x}px ${y}px)`,
|
||||
`circle(${Math.hypot(
|
||||
Math.max(x, innerWidth - x),
|
||||
Math.max(y, innerHeight - y)
|
||||
)}px at ${x}px ${y}px)`
|
||||
]
|
||||
|
||||
await document.startViewTransition(async () => {
|
||||
isDark.value = !isDark.value
|
||||
await nextTick()
|
||||
}).ready
|
||||
|
||||
document.documentElement.animate(
|
||||
{ clipPath: isDark.value ? clipPath.reverse() : clipPath },
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'ease-in',
|
||||
pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
|
||||
}
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DefaultTheme.Layout />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation: none;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
::view-transition-old(root),
|
||||
.dark::view-transition-new(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::view-transition-new(root),
|
||||
.dark::view-transition-old(root) {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.VPSwitchAppearance {
|
||||
width: 22px !important;
|
||||
}
|
||||
|
||||
.VPSwitchAppearance .check {
|
||||
transform: none !important;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Resultado (**atención!**: colores destellantes, movimientos súbitos, luces brillantes):
|
||||
|
||||
<details>
|
||||
<summary>Demo</summary>
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
Consulte [Chrome Docs](https://developer.chrome.com/docs/web-platform/view-transitions/) para mas detalles sobre _view transitions_.
|
||||
|
||||
### En el Cambio de Ruta {#on-route-change}
|
||||
|
||||
En breve.
|
||||
|
||||
## Substituyendo Componentes Internos {#overriding-internal-components}
|
||||
|
||||
Puede usar los [aliases](https://vitejs.dev/config/shared-options.html#resolve-alias) Vite para substituir los componentes del tema por defecto por los suyos personalizados:
|
||||
|
||||
```ts
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
vite: {
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: /^.*\/VPNavBar\.vue$/,
|
||||
replacement: fileURLToPath(
|
||||
new URL('./components/CustomNavBar.vue', import.meta.url)
|
||||
)
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Para saber el nombre exacto del componente consulte [nuestro código fuente](https://github.com/vuejs/vitepress/tree/main/src/client/theme-default/components). Como los componentes son internos, hay una pequeña chance de que el nombre sea actualizado entre lanzamientos secundarios.
|
||||
@ -0,0 +1,48 @@
|
||||
# Frontmatter
|
||||
|
||||
## Uso {#usage}
|
||||
|
||||
VitePress soporta frontmatter YAML en todos los archivos Markdown, procesandolos con [gray-matter](https://github.com/jonschlinkert/gray-matter). El frontmatter debe estar en la parte superior del archivo Markdown (antes de cualquier elemento, incluyendo tags `<script>`), y debe tener la forma de un YAML válido entre lineas con trazos de triple guion. Ejemplo:
|
||||
|
||||
```md
|
||||
---
|
||||
title: Documentación con VitePress
|
||||
editLink: true
|
||||
---
|
||||
```
|
||||
|
||||
Muchas opciones de configuración del sitio o del tema por defecto tienen opciones correspondientes en el frontmatter. Puede usar el frontmatter para sobreponer un comportamiento específico solamente para la página actual. Para más detalles, vea [Referencia de Configuración del Frontmatter](../reference/frontmatter-config).
|
||||
|
||||
Puede también definir datos propios del frontmatter personalizados, para ser usados en expresiones Vue dinámicas en la página.
|
||||
|
||||
## Acceso a los Datos del Frontmatter {#accessing-frontmatter-data}
|
||||
|
||||
Los datos del frontmatter pueden ser accedidos por medio de la variable global especial `$frontmatter`:
|
||||
|
||||
Aqui está un ejemplo de como podría usarlo en su archivo Markdown:
|
||||
|
||||
```md
|
||||
---
|
||||
title: Documentación con VitePress
|
||||
editLink: true
|
||||
---
|
||||
|
||||
# {{ $frontmatter.title }}
|
||||
|
||||
Contenido de guia
|
||||
```
|
||||
|
||||
Puede acceder los datos del frontmatter de la página actual en `<script setup>` con el auxiliar [`useData()`](../reference/runtime-api#usedata).
|
||||
|
||||
## Formatos Alternativos del Frontmatter {#alternative-frontmatter-formats}
|
||||
|
||||
VitePress también soporta la sintaxis frontmatter JSON, comenzando y terminando con llaves:
|
||||
|
||||
```json
|
||||
---
|
||||
{
|
||||
"title": "Creando blog como un hacker",
|
||||
"editLink": true
|
||||
}
|
||||
---
|
||||
```
|
||||
@ -0,0 +1,216 @@
|
||||
# Iniciando {#getting-started}
|
||||
|
||||
## Experimente Online {#try-it-online}
|
||||
|
||||
Puede experimentar VitePress directamente en su navegador en [StackBlitz](https://vitepress.new).
|
||||
|
||||
## Instalación {#installation}
|
||||
|
||||
### Prerrequisitos {#prerequisites}
|
||||
|
||||
- [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).
|
||||
- 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).
|
||||
|
||||
VitePress puede ser usado solo, o ser instalado en un proyecto ya existente. En ambos casos, puede instalarlo con:
|
||||
|
||||
::: code-group
|
||||
|
||||
```sh [npm]
|
||||
$ npm add -D vitepress
|
||||
```
|
||||
|
||||
```sh [pnpm]
|
||||
$ pnpm add -D vitepress
|
||||
```
|
||||
|
||||
```sh [yarn]
|
||||
$ yarn add -D vitepress
|
||||
```
|
||||
|
||||
```sh [bun]
|
||||
$ bun add -D vitepress
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: detalles recibiendo avisos sobre dependencias ausentes?
|
||||
Si usa PNPM, percibirá un aviso de ausencia de `@docsearch/js`. Esto no evita que VitePress funcione. Si desea eliminar este aviso, adicione lo siguiente en su `package.json`:
|
||||
|
||||
```json
|
||||
"pnpm": {
|
||||
"peerDependencyRules": {
|
||||
"ignoreMissing": [
|
||||
"@algolia/client-search",
|
||||
"search-insights"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: 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')`.
|
||||
|
||||
:::
|
||||
|
||||
### Asistente de Instalación {#setup-wizard}
|
||||
|
||||
VitePress tiene embutido un asistente de instalación por linea de comando que ayudará a construir un proyecto básico. Después de la instalación, inicie el asistente ejecutando:
|
||||
|
||||
::: code-group
|
||||
|
||||
```sh [npm]
|
||||
$ npx vitepress init
|
||||
```
|
||||
|
||||
```sh [pnpm]
|
||||
$ pnpm vitepress init
|
||||
```
|
||||
|
||||
```sh [yarn]
|
||||
$ yarn vitepress init
|
||||
```
|
||||
|
||||
```sh [bun]
|
||||
$ bun vitepress init
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Será saludado con algunas preguntas simples:
|
||||
|
||||
<<< @/snippets/init.ansi
|
||||
|
||||
::: 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.
|
||||
:::
|
||||
|
||||
## Estrutura de Archivos {#file-structure}
|
||||
|
||||
Se está construyendo un sitio VitePress individual, puede desarrollar su sitio en el directorio actual (`./`). Sin embargo, si está instalando VitePress en un proyecto existente junto con otro código fuente, es recomendado construir el sitio en un directorio anidado (e.g. `./docs`) para que esté separado del resto de su proyecto.
|
||||
|
||||
Asumiendo la opción de desarrollar el proyecto VitePress en `./docs`, la estructura de archivos generada debe parecerse a la siguiente:
|
||||
|
||||
```
|
||||
.
|
||||
├─ docs
|
||||
│ ├─ .vitepress
|
||||
│ │ └─ config.js
|
||||
│ ├─ api-examples.md
|
||||
│ ├─ markdown-examples.md
|
||||
│ └─ index.md
|
||||
└─ 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.
|
||||
|
||||
::: 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).
|
||||
:::
|
||||
|
||||
### 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:
|
||||
|
||||
```js
|
||||
// .vitepress/config.js
|
||||
export default {
|
||||
// opciones a nivel del sitio
|
||||
title: 'VitePress',
|
||||
description: 'Solo una broma.',
|
||||
|
||||
themeConfig: {
|
||||
// opciones a nivel del tema
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
### Archivos fuente {#source-files}
|
||||
|
||||
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 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).
|
||||
|
||||
## Instalado y Funcionando {#up-and-running}
|
||||
|
||||
La herramienta debe tener también inyectado los siguientes scripts npm en su `package.json` si permitió esto durante el proceso de instalación:
|
||||
|
||||
```json
|
||||
{
|
||||
...
|
||||
"scripts": {
|
||||
"docs:dev": "vitepress dev docs",
|
||||
"docs:build": "vitepress build docs",
|
||||
"docs:preview": "vitepress preview docs"
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
El script `docs:dev` iniciará un servidor de desarrollo local con actualizaciones instantáneas. Ejecutelo con el siguiente comando:
|
||||
|
||||
::: code-group
|
||||
|
||||
```sh [npm]
|
||||
$ npm run docs:dev
|
||||
```
|
||||
|
||||
```sh [pnpm]
|
||||
$ pnpm run docs:dev
|
||||
```
|
||||
|
||||
```sh [yarn]
|
||||
$ yarn docs:dev
|
||||
```
|
||||
|
||||
```sh [bun]
|
||||
$ bun run docs:dev
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
En vez de scripts npm, también puede invocar VitePress directamente con:
|
||||
|
||||
::: code-group
|
||||
|
||||
```sh [npm]
|
||||
$ npx vitepress dev docs
|
||||
```
|
||||
|
||||
```sh [pnpm]
|
||||
$ pnpm vitepress dev docs
|
||||
```
|
||||
|
||||
```sh [yarn]
|
||||
$ yarn vitepress dev docs
|
||||
```
|
||||
|
||||
```sh [bun]
|
||||
$ bun vitepress dev docs
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Más usos de la linea de comandos están documaentados 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!
|
||||
|
||||
## Qué viene después? {#what-s-next}
|
||||
|
||||
- Para entender mejor cómo archivos Markdown son mapeados en HTML, consulte la [Guía de Enrutamiento](./routing).
|
||||
|
||||
- Para descubrir más sobre lo que puede hacer en una página, cómo escribir contenido markdown o usar un componente Vue, consulte la sección "Escribiendo" de la guía. Un optimo lugar para comenzar sería aprendiendo más sobre [Extensiones Markdown](./markdown).
|
||||
|
||||
- Para explorar las funcionalidades proporcionadas por el tema por defecto de la documentación, consulte la [Referencia de Configuración del Tema por Defecto](../reference/default-theme-config).
|
||||
|
||||
- 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).
|
||||
@ -0,0 +1,113 @@
|
||||
# Internacionalización {#internationalization}
|
||||
|
||||
Para usar recursos de i18n integrados, es necesario crear una estructura de directorios de la siguiente forma:
|
||||
|
||||
```
|
||||
docs/
|
||||
├─ es/
|
||||
│ ├─ foo.md
|
||||
├─ fr/
|
||||
│ ├─ foo.md
|
||||
├─ foo.md
|
||||
```
|
||||
|
||||
En seguida, en el archivo `docs/.vitepress/config.ts`:
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
// propiedades compartidas e otras cosas de nivel superior...
|
||||
|
||||
locales: {
|
||||
root: {
|
||||
label: 'English',
|
||||
lang: 'en'
|
||||
},
|
||||
fr: {
|
||||
label: 'French',
|
||||
lang: 'fr', // opcional, será adicionado como atributo `lang` en el tag `html`
|
||||
link: '/fr/guide' // por defecto /fr/ -- aparece en el menu de traducciones de la barra de navegación, puede ser externo
|
||||
|
||||
// otras propiedades específicas de cada idioma...
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Las siguientes propiedades pueden ser substituidas para cada idioma (incluyendo la raiz):
|
||||
|
||||
```ts
|
||||
interface LocaleSpecificConfig<ThemeConfig = any> {
|
||||
lang?: string
|
||||
dir?: string
|
||||
title?: string
|
||||
titleTemplate?: string | boolean
|
||||
description?: string
|
||||
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
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
**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`.
|
||||
|
||||
## Directorio separado para cada localización {#separate-directory-for-each-locale}
|
||||
|
||||
La siguiente estructura es totalmente válida:
|
||||
|
||||
```
|
||||
docs/
|
||||
├─ en/
|
||||
│ ├─ foo.md
|
||||
├─ es/
|
||||
│ ├─ foo.md
|
||||
├─ fr/
|
||||
├─ foo.md
|
||||
```
|
||||
|
||||
Sin embargo, VitePress no redireccionará `/` para `/en/` por defecto. Necesitará configurar su servidor para esto. Por ejemplo, en Netlify, puede adicionar un archivo `docs/public/_redirects` asi:
|
||||
|
||||
```
|
||||
/* /es/:splat 302 Language=es
|
||||
/* /fr/:splat 302 Language=fr
|
||||
/* /en/:splat 302
|
||||
```
|
||||
|
||||
**Consejo profesional:** Si está usando la forma descrita arriba, puede usar el cookie `nf_lang` para persistir la selección de idioma del usuario:
|
||||
|
||||
```ts
|
||||
// docs/.vitepress/theme/index.ts
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import Layout from './Layout.vue'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
Layout
|
||||
}
|
||||
```
|
||||
|
||||
```vue
|
||||
<!-- docs/.vitepress/theme/Layout.vue -->
|
||||
<script setup lang="ts">
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import { useData } from 'vitepress'
|
||||
import { watchEffect } from 'vue'
|
||||
|
||||
const { lang } = useData()
|
||||
watchEffect(() => {
|
||||
if (inBrowser) {
|
||||
document.cookie = `nf_lang=${lang.value}; expires=Mon, 1 Jan 2030 00:00:00 UTC; path=/`
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DefaultTheme.Layout />
|
||||
</template>
|
||||
```
|
||||
|
||||
## Soporte a RTL (Experimental) {#rtl-support-experimental}
|
||||
|
||||
Para soporte a RTL (Right to Left), especifique `dir: 'rtl'` en la configuración y use algún plugin RTLCSS PostCSS como <https://github.com/MohammadYounes/rtlcss>, <https://github.com/vkalinichev/postcss-rtl> o <https://github.com/elchininet/postcss-rtlcss>. Necesitará configurar su plugin PostCSS para usar `:where([dir="ltr"])` y `:where([dir="rtl"])` como prefijos para evitar problemas de especificidad CSS.
|
||||
@ -0,0 +1,930 @@
|
||||
# Extensiones Markdown {#markdown-extensions}
|
||||
|
||||
VitePress viene con Extensiones embutidas.
|
||||
|
||||
## Anchors de Header {#header-anchors}
|
||||
|
||||
Los Header reciben la aplicación automáticamente de links anchor. La presentación de los anchor puede ser configurada usando la opción `markdown.anchor`.
|
||||
|
||||
### Anchor personalizados {#custom-anchors}
|
||||
|
||||
Para especificar un _tag_ anchor personalizado para um header en vex de usar la generada automáticamente, adicione un sufijo al header:
|
||||
|
||||
```
|
||||
# Usando anchors personalizados {#mi-anchor}
|
||||
```
|
||||
|
||||
Esto permite que tenga un link del header como `#mi-anchor` en vez del default `#usando-anchors-personalizados`.
|
||||
|
||||
## Links {#links}
|
||||
|
||||
Ambos links internos y externos reciben tratamiento especial.
|
||||
|
||||
### Links Internos {#internal-links}
|
||||
|
||||
Los links internos son convertidos en links de enrutador para navegación SPA. Además de eso , todo archivo `index.md` contenido en cada subdirectorio será automáticamente convertido en `index.html`, con la URL correspondiente `/`.
|
||||
|
||||
Por ejemplo, dada la siguiente estructura de directorios:
|
||||
|
||||
```
|
||||
.
|
||||
├─ index.md
|
||||
├─ foo
|
||||
│ ├─ index.md
|
||||
│ ├─ one.md
|
||||
│ └─ two.md
|
||||
└─ bar
|
||||
├─ index.md
|
||||
├─ three.md
|
||||
└─ four.md
|
||||
```
|
||||
|
||||
Y suponiendo que está en `foo/one.md`:
|
||||
|
||||
```md
|
||||
[Página Inicial](/) <!-- lleva al usuario al index.md raiz -->
|
||||
[foo](/foo/) <!-- lleva al usuario al index.html del directorio foo -->
|
||||
[foo heading](./#heading) <!-- ancla al usuario a un header del archivo índice foo -->
|
||||
[bar - three](../bar/three) <!-- puede omitir la extensión -->
|
||||
[bar - three](../bar/three.md) <!-- puede adicionar .md -->
|
||||
[bar - four](../bar/four.html) <!-- o puede adicionar .html -->
|
||||
```
|
||||
|
||||
### Sufijo de Página {#page-suffix}
|
||||
|
||||
Páginas y links internos son generados con el sufijo `.html` por defecto.
|
||||
|
||||
### Links Externos {#external-links}
|
||||
|
||||
Links externos reciben automáticamente `target="_blank" rel="noreferrer"`:
|
||||
|
||||
- [vuejs.org](https://vuejs.org)
|
||||
- [VitePress no GitHub](https://github.com/vuejs/vitepress)
|
||||
|
||||
## Frontmatter {#frontmatter}
|
||||
|
||||
[YAML frontmatter](https://jekyllrb.com/docs/front-matter/) es soportado por defecto:
|
||||
|
||||
```yaml
|
||||
---
|
||||
título: Escribiendo como un Hacker
|
||||
idioma: es-CO
|
||||
---
|
||||
```
|
||||
|
||||
Esos datos estarán disponibles para el resto de la página, junto con todos los componentes personalizados y de temas.
|
||||
|
||||
Para más detalles, vea [Frontmatter](../reference/frontmatter-config).
|
||||
|
||||
## Tablas al Estilo GitHub {#github-style-tables}
|
||||
|
||||
**Entrada**
|
||||
|
||||
```md
|
||||
| Tablas | Son | Geniales|
|
||||
| ------------- | :-----------: | ----: |
|
||||
| col 3 está | à direita | $1600 |
|
||||
| col 2 está | centralizada | $12 |
|
||||
| listras | são legais | $1 |
|
||||
```
|
||||
|
||||
**Salida**
|
||||
|
||||
| Tablas | Son | Geniales |
|
||||
| ------------- | :-----------: | -----: |
|
||||
| col 3 está | à direita | \$1600 |
|
||||
| col 2 está | centralizada | \$12 |
|
||||
| listras | são legais | \$1 |
|
||||
|
||||
## Emoji :tada:
|
||||
|
||||
**Entrada**
|
||||
|
||||
```
|
||||
:tada: :100:
|
||||
```
|
||||
|
||||
**Salida**
|
||||
|
||||
:tada: :100:
|
||||
|
||||
Una [lista de todos los emojis](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs) está disponible.
|
||||
|
||||
## Tabla de Contenido (TOC)
|
||||
|
||||
**Entrada**
|
||||
|
||||
```
|
||||
[[toc]]
|
||||
```
|
||||
|
||||
**Salida**
|
||||
|
||||
[[toc]]
|
||||
|
||||
La presentación de TOC (Table of Contents) puede ser configurada usando la opción `markdown.toc`.
|
||||
|
||||
## Contenedores Personalizados {#custom-containers}
|
||||
|
||||
Contenedores personalizados pueden ser definidos por sus tipos, títulos y contenidos.
|
||||
|
||||
### Título por Defecto {#default-title}
|
||||
|
||||
**Entrada**
|
||||
|
||||
```md
|
||||
::: info
|
||||
Este es un bloque de información.
|
||||
:::
|
||||
|
||||
::: tip
|
||||
Este es un aviso.
|
||||
:::
|
||||
|
||||
::: warning
|
||||
Esto es una advertencia.
|
||||
:::
|
||||
|
||||
::: danger
|
||||
Este es un aviso de peligro.
|
||||
:::
|
||||
|
||||
::: details
|
||||
Este es un bloque de detalles.
|
||||
:::
|
||||
```
|
||||
|
||||
**Salida**
|
||||
|
||||
::: info
|
||||
Este es un bloque de información.
|
||||
:::
|
||||
|
||||
::: tip
|
||||
Este es un aviso.
|
||||
:::
|
||||
|
||||
::: warning
|
||||
Esto es una advertencia.
|
||||
:::
|
||||
|
||||
::: danger
|
||||
Este es un aviso de peligro.
|
||||
:::
|
||||
|
||||
::: details
|
||||
Este es un bloque de detalles.
|
||||
:::
|
||||
|
||||
### Título Personalizado {#custom-title}
|
||||
|
||||
Puede definir un título personalizado adicionando el texto inmediatamente después del "tipo" del recipiente.
|
||||
|
||||
**Entrada**
|
||||
|
||||
```md
|
||||
::: danger STOP
|
||||
Zona de peligro, no siga
|
||||
:::
|
||||
|
||||
::: details Click para ver el código
|
||||
```js
|
||||
console.log('Hola, VitePress!')
|
||||
```
|
||||
:::
|
||||
```
|
||||
```
|
||||
|
||||
**Salida**
|
||||
|
||||
::: danger STOP
|
||||
Zona de peligro, no siga
|
||||
:::
|
||||
|
||||
::: details Click para ver el código
|
||||
```js
|
||||
console.log('Hola, VitePress!')
|
||||
```
|
||||
:::
|
||||
|
||||
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:
|
||||
|
||||
```ts
|
||||
// config.ts
|
||||
export default defineConfig({
|
||||
// ...
|
||||
markdown: {
|
||||
container: {
|
||||
tipLabel: '提示',
|
||||
warningLabel: '警告',
|
||||
dangerLabel: '危险',
|
||||
infoLabel: '信息',
|
||||
detailsLabel: '详细信息'
|
||||
}
|
||||
}
|
||||
// ...
|
||||
})
|
||||
```
|
||||
|
||||
### `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.
|
||||
|
||||
**Sintaxis**
|
||||
|
||||
```md
|
||||
::: raw
|
||||
Envuelve en un <div class="vp-raw">
|
||||
:::
|
||||
```
|
||||
|
||||
La clase `vp-raw` también puede ser usada directamente en elementos. El aislamiento de estilo es actualmente opcional:
|
||||
|
||||
- Instale `postcss` con su gestor de paquetes preferido:
|
||||
|
||||
```sh
|
||||
$ npm add -D postcss
|
||||
```
|
||||
|
||||
- Cree un archivo llamado `docs/postcss.config.mjs` y adicione lo siguiente:
|
||||
|
||||
```js
|
||||
import { postcssIsolateStyles } from 'vitepress'
|
||||
|
||||
export default {
|
||||
plugins: [postcssIsolateStyles()]
|
||||
}
|
||||
```
|
||||
|
||||
El utiliza [`postcss-prefix-selector`](https://github.com/postcss/postcss-load-config) internamente. Puede pasar opciones así:
|
||||
|
||||
```js
|
||||
postcssIsolateStyles({
|
||||
includeFiles: [/vp-doc\.css/] // o padrão é /base\.css/
|
||||
})
|
||||
```
|
||||
|
||||
## Alertas en estilo GitHub {#github-flavored-alerts}
|
||||
|
||||
VitePress también soporta [alertas en estilo GitHub](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) para presentar como un bloque de llamada. Ellos serán presentados de la misma forma que [elementos personalizados](#custom-containers).
|
||||
|
||||
```md
|
||||
> [!NOTE]
|
||||
> Destaca informaciones que los usuarios deben tener en consideración, incluso leyendo rapidamente.
|
||||
|
||||
> [!TIP]
|
||||
> Informaciones opcionales para ayudar al usuario a tener más éxito.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Informaciones cruciales necesarias par que los usuarios tengan éxito.
|
||||
|
||||
> [!WARNING]
|
||||
> Contenido critico exigiendo atención inmediata del usuario debido a riesgos potenciales.
|
||||
|
||||
> [!CAUTION]
|
||||
> Potenciales consecuencias negativas de una acción.
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> Destaca informaciones que los usuarios deben tener en consideración, incluso leyendo rapidamente.
|
||||
|
||||
> [!TIP]
|
||||
> Informaciones opcionales para ayudar al usuario a tener más éxito.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Informaciones cruciales necesarias par que los usuarios tengan éxito.
|
||||
|
||||
> [!WARNING]
|
||||
> Contenido critico exigiendo atención inmediata del usuario debido a riesgos potenciales.
|
||||
|
||||
> [!CAUTION]
|
||||
> Potenciales consecuencias negativas de una acción.
|
||||
|
||||
## Destaque de Sintaxis en Bloques de Código {#syntax-highlighting-in-code-blocks}
|
||||
|
||||
VitePress utiliza [Shiki](https://github.com/shikijs/shiki) para destacar la sintaxis del lenguaje en bloques de código Markdown, usando texto coloreado. Shiki soporta una amplia variedad de lenguajes de programación. Todo lo que necesita es adicionar un _alias_ de lenguaje válido después de los backticks iniciales del bloque de código:
|
||||
|
||||
**Entrada**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
name: 'MyComponent',
|
||||
// ...
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
````
|
||||
```html
|
||||
<ul>
|
||||
<li v-for="todo in todos" :key="todo.id">
|
||||
{{ todo.text }}
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
````
|
||||
|
||||
**Salida**
|
||||
|
||||
```js
|
||||
export default {
|
||||
name: 'MyComponent'
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li v-for="todo in todos" :key="todo.id">
|
||||
{{ todo.text }}
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Una [lista de lenguajes válidas](https://shiki.style/languages) está disponible en el repositório 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.
|
||||
|
||||
## Destaque de Linea en Bloques de Código {#line-highlighting-in-code-blocks}
|
||||
|
||||
**Entrada**
|
||||
|
||||
````
|
||||
```js{4}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Destacado!'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**Salida**
|
||||
|
||||
```js{4}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Destacado!'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Además de una única linea, puede también especificar múltiples lineas únicas, intervalos, o ambos:
|
||||
|
||||
- Intervalos de linea: por ejemplo, `{5-8}`, `{3-10}`, `{10-17}`
|
||||
- Múltiples lineas únicas: por ejemplo, `{4,7,9}`
|
||||
- Intervalos de linea y lineas únicas: por ejemplo, `{4,7-13,16,23-27,40}`
|
||||
|
||||
**Entrada**
|
||||
|
||||
````
|
||||
```js{1,4,6-8}
|
||||
export default { // Destacado
|
||||
data () {
|
||||
return {
|
||||
msg: `Destacado!
|
||||
Esta linea no está destacada,
|
||||
pero esta y las próximas están.`,
|
||||
motd: 'VitePress es increible',
|
||||
lorem: 'ipsum'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**Salida**
|
||||
|
||||
```js{1,4,6-8}
|
||||
export default { // Destacado
|
||||
data () {
|
||||
return {
|
||||
msg: `Destacado!
|
||||
Esta linea no está destacada,
|
||||
pero esta y las próximas están.`,
|
||||
motd: 'VitePress es increible',
|
||||
lorem: 'ipsum',
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Alternativamente, es posible destacar directamente en la linea usando el comentario `// [!code highlight]`.
|
||||
|
||||
**Entrada**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Destacado!' // [!!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**Saída**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Destacado!' // [!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Enfoque en Bloques de Código {#focus-in-code-blocks}
|
||||
|
||||
Adicionando el comentario `// [!code focus]` en una linea, esta será destacada y desenfocará las otras partes del código.
|
||||
|
||||
Además, puede definir el número de lineas para enfocar usando `// [!code focus:<lineas>]`.
|
||||
|
||||
**Entrada**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Enfocado!' // [!!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**Salida**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Enfocado!' // [!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Diferencias Coloreadas en Bloques de Código {#colored-diffs-in-code-blocks}
|
||||
|
||||
Adicionar los comentarios `// [!code --]` o `// [!code ++]` en una linea creará una diferencia en esa linea, manteniendo los colores del bloque de código.
|
||||
|
||||
**Entrada**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Borrado' // [!!code --]
|
||||
msg: 'Adicionado' // [!!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**Salida**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Borrado' // [!code --]
|
||||
msg: 'Adicionado' // [!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
**Entrada**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Error', // [!!code error]
|
||||
msg: 'Aviso' // [!!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**Salida**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Error', // [!code error]
|
||||
msg: 'Aviso' // [!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Números de Linea {#line-numbers}
|
||||
|
||||
Puede habilitar números de linea para cada bloque de código a través del archivo de configuración:
|
||||
|
||||
```js
|
||||
export default {
|
||||
markdown: {
|
||||
lineNumbers: true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Consulte las [opciones markdown](../reference/site-config#markdown) para más detalles.
|
||||
|
||||
Puede adicionar la marca `:line-numbers` / `:no-line-numbers` en sus bloques de código para substituir el valor definido en la configuración.
|
||||
|
||||
También puede personalizar el número inicial de linea adicionando `=` después `:line-numbers`. Por ejemplo, `:line-numbers=2` significa que los números de las lineas en los bloques de código comenzarán a partir de `2`.
|
||||
|
||||
**Entrada**
|
||||
|
||||
````md
|
||||
```ts {1}
|
||||
// números de linea desactivados por defecto
|
||||
const line2 = 'Esta es la linea 2'
|
||||
const line3 = 'Esta es la linea 3'
|
||||
```
|
||||
|
||||
```ts:line-numbers {1}
|
||||
// números de linea activados
|
||||
const line2 = 'Esta es la linea 2'
|
||||
const line3 = 'Esta es la linea 3'
|
||||
```
|
||||
|
||||
```ts:line-numbers=2 {1}
|
||||
// números de linea activados y comienzan en 2
|
||||
const line3 = 'Esta es la linea 3'
|
||||
const line4 = 'Esta es la linea 4'
|
||||
```
|
||||
````
|
||||
|
||||
**Salida**
|
||||
|
||||
```ts {1}
|
||||
// números de linea desactivados por defecto
|
||||
const line2 = 'Esta es la linea 2'
|
||||
const line3 = 'Esta es la linea 3'
|
||||
```
|
||||
|
||||
```ts:line-numbers {1}
|
||||
// números de linea activados
|
||||
const line2 = 'Esta es la linea 2'
|
||||
const line3 = 'Esta es la linea 3'
|
||||
```
|
||||
|
||||
```ts:line-numbers=2 {1}
|
||||
// números de linea activados y comienzan en 2
|
||||
const line3 = 'Esta es la linea 3'
|
||||
const line4 = 'Esta es la linea 4'
|
||||
```
|
||||
|
||||
## Importar _Snippets_ de Código {#import-code-snippets}
|
||||
|
||||
Puede importar pedazos de código de archivos existentes usando la siguiente sintaxis:
|
||||
|
||||
```md
|
||||
<<< @/filepath
|
||||
```
|
||||
|
||||
También soporta [destaque de linea](#line-highlighting-in-code-blocks):
|
||||
|
||||
```md
|
||||
<<< @/filepath{highlightLines}
|
||||
```
|
||||
|
||||
**Entrada**
|
||||
|
||||
```md
|
||||
<<< @/snippets/snippet.js{2}
|
||||
```
|
||||
|
||||
**Archivo de Código**
|
||||
|
||||
<<< @/snippets/snippet.js
|
||||
|
||||
**Salida**
|
||||
|
||||
<<< @/snippets/snippet.js{2}
|
||||
|
||||
::: 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:
|
||||
|
||||
```md
|
||||
<<< ../snippets/snippet.js
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
También puede usar una [región VS Code](https://code.visualstudio.com/docs/editor/codebasics#_folding) para incluir apenas la parte correspondiente del archivo de código. Puede proporcionar un nombre de región personalizado después de `#` siguiendo el path del archivo:
|
||||
|
||||
**Entrada**
|
||||
|
||||
```md
|
||||
<<< @/snippets/snippet-with-region.js#snippet{1}
|
||||
```
|
||||
|
||||
**Archivo de Código**
|
||||
|
||||
<<< @/snippets/snippet-with-region.js
|
||||
|
||||
**Salida**
|
||||
|
||||
<<< @/snippets/snippet-with-region.js#snippet{1}
|
||||
|
||||
También puede especificar el idioma dentro de llaves (`{}`), así:
|
||||
|
||||
```md
|
||||
<<< @/snippets/snippet.cs{c#}
|
||||
|
||||
<!-- con destaque de linea: -->
|
||||
|
||||
<<< @/snippets/snippet.cs{1,2,4-6 c#}
|
||||
|
||||
<!-- con números de linea: -->
|
||||
|
||||
<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}
|
||||
```
|
||||
|
||||
Esto es útil si el lenguaje original no puede ser inferida por la extensión de archivo.
|
||||
|
||||
## Grupos de Código {#code-groups}
|
||||
|
||||
Puede agrupar varios bloques de código así:
|
||||
|
||||
**Entrada**
|
||||
|
||||
````md
|
||||
::: code-group
|
||||
|
||||
```js [config.js]
|
||||
/**
|
||||
* @type {import('vitepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
// ...
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
```ts [config.ts]
|
||||
import type { UserConfig } from 'vitepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ...
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
**Salída**
|
||||
|
||||
::: code-group
|
||||
|
||||
```js [config.js]
|
||||
/**
|
||||
* @type {import('vitepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
// ...
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
```ts [config.ts]
|
||||
import type { UserConfig } from 'vitepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ...
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
También puede [importar _snippets_ de código](#import-code-snippets) en grupos de código:
|
||||
|
||||
**Entrada**
|
||||
|
||||
```md
|
||||
::: code-group
|
||||
|
||||
<!-- nombre de archivo usado como título por defecto -->
|
||||
|
||||
<<< @/snippets/snippet.js
|
||||
|
||||
<!-- puede proporcionar uno personalizado también -->
|
||||
|
||||
<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
**Output**
|
||||
|
||||
::: code-group
|
||||
|
||||
<<< @/snippets/snippet.js
|
||||
|
||||
<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]
|
||||
|
||||
:::
|
||||
|
||||
## Inclusión de Archivo Markdown {#markdown-file-inclusion}
|
||||
|
||||
Puede incluir un archivo markdown en otro archvo markdown, incluso anidado.
|
||||
|
||||
::: 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.
|
||||
:::
|
||||
|
||||
Por ejemplo, puede incluir un archivo markdown relativo usando esto:
|
||||
|
||||
**Entrada**
|
||||
|
||||
```md
|
||||
# Documentación
|
||||
|
||||
## Conceptos Básicos
|
||||
|
||||
<!--@include: ./parts/basics.md-->
|
||||
```
|
||||
|
||||
**Archivo de Parte** (`parts/basics.md`)
|
||||
|
||||
```md
|
||||
Algunas cosas básicas.
|
||||
|
||||
### Configuración
|
||||
|
||||
Puede ser creada usando `.foorc.json`.
|
||||
```
|
||||
|
||||
**Código Equivalente**
|
||||
|
||||
```md
|
||||
# Documentación
|
||||
|
||||
## Conceptos básicos
|
||||
|
||||
Algunas cosas básicas
|
||||
|
||||
### Configuración
|
||||
|
||||
Puede ser creada usando `.foorc.json`.
|
||||
```
|
||||
|
||||
También soporta la selección de un intervalo de lineas:
|
||||
|
||||
**Entrada**
|
||||
|
||||
```md
|
||||
# Documentación
|
||||
|
||||
## Conceptos Básicos
|
||||
|
||||
<!--@include: ./parts/basics.md{3,}-->
|
||||
```
|
||||
|
||||
**Archivo de Parte** (`parts/basics.md`)
|
||||
|
||||
```md
|
||||
Algunas cosas básicas.
|
||||
|
||||
### Configuración
|
||||
|
||||
Puede ser creada usando `.foorc.json`.
|
||||
```
|
||||
|
||||
**Código Equivalente**
|
||||
|
||||
```md
|
||||
# Documentación
|
||||
|
||||
## Conceptos Básicos
|
||||
|
||||
### Configuración
|
||||
|
||||
Puede ser creada usando `.foorc.json`.
|
||||
```
|
||||
|
||||
El formato del intervalo de lineas seleccionado puede ser: `{3,}`, `{,10}`, `{1,10}`
|
||||
|
||||
::: 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.:::
|
||||
|
||||
## Ecuaciones Matemáticas {#math-equations}
|
||||
|
||||
Esto es actualmente opcional. Para activarlo, necesita instalar `markdown-it-mathjax3` y definir `markdown.math` como `true` en su archivo de configuración:
|
||||
|
||||
```sh
|
||||
npm add -D markdown-it-mathjax3
|
||||
```
|
||||
|
||||
```ts
|
||||
// .vitepress/config.ts
|
||||
export default {
|
||||
markdown: {
|
||||
math: true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Entrada**
|
||||
|
||||
```md
|
||||
Cuando $a \ne 0$, existen dos soluciones para $(ax^2 + bx + c = 0)$ y ellas son
|
||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
|
||||
**Ecuaciones de Maxwell:**
|
||||
|
||||
| ecuación | descripción |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
|
||||
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | la divergencia de $\vec{\mathbf{B}}$ es cero |
|
||||
| $\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{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _hã?_ |
|
||||
|
||||
**Salída**
|
||||
|
||||
Cuando $a \ne 0$, existen dos soluciones para $(ax^2 + bx + c = 0)$ y ellas son
|
||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
|
||||
**Ecuaciones de Maxwell:**
|
||||
|
||||
| ecuación | descripción |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
|
||||
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | la divergencia de $\vec{\mathbf{B}}$ es cero |
|
||||
| $\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{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _hã?_ |
|
||||
|
||||
## _Lazy Loading_ de Imagenes {#image-lazy-loading}
|
||||
|
||||
Puede activar la "carga perezosa" para cada imagen adicionada via markdown definiendo `lazyLoading` como `true` en su archivo de configuración:
|
||||
|
||||
```js
|
||||
export default {
|
||||
markdown: {
|
||||
image: {
|
||||
// la carga perezosa de imagenes está desactivada por defecto
|
||||
lazyLoading: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Configuración Avanzada {#advanced-configuration}
|
||||
|
||||
VitePress usa [markdown-it](https://github.com/markdown-it/markdown-it) como interprete Markdown. Muchas de las extensiones arriba son implementadas por medio de _plugins_ personalizados. Puede personalizar más la instancia `markdown-it` usando la opción `markdown` en `.vitepress/config.js`:
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'vitepress'
|
||||
import markdownItAnchor from 'markdown-it-anchor'
|
||||
import markdownItFoo from 'markdown-it-foo'
|
||||
|
||||
export default defineConfig({
|
||||
markdown: {
|
||||
// opciones para markdown-it-anchor
|
||||
// https://github.com/valeriangalliat/markdown-it-anchor#usage
|
||||
anchor: {
|
||||
permalink: markdownItAnchor.permalink.headerLink()
|
||||
},
|
||||
|
||||
// opciones para @mdit-vue/plugin-toc
|
||||
// https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
|
||||
toc: { level: [1, 2] },
|
||||
|
||||
config: (md) => {
|
||||
// use más plugins markdown-it!
|
||||
md.use(markdownItFoo)
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Consulte la lista completa de propiedades configurables en [Referencia de Configuración: Configuración de la Aplicación](../reference/site-config#markdown).
|
||||
@ -0,0 +1,23 @@
|
||||
# Modo MPA <Badge type="warning" text="experimental" /> {#mpa-mode}
|
||||
|
||||
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.
|
||||
|
||||
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>`:
|
||||
|
||||
```html
|
||||
<script client>
|
||||
document.querySelector('h1').addEventListener('click', () => {
|
||||
console.log('JavaScript en el lado del cliente!')
|
||||
})
|
||||
</script>
|
||||
|
||||
# Hola
|
||||
```
|
||||
|
||||
`<script client>` es una funcionalidad exclusiva VitePress, no una funcionalidad Vue. Funciona tanto en archivos `.md` como en archivos `.vue`, pero solo en el modo MPA. Scripts de cliente en todos los componentes del tema serán empaquetados juntos, mientras el script del cliente para una página específica será dividido solo para esa página.
|
||||
|
||||
Note que `<script client>` **no es calificado como código de componente Vue**: es procesado como un simple módulo JavaScript. Por esta razón, el modo MPA debe ser usado apenas si su sitio exige el mínimo absoluto de interactividad del lado del cliente.
|
||||
@ -0,0 +1,372 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Enrutamiento {#routing}
|
||||
|
||||
## Enrutamiento basasdo 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:
|
||||
|
||||
```
|
||||
.
|
||||
├─ guide
|
||||
│ ├─ getting-started.md
|
||||
│ └─ index.md
|
||||
├─ index.md
|
||||
└─ prologue.md
|
||||
```
|
||||
|
||||
Las páginas HTML generadas serán:
|
||||
|
||||
```
|
||||
index.md --> /index.html (accesible por /)
|
||||
prologue.md --> /prologue.html
|
||||
guide/index.md --> /guide/index.html (accesible por /guide/)
|
||||
guide/getting-started.md --> /guide/getting-started.html
|
||||
```
|
||||
|
||||
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}
|
||||
|
||||
Existen dos conceptos importantes en la estructura de archivos de un proyecto VitePress: el **directorio raiz** y el **directorio fuente**.
|
||||
|
||||
### Directorio Raiz {#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.
|
||||
|
||||
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`:
|
||||
|
||||
```
|
||||
.
|
||||
├─ docs # directorio raiz
|
||||
│ ├─ .vitepress # directorio de configuración
|
||||
│ ├─ getting-started.md
|
||||
│ └─ index.md
|
||||
└─ ...
|
||||
```
|
||||
|
||||
```sh
|
||||
vitepress dev docs
|
||||
```
|
||||
|
||||
Esto resultará en el siguiente mapeamento de fuente para HTML:
|
||||
|
||||
```
|
||||
docs/index.md --> /index.html (accesible como /)
|
||||
docs/getting-started.md --> /getting-started.html
|
||||
```
|
||||
|
||||
### Directorio Fuente {#source-directory}
|
||||
|
||||
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).
|
||||
|
||||
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í:
|
||||
|
||||
```
|
||||
. # directorio raiz
|
||||
├─ .vitepress # directorio de configuración
|
||||
└─ src # directorio fuente
|
||||
├─ getting-started.md
|
||||
└─ index.md
|
||||
```
|
||||
|
||||
El mapeamente resultante de la fuente para HTML:
|
||||
|
||||
```
|
||||
src/index.md --> /index.html (accesible como /)
|
||||
src/getting-started.md --> /getting-started.html
|
||||
```
|
||||
|
||||
## Links Entre Páginas {#linking-between-pages}
|
||||
|
||||
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.
|
||||
|
||||
```md
|
||||
<!-- Hacer -->
|
||||
[Getting Started](./getting-started)
|
||||
[Getting Started](../guide/getting-started)
|
||||
|
||||
<!-- No hacer -->
|
||||
[Getting Started](./getting-started.md)
|
||||
[Getting Started](./getting-started.html)
|
||||
```
|
||||
|
||||
Averigue más sobre la vinculación de assets, como imagenes, en [Manipulación de Assets](./asset-handling).
|
||||
|
||||
### Vinculación de Páginas No VitePress {#linking-to-non-vitepress-pages}
|
||||
|
||||
Si desea vincular a una página en su sitio que no es generada por VitePress, será necesario usar la URL completa (abre en una nueva pestaña) o especificar explícitamente el destino:
|
||||
|
||||
**Entrada**
|
||||
|
||||
```md
|
||||
[Link para pure.html](/pure.html){target="_self"}
|
||||
```
|
||||
|
||||
**Salida**
|
||||
|
||||
[Link para pure.html](/pure.html){target="_self"}
|
||||
|
||||
::: tip Nota
|
||||
|
||||
En los links Markdown, la `base` es automáticamente adicionada a la URL. Esto significa que, si desea vincular a una página fuera de su base, será necesario algo como `../../pure.html` en el link (resuelto en relación a la página actual por el navegador).
|
||||
|
||||
Alternativamente, puede usarse directamente la sintaxis de tag anchor:
|
||||
|
||||
```md
|
||||
<a href="/pure.html" target="_self">Link para pure.html</a>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Generación de URL Limpia {#generating-clean-url}
|
||||
|
||||
::: warning Soporte del Servidor Necesario
|
||||
Para servir URLs limpias con VitePress, es necesario soporte en el lado del servidor.
|
||||
:::
|
||||
|
||||
Por defecto, VitePress resuelve links de entrada para URLs que terminan con `.html`. Sin embargo, algunos usuarios pueden preferir "URLs limpias" sin la extensión `.html`, por ejemplo, `example.com/path` en vez de `example.com/path.html`.
|
||||
|
||||
Algunos servidores o plataformas de hospedaje (por ejemplo, Netlify, Vercel, GitHub Pages) proporcionan la habilidad de mapear una URL como `/foo` para `/foo.html` si existir, sin redireccionamiento:
|
||||
|
||||
- Netlify y GitHub Pages soportan esto por defecto.
|
||||
- Vercel requiere activación de la opción [`cleanUrls` en `vercel.json`](https://vercel.com/docs/concepts/projects/project-configuration#cleanurls).
|
||||
|
||||
Si esa funcionalidad está disponible para usted, también se puede activar la propia opción de configuración [`cleanUrls`](../reference/site-config#cleanurls) de VitePress para que:
|
||||
|
||||
- Links de entrada entre páginas sean generados sin la extensión `.html`.
|
||||
- Si el path actual termina con `.html`, el enrutador realizará un redireccionamiento en el lado del cliente para el path sin extensión.
|
||||
|
||||
Sin embargo, si no puede configurar el servidor con ese soporte, será necesario recorrer manualmente la siguiente estructura de directorio:
|
||||
|
||||
```
|
||||
.
|
||||
├─ getting-started
|
||||
│ └─ index.md
|
||||
├─ installation
|
||||
│ └─ index.md
|
||||
└─ index.md
|
||||
```
|
||||
# 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:
|
||||
|
||||
```
|
||||
.
|
||||
├─ packages
|
||||
│ ├─ pkg-a
|
||||
│ │ └─ src
|
||||
│ │ ├─ pkg-a-code.ts
|
||||
│ │ └─ pkg-a-docs.md
|
||||
│ └─ pkg-b
|
||||
│ └─ src
|
||||
│ ├─ pkg-b-code.ts
|
||||
│ └─ pkg-b-docs.md
|
||||
```
|
||||
|
||||
Y desea que las páginas VitePress sean generadas así:
|
||||
|
||||
```
|
||||
packages/pkg-a/src/pkg-a-docs.md --> /pkg-a/index.html
|
||||
packages/pkg-b/src/pkg-b-docs.md --> /pkg-b/index.html
|
||||
```
|
||||
|
||||
Puede realizar esto configurando la opción [`rewrites`](../reference/site-config#rewrites) así:
|
||||
|
||||
```ts
|
||||
// .vitepress/config.js
|
||||
export default {
|
||||
rewrites: {
|
||||
'packages/pkg-a/src/pkg-a-docs.md': 'pkg-a/index.md',
|
||||
'packages/pkg-b/src/pkg-b-docs.md': 'pkg-b/index.md'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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í:
|
||||
|
||||
```ts
|
||||
export default {
|
||||
rewrites: {
|
||||
'packages/:pkg/src/(.*)': ':pkg/index.md'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Los paths reesctritos son compilados usando el paquete `path-to-regexp` - consulte [su documentación](https://github.com/pillarjs/path-to-regexp#parameters) para una sintaxis más avanzada.
|
||||
|
||||
::: warning Links Relativos con Reescrituras
|
||||
|
||||
Cuando las reescrituras están habilitadas, **links relativos deben ser basados en los paths reescritos**. Por ejemplo, para crear un link relativo de `packages/pkg-a/src/pkg-a-code.md` para `packages/pkg-b/src/pkg-b-code.md`, debe usarse:
|
||||
|
||||
```md
|
||||
[Link para PKG B](../pkg-b/pkg-b-code)
|
||||
```
|
||||
:::
|
||||
|
||||
## 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.
|
||||
|
||||
### Archivo de Carga de Paths {#paths-loader-file}
|
||||
|
||||
Como VitePress es un generador de sitios estáticos, los paths posibles de las páginas deben ser determinados en el momento de la compilación. Por lo tanto, una página de ruta dinámica **debe** estar acompañada por un **archivo de carga de paths**. Para `packages/[pkg].md`, necesitaremos de `packages/[pkg].paths.js` (`.ts` también es soportado):
|
||||
|
||||
```
|
||||
.
|
||||
└─ packages
|
||||
├─ [pkg].md # modelo de ruta
|
||||
└─ [pkg].paths.js # cargador de paths de la ruta
|
||||
```
|
||||
|
||||
El cargador de paths debe proporcionar un objeto con un método `paths` como su exportación por defecto. El método `paths` debe retornar un _array_ de objetos con una propiedad `params`. Cada uno de esos objetos generará una página correspondiente.
|
||||
|
||||
Dado el siguiente _array_ `paths`:
|
||||
|
||||
```js
|
||||
// packages/[pkg].paths.js
|
||||
export default {
|
||||
paths() {
|
||||
return [
|
||||
{ params: { pkg: 'foo' }},
|
||||
{ params: { pkg: 'bar' }}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Las páginas HTML generadas serán:
|
||||
|
||||
```
|
||||
.
|
||||
└─ packages
|
||||
├─ foo.html
|
||||
└─ bar.html
|
||||
```
|
||||
|
||||
### Múltiples Parámetros {#multiple-params}
|
||||
|
||||
Una ruta dinámica puede contener múltiples parámetros:
|
||||
|
||||
**Estrutura de Archivo**
|
||||
|
||||
```
|
||||
.
|
||||
└─ packages
|
||||
├─ [pkg]-[version].md
|
||||
└─ [pkg]-[version].paths.js
|
||||
```
|
||||
|
||||
**Cargador de Paths**
|
||||
|
||||
```js
|
||||
export default {
|
||||
paths: () => [
|
||||
{ params: { pkg: 'foo', version: '1.0.0' }},
|
||||
{ params: { pkg: 'foo', version: '2.0.0' }},
|
||||
{ params: { pkg: 'bar', version: '1.0.0' }},
|
||||
{ params: { pkg: 'bar', version: '2.0.0' }}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Salida**
|
||||
|
||||
```
|
||||
.
|
||||
└─ packages
|
||||
├─ foo-1.0.0.html
|
||||
├─ foo-2.0.0.html
|
||||
├─ bar-1.0.0.html
|
||||
└─ bar-2.0.0.html
|
||||
```
|
||||
|
||||
### Generando Paths Dinámicamente {#dynamically-generating-paths}
|
||||
|
||||
El módulo de carga de paths es ejecutado en Node.js y apenas durante el momento de la compilación. Puede generar dinámicamente el _array_ de paths usando cualquier dato, sea local o remoto.
|
||||
|
||||
Generando paths a partir de archivos locales:
|
||||
|
||||
```js
|
||||
import fs from 'fs'
|
||||
|
||||
export default {
|
||||
paths() {
|
||||
return fs
|
||||
.readdirSync('packages')
|
||||
.map((pkg) => {
|
||||
return { params: { pkg }}
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Generando paths a partir de datos remotos:
|
||||
|
||||
```js
|
||||
export default {
|
||||
async paths() {
|
||||
const pkgs = await (await fetch('https://my-api.com/packages')).json()
|
||||
|
||||
return pkgs.map((pkg) => {
|
||||
return {
|
||||
params: {
|
||||
pkg: pkg.name,
|
||||
version: pkg.version
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Accediendo Parámetros en la Página {#accessing-params-in-page}
|
||||
|
||||
Puede usar los parámetros para pasar datos adicionales para cada página. El archivo de ruta Markdown puede acceder a los parámetros de la página actual en expresiones Vue a través de la propiedad global `$params`:
|
||||
|
||||
```md
|
||||
- nombre del paquete: {{ $params.pkg }}
|
||||
- versión: {{ $params.version }}
|
||||
```
|
||||
|
||||
También puede acceder los parámetros de la página actual a través del API de tiempo de ejecución [`useData`](../reference/runtime-api#usedata). Esto está disponible tanto en archivos Markdown así como en componentes Vue:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
|
||||
// params es una ref Vue
|
||||
const { params } = useData()
|
||||
|
||||
console.log(params.value)
|
||||
</script>
|
||||
```
|
||||
|
||||
### Presentando Contenido Crudo {#rendering-raw-content}
|
||||
|
||||
Parámetros pasados para una página serán serializados en la carga JavaScript del cliente, por lo tanto, evite pasar datos pesados en los parámetros, como Markdown crudo o contenido HTML obtenido de un CSS remoto.
|
||||
|
||||
En lugar de eso, puede pasar tal contenido para cada página usando la propiedad `content` en cada objeto de path:
|
||||
|
||||
```js
|
||||
export default {
|
||||
async paths() {
|
||||
const posts = await (await fetch('https://my-cms.com/blog-posts')).json()
|
||||
|
||||
return posts.map((post) => {
|
||||
return {
|
||||
params: { id: post.id },
|
||||
content: post.content // Markdown o HTML crudo
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
En seguida, use la siguiente sintaxis especial para presentar el contenido como parte del propio archivo Markdown:
|
||||
|
||||
```md
|
||||
<!-- @content -->
|
||||
```
|
||||
@ -0,0 +1,53 @@
|
||||
# Generación de Sitemap {#sitemap-generation}
|
||||
|
||||
VitePress viene con soporte embutido para generar un archivo `sitemap.xml` para su sitio. Para habilitar, adicione lo siguiente a su `.vitepress/config.js`:
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
sitemap: {
|
||||
hostname: 'https://example.com'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Para tener tags `<lastmod>` en su `sitemap.xml`, puede habilitar la opción [`lastUpdated`](../reference/default-theme-last-updated).
|
||||
|
||||
## Opciones {#options}
|
||||
|
||||
El soporte de Sitemap es alimentado por el módulo [`sitemap`](https://www.npmjs.com/package/sitemap). Puede pasar cualquiera de las opciones soportadas por el en la opción `sitemap` de su archivo de configuración. Estos serán pasados directamente al constructor `SitemapStream`. Consulte la [documentación `sitemap`](https://www.npmjs.com/package/sitemap#options-you-can-pass) para más detalles. Ejemplo:
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
sitemap: {
|
||||
hostname: 'https://example.com',
|
||||
lastmodDateOnly: false
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Hook `transformItems`
|
||||
|
||||
Puede usar el hook `sitemap.transformItems` para modificar los items del sitemap antes de ser escritos en el archivo `sitemap.xml`. Este hook es llamado como un _array_ de items sitemap y espera un _array_ de items sitemap como retorno. Ejemplo:
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
sitemap: {
|
||||
hostname: 'https://example.com',
|
||||
transformItems: (items) => {
|
||||
// adiciona nuevos items o modifica/filtra items existentes
|
||||
items.push({
|
||||
url: '/extra-page',
|
||||
changefreq: 'monthly',
|
||||
priority: 0.8
|
||||
})
|
||||
return items
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
@ -0,0 +1,137 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Compatibilidad SSR {#ssr-compatibility}
|
||||
|
||||
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.
|
||||
|
||||
## `<ClientOnly>`
|
||||
|
||||
Se está usando o demostrando componentes que no son compatibles con SSR (por ejemplo, contienen directivas personalizadas), puede envolverlos en el componente embutido `<ClientOnly>`:
|
||||
|
||||
```md
|
||||
<ClientOnly>
|
||||
<ComponenteNoCompatibleConSSR />
|
||||
</ClientOnly>
|
||||
```
|
||||
|
||||
## Bibliotecas que Acceden el API del Navegador en la Importación {#libraries-that-access-browser-api-on-import}
|
||||
|
||||
Algunos componentes o bibliotecas acceden APIs del navegador **en la Importación**. Para usar código que asume un ambiente de navegador en la importación, necesita importarlo dinámicamente.
|
||||
|
||||
### Importando en el Hook `mounted` {#importing-in-mounted-hook}
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
onMounted(() => {
|
||||
import('./lib-que-accede-window-en-la-importacion').then((module) => {
|
||||
// usar código
|
||||
})
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
### Importación Condicional {#conditional-import}
|
||||
|
||||
Puede también importar condicionalmente usando el flag `import.meta.env.SSR` (parte de las [variables de entorno Vite](https://vitejs.dev/guide/env-and-mode.html#env-variables)):
|
||||
|
||||
```js
|
||||
if (!import.meta.env.SSR) {
|
||||
import('./lib-que-accede-window-en-la-importacion').then((module) => {
|
||||
// usar código
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
Como [`Theme.enhanceApp`](./custom-theme#theme-interface) puede ser asíncrono, puede importar condicionalmente y registrar plugins Vue que acceden APIs del navegador en la importación:
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
/** @type {import('vitepress').Theme} */
|
||||
export default {
|
||||
// ...
|
||||
async enhanceApp({ app }) {
|
||||
if (!import.meta.env.SSR) {
|
||||
const plugin = await import('plugin-que-accede-window-en-la-importacion')
|
||||
app.use(plugin.default)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Si está usando TypeScript:
|
||||
```ts
|
||||
// .vitepress/theme/index.ts
|
||||
import type { Theme } from 'vitepress'
|
||||
|
||||
export default {
|
||||
// ...
|
||||
async enhanceApp({ app }) {
|
||||
if (!import.meta.env.SSR) {
|
||||
const plugin = await import('plugin-que-accede-window-en-la-importacion')
|
||||
app.use(plugin.default)
|
||||
}
|
||||
}
|
||||
} satisfies Theme
|
||||
```
|
||||
|
||||
### `defineClientComponent`
|
||||
|
||||
VitePress proporciona un auxiliar de conveniencia para importar componentes Vue que acceden APIs del navegador en la importación.
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { defineClientComponent } from 'vitepress'
|
||||
|
||||
const ClientComp = defineClientComponent(() => {
|
||||
return import('componente-que-accede-window-en-la-importacion')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientComp />
|
||||
</template>
|
||||
```
|
||||
|
||||
Puede también pasar propiedades/hijos/_slots_ para el componente objetivo:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { defineClientComponent } from 'vitepress'
|
||||
|
||||
const clientCompRef = ref(null)
|
||||
const ClientComp = defineClientComponent(
|
||||
() => import('componente-que-acessa-window-na-importacao'),
|
||||
|
||||
// los argumentos son pasados para h() - https://vuejs.org/api/render-function.html#h
|
||||
[
|
||||
{
|
||||
ref: clientCompRef
|
||||
},
|
||||
{
|
||||
default: () => 'slot por defecto',
|
||||
foo: () => h('div', 'foo'),
|
||||
bar: () => [h('span', 'uno'), h('span', 'dos')]
|
||||
}
|
||||
],
|
||||
|
||||
// callback después de que el componente es cargado, puede ser asíncrono
|
||||
|
||||
() => {
|
||||
console.log(clientCompRef.value)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientComp />
|
||||
</template>
|
||||
```
|
||||
|
||||
El componente objetivo solo será importado en el hook `mounted` del componente que lo envuelve.
|
||||
@ -0,0 +1,256 @@
|
||||
# Usando Vue en Markdown {#using-vue-in-markdown}
|
||||
|
||||
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>`.
|
||||
|
||||
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.
|
||||
|
||||
::: tip Compatibilidad SSR
|
||||
Todo uso de Vue necesita ser compatible con SSR. Consulte [Compatibilidad SSR](./ssr-compat) para detalles y soluciones comunes.
|
||||
:::
|
||||
|
||||
## Creación de _Templates_ {#templating}
|
||||
|
||||
### Interpolación {#interpolation}
|
||||
|
||||
Cada archivo Markdown es primero compilado para HTML y después pasado como un componente Vue para la canalización de procesos Vite. Esto significa que puede usar interpolación en el estilo Vue en el texto:
|
||||
|
||||
**Entrada**
|
||||
|
||||
```md
|
||||
{{ 1 + 1 }}
|
||||
```
|
||||
|
||||
**Salida**
|
||||
|
||||
<div class="language-text"><pre><code>{{ 1 + 1 }}</code></pre></div>
|
||||
|
||||
### Directivas {#directives}
|
||||
|
||||
Las Directivas también funcionan (observe que, por definición, HTML crudo también es válido en Markdown):
|
||||
|
||||
**Entrada**
|
||||
|
||||
```html
|
||||
<span v-for="i in 3">{{ i }}</span>
|
||||
```
|
||||
|
||||
**Salida**
|
||||
|
||||
<div class="language-text"><pre><code><span v-for="i in 3">{{ i }} </span></code></pre></div>
|
||||
|
||||
## `<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:
|
||||
|
||||
```html
|
||||
---
|
||||
hello: world
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
## Contenido Markdown
|
||||
|
||||
El conteo es: {{ count }}
|
||||
|
||||
<button :class="$style.button" @click="count++">Incrementar</button>
|
||||
|
||||
<style module>
|
||||
.button {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
::: 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.
|
||||
:::
|
||||
|
||||
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:
|
||||
|
||||
**Entrada**
|
||||
|
||||
```html
|
||||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
|
||||
const { page } = useData()
|
||||
</script>
|
||||
|
||||
<pre>{{ page }}</pre>
|
||||
```
|
||||
|
||||
**Salida**
|
||||
|
||||
```json
|
||||
{
|
||||
"path": "/usando-vue.html",
|
||||
"title": "Usando Vue en Markdown",
|
||||
"frontmatter": {},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
## Usando Componentes {#using-components}
|
||||
|
||||
Puede importar y usar componentes Vue directamente en los archivos 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.
|
||||
|
||||
```md
|
||||
<script setup>
|
||||
import CustomComponent from '../components/CustomComponent.vue'
|
||||
</script>
|
||||
|
||||
# Documentación
|
||||
|
||||
Este es un archivo .md usando un componente personalizado
|
||||
|
||||
<CustomComponent />
|
||||
|
||||
## Más documentación
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
### Registrando Componentes Globalmente {#registering-components-globally}
|
||||
|
||||
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
|
||||
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.
|
||||
:::
|
||||
|
||||
### Usando Componentes En Headers <ComponenteEnHeader /> {#using-components-in-headers}
|
||||
|
||||
Puede usar componentes Vue en los headers, pero observe la diferencia entre las siguientes sintaxis:
|
||||
|
||||
| Markdown | HTML de Salida | Header Procesado |
|
||||
| ------------------------------------------------------- | ----------------------------------------- | ------------- |
|
||||
| <pre v-pre><code> # texto <Tag/> </code></pre> | `<h1>texto <Tag/></h1>` | `texto` |
|
||||
| <pre v-pre><code> # texto \`<Tag/>\` </code></pre> | `<h1>texto <code><Tag/></code></h1>` | `texto <Tag/>` |
|
||||
|
||||
El HTML envuelto por `<code>` será mostrado como es, solamente el HTML que **no** estuviera envuelto será analizado por Vue.
|
||||
|
||||
::: tip
|
||||
EL HTML de salida es realizado por [Markdown-it](https://github.com/Markdown-it/Markdown-it), en cuanto los headers procesados son manipulados por VitePress (y usados tanto en la barra lateral como dentro del título del video).
|
||||
:::
|
||||
|
||||
## Escapes {#escaping}
|
||||
|
||||
Puede escapar de interpolaciones Vue envolvientdolas en un `<span>` u otros elementos con la directiva `v-pre`:
|
||||
|
||||
**Entrada**
|
||||
|
||||
```md
|
||||
Esto <span v-pre>{{ será exibido como es }}</span>
|
||||
```
|
||||
|
||||
**Salida**
|
||||
|
||||
<div class="escape-demo">
|
||||
<p>Esto <span v-pre>{{ será exibido como es }}</span></p>
|
||||
</div>
|
||||
|
||||
Alternativamente, puede envolver todo el paragrafo en un contenedor personalizadon `v-pre`:
|
||||
|
||||
```md
|
||||
::: v-pre
|
||||
{{ Esto será exibido como es }}
|
||||
:::
|
||||
```
|
||||
|
||||
**Output**
|
||||
|
||||
<div class="escape-demo">
|
||||
|
||||
::: v-pre
|
||||
{{ Esto será exibido como es }}
|
||||
:::
|
||||
|
||||
</div>
|
||||
|
||||
## "Desescape" 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`:
|
||||
|
||||
**Entrada**
|
||||
|
||||
````md
|
||||
```js-vue
|
||||
Hola {{ 1 + 1 }}
|
||||
```
|
||||
````
|
||||
|
||||
**Salida**
|
||||
|
||||
```js-vue
|
||||
Hola {{ 1 + 1 }}
|
||||
```
|
||||
|
||||
|
||||
Observe que esto puede impedir que ciertos tokens sean realzados correctamente.
|
||||
|
||||
## Usando Preprocesadores CSS {#using-css-pre-processors}
|
||||
|
||||
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:
|
||||
|
||||
```
|
||||
# .scss e .sass
|
||||
npm install -D sass
|
||||
|
||||
# .less
|
||||
npm install -D less
|
||||
|
||||
# .styl e .stylus
|
||||
npm install -D stylus
|
||||
```
|
||||
|
||||
Entonces puede usar lo siguiente en Markdown y en los componentes del tema:
|
||||
|
||||
```vue
|
||||
<style lang="sass">
|
||||
.title
|
||||
font-size: 20px
|
||||
</style>
|
||||
```
|
||||
|
||||
## Usando _Teleports_ {#using-teleports}
|
||||
|
||||
Vitepress actualmente ofrece soporte a SSG para _teleports_ apenas para el cuerpo. Para otros objetivos, puede envolverlos dentro del componente embutido `<ClientOnly>` o inyectar la marcación de _teleport_ en la localización correcta en su página final HTML por medio del [hook `postRender`](../reference/site-config#postrender).
|
||||
|
||||
<ModalDemo />
|
||||
|
||||
::: details
|
||||
<<< @/components/ModalDemo.vue
|
||||
:::
|
||||
|
||||
```md
|
||||
<ClientOnly>
|
||||
<Teleport to="#modal">
|
||||
<div>
|
||||
// ...
|
||||
</div>
|
||||
</Teleport>
|
||||
</ClientOnly>
|
||||
```
|
||||
|
||||
<script setup>
|
||||
import ModalDemo from '../../components/ModalDemo.vue'
|
||||
import ComponentInHeader from '../../components/ComponentInHeader.vue'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.escape-demo {
|
||||
border: 1px solid var(--vp-c-border);
|
||||
border-radius: 8px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,56 @@
|
||||
# Qué es VitePress? {#what-is-vitepress}
|
||||
|
||||
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.
|
||||
|
||||
<div class="tip custom-block" style="padding-top: 8px">
|
||||
Quiere apenas experimentar? Valla al [Início Rápido](./getting-started).
|
||||
|
||||
</div>
|
||||
|
||||
## Casos de Uso {#use-cases}
|
||||
|
||||
- **Documentación**
|
||||
|
||||
VitePress viene con un tema por defecto proyectado para documentación técnica. El alimenta esta página que está leyendo ahora, juntamente con la documentación [Vite](https://vitejs.dev/), [Rollup](https://rollupjs.org/), [Pinia](https://pinia.vuejs.org/), [VueUse](https://vueuse.org/), [Vitest](https://vitest.dev/), [D3](https://d3js.org/), [UnoCSS](https://unocss.dev/), [Iconify](https://iconify.design/) e [muchos otros](https://www.vuetelescope.com/explore?framework.slug=vitepress).
|
||||
|
||||
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**
|
||||
|
||||
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.
|
||||
|
||||
El [blog oficial Vue.js](https://blog.vuejs.org/) es un blog simple que genera su página inicial basada en contenido local.
|
||||
|
||||
## Experiencia de Desarrollador {#developer-experience}
|
||||
|
||||
VitePress visa proporcionar excelente Experiencia de Desarrollador (DX) al trabajar con contenido en Markdown.
|
||||
|
||||
- **[Alimentado por Vite:](https://vitejs.dev/)** inicialización instantánea del servidor, con ediciones siempre reflejadas instantáneamente (<100ms) sin recarga de pá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.
|
||||
|
||||
- **[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.
|
||||
|
||||
## Desempeño {#performance}
|
||||
|
||||
Al contrario de muchos SSGs tradicionales, un sitio generado por VitePress es la verdad una [Single Page Application](https://en.wikipedia.org/wiki/Single-page_application) (SPA).
|
||||
|
||||
- **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.
|
||||
|
||||
- **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.
|
||||
|
||||
- **Interactividad Sin Penalidades**
|
||||
|
||||
Para ser capaz de hidratar las partes dinámicas Vue incorporadas dentro del Markdown estático, cada página Markdown es procesada como un componente Vue y compilada en JavaScript. Esto puede parecer ineficiente, pero el compilador Vue es suficientemente inteligente para separar las partes estáticas y dinámicas, minimizando tanto el costo de hidratación así como el tamaño de carga. Para la carga inicial de la página, las partes estáticas son automáticamente eliminadas de la carga JavaScript y omitidas durante la hidratación.
|
||||
|
||||
## 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.
|
||||
|
||||
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.
|
||||
|
||||
También hubo esfuerzo invertido en VuePress 2, que también soporta Vue 3 y Vite con mejor compatibilidad que con VuePress 1. Sin embargo, mantener dos SSGs en paralelo no es sustentable, entonces el equipo Vue decidió enfocarse en VitePress como el principal SSG recomendado a largo plazo.
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
layout: home
|
||||
|
||||
title: VitePress
|
||||
titleTemplate: Generador de Sitios Estáticos desarrollado con Vite y Vue
|
||||
|
||||
hero:
|
||||
name: VitePress
|
||||
text: Generador de Sitios Estáticos Vite y Vue
|
||||
tagline: Markdown para obtener lindos documentos en minutos
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Qué es VitePress?
|
||||
link: /es/guide/what-is-vitepress
|
||||
- theme: alt
|
||||
text: Iniciar
|
||||
link: /es/guide/getting-started
|
||||
- theme: alt
|
||||
text: GitHub
|
||||
link: https://github.com/vuejs/vitepress
|
||||
image:
|
||||
src: /vitepress-logo-large.webp
|
||||
alt: VitePress
|
||||
|
||||
features:
|
||||
- icon: 📝
|
||||
title: Concéntrese en su contenido
|
||||
details: Cree lindos sitios de documentación apenas con markdown.
|
||||
- icon: <svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 256 256.32"><defs><linearGradient id="a" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"/><stop offset="100%" stop-color="#BD34FE"/></linearGradient><linearGradient id="b" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"/><stop offset="8.333%" stop-color="#FFDD35"/><stop offset="100%" stop-color="#FFA800"/></linearGradient></defs><path fill="url(#a)" d="M255.153 37.938 134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"/><path fill="url(#b)" d="M185.432.063 96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"/></svg>
|
||||
title: Disfruta de la experiencia Vite
|
||||
details: Inicio instantaneo de servidor, actualizaciones ultrarrápidas, y plugins del ecosistema Vite.
|
||||
- icon: <svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 256 220.8"><path fill="#41B883" d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z"/><path fill="#41B883" d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z"/><path fill="#35495E" d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z"/></svg>
|
||||
title: Personaliza con Vue
|
||||
details: Usa la sintaxis y componentes Vue directamente en markdown, o construye temas personalizados con Vue.
|
||||
- icon: 🚀
|
||||
title: Entrega rápida de sitios
|
||||
details: Carga inicial rápida con HTML estático, navegación rápida con enrutamiento del lado del cliente.
|
||||
---
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
|
||||
|
||||
--vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
|
||||
--vp-home-hero-image-filter: blur(44px);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(56px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(68px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,74 @@
|
||||
# Intefaz de Linea de Comando {#command-line-interface}
|
||||
|
||||
## `vitepress dev`
|
||||
|
||||
Inicia el servidor de desarrollo VitePress con el directorio designado como raíz. Por defecto, utiliza el director actual. el comando `dev` también se puede omitir cuando se ejecuta el directorio actual.
|
||||
|
||||
### Uso
|
||||
|
||||
```sh
|
||||
# Comienza en el directorio actual, omite el `dev`
|
||||
vitepress
|
||||
|
||||
# iniciar en un subdirectorio
|
||||
vitepress dev [root]
|
||||
```
|
||||
|
||||
### Opciones {#options}
|
||||
|
||||
| Opciones | Descripción |
|
||||
| --------------- | ----------------------------------------------------------------- |
|
||||
| `--open [path]` | Abre el navegador en el inicio (`boolean \| string`) |
|
||||
| `--port <port>` | Especifica el puerto (`number`) |
|
||||
| `--base <path>` | Ruta de base pública (por defecto: `/`) (`string`) |
|
||||
| `--cors` | Habilitar CORS |
|
||||
| `--strictPort` | Salir si el puerto especificado ya esta en uso (`boolean`) |
|
||||
| `--force` | Obligar al optimizador a ignorar el cachey volver a empaquetar (`boolean`) |
|
||||
|
||||
## `vitepress build`
|
||||
|
||||
Compilar el sitio web de VitePress para producción.
|
||||
|
||||
### Uso
|
||||
|
||||
```sh
|
||||
vitepress build [root]
|
||||
```
|
||||
|
||||
### Opciones
|
||||
|
||||
| Opcion | Descripción |
|
||||
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--mpa` (experimental) | Compilar en [Modo MPA](../guide/mpa-mode) Sin hidratación del lado del cliente (`boolean`) |
|
||||
| `--base <path>` | Ruta de base pública (por defecto: `/`) (`string`) |
|
||||
| `--target <target>` | Transpilar objetivo (por defecto: `"modules"`) (`string`) |
|
||||
| `--outDir <dir>` | Directorio de salida relativo a **cwd** (por defecto: `<root>/.vitepress/dist`) (`string`) |
|
||||
| `--minify [minifier]` | Habilitar/desabilitar la minificación, o especifica un minero para usar (por defecto: `"esbuild"`) (`boolean \| "terser" \| "esbuild"`) |
|
||||
| `--assetsInlineLimit <number>` | Limitar los bytes para alinear los activos en base 64 (por defecto: `4096`) (`number`) |
|
||||
|
||||
## `vitepress preview`
|
||||
|
||||
Proporciona localmente la compilación de la producción.
|
||||
|
||||
### Uso
|
||||
|
||||
```sh
|
||||
vitepress preview [root]
|
||||
```
|
||||
|
||||
### Opciones
|
||||
|
||||
| Opción | Descripción |
|
||||
| --------------- | ------------------------------------------ |
|
||||
| `--base <path>` | Ruta de base pública (por defecto: `/`) (`string`) |
|
||||
| `--port <port>` | Especifica el puerto (`number`) |
|
||||
|
||||
## `vitepress init`
|
||||
|
||||
Inicia el [Asistente de Instalación](../guide/getting-started#setup-wizard) en el directorio actual.
|
||||
|
||||
### Uso
|
||||
|
||||
```sh
|
||||
vitepress init
|
||||
```
|
||||
@ -0,0 +1,69 @@
|
||||
# Badge {#badge}
|
||||
|
||||
Los Badge te permite agregar estados a tus encabezados. Por ejemplo, podría resultar útil especificar el tipo de sección o la version compatible.
|
||||
|
||||
## Uso {#usage}
|
||||
|
||||
Puedes usar el componente `Badge` que está disponible globalmente.
|
||||
|
||||
```html
|
||||
### Title <Badge type="info" text="default" />
|
||||
### Title <Badge type="tip" text="^1.9.0" />
|
||||
### Title <Badge type="warning" text="beta" />
|
||||
### Title <Badge type="danger" text="caution" />
|
||||
```
|
||||
|
||||
el código anterior se representa como:
|
||||
|
||||
### Title <Badge type="info" text="default" />
|
||||
### Title <Badge type="tip" text="^1.9.0" />
|
||||
### Title <Badge type="warning" text="beta" />
|
||||
### Title <Badge type="danger" text="caution" />
|
||||
|
||||
## Personalizar hijos {#custom-children}
|
||||
|
||||
`<Badge>` acepta `children` (hijos), que se mostrará en el badge.
|
||||
|
||||
```html
|
||||
### Title <Badge type="info">custom element</Badge>
|
||||
```
|
||||
|
||||
### Title <Badge type="info">custom element</Badge>
|
||||
|
||||
## Personalizar Tipo de Color {#customize-type-color}
|
||||
|
||||
Puedes personalizar el estilo del badge anulando las variables CSS. los siguiente son los valores predeterminados:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--vp-badge-info-border: transparent;
|
||||
--vp-badge-info-text: var(--vp-c-text-2);
|
||||
--vp-badge-info-bg: var(--vp-c-default-soft);
|
||||
|
||||
--vp-badge-tip-border: transparent;
|
||||
--vp-badge-tip-text: var(--vp-c-brand-1);
|
||||
--vp-badge-tip-bg: var(--vp-c-brand-soft);
|
||||
|
||||
--vp-badge-warning-border: transparent;
|
||||
--vp-badge-warning-text: var(--vp-c-warning-1);
|
||||
--vp-badge-warning-bg: var(--vp-c-warning-soft);
|
||||
|
||||
--vp-badge-danger-border: transparent;
|
||||
--vp-badge-danger-text: var(--vp-c-danger-1);
|
||||
--vp-badge-danger-bg: var(--vp-c-danger-soft);
|
||||
}
|
||||
```
|
||||
|
||||
## `<Badge>`
|
||||
|
||||
El componente `<Badge>` acepta las siguiente propiedades:
|
||||
|
||||
```ts
|
||||
interface Props {
|
||||
// Quando `<slot>` é passado, esse valor é ignorado.
|
||||
text?: string
|
||||
|
||||
// O padrão é `tip`.
|
||||
type?: 'info' | 'tip' | 'warning' | 'danger'
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,22 @@
|
||||
# Carbon Ads {#carbon-ads}
|
||||
|
||||
VitePress ha incorporado soporte nativo para [Carbon Ads](https://www.carbonads.net/). Al definir las credenciales de Carbon Ads en la configuración, VitePress mostrará anuncios en la página.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
carbonAds: {
|
||||
code: 'seu-código-carbon',
|
||||
placement: 'sua-veiculação-carbon'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Estos valores se utilizan para llamar al script en CDN de carbon como se muestra a continuación.
|
||||
|
||||
```js
|
||||
`//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
|
||||
```
|
||||
|
||||
Para obtener más información de la configuración de Carbono Ads, por favor visite [Site Carbon Ads](https://www.carbonads.net/).
|
||||
@ -0,0 +1,452 @@
|
||||
# Configuración del Tema Predeterminado {#default-theme-config}
|
||||
|
||||
La configuración del tema te permite personalizar tu tema. puede definir la configuración del tema a travez de la opción `themeConfig` en el archivo de configuración:
|
||||
|
||||
```ts
|
||||
export default {
|
||||
lang: 'pt-BR',
|
||||
title: 'VitePress',
|
||||
description: 'Gerador de site estático Vite & Vue.',
|
||||
|
||||
// Configurações relacionadas ao tema.
|
||||
themeConfig: {
|
||||
logo: '/logo.svg',
|
||||
nav: [...],
|
||||
sidebar: { ... }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Las opciones documentadas de esta página se aplican unicamente al tema por defecto.** Diferentes temas esperan configuraciones diferentes de tema. Cuando se utiliza un tema personalizado, el objeto de configuración del tema se pasará al tema para que se puedan definir comportamientos condicionales.
|
||||
|
||||
## i18nRouting
|
||||
|
||||
- Tipo: `boolean`
|
||||
|
||||
Cambie la configuración a, por ejemplo, `zh` será alterado para URL `/foo` (ou `/en/foo/`) para `/zh/foo`. Puedes desactivar este comportamiento configurado `themeConfig.i18nRouting` como `false`.
|
||||
|
||||
## logo
|
||||
|
||||
- Tipo: `ThemeableImage`
|
||||
|
||||
Archivo de logotipo que se mostrará en la barra de navegación, justo antes del título del sitio. Acepta una ruta de cadena o un objeto para definir un logotipo diferente para los modos claro/oscuro.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
logo: '/logo.svg'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
type ThemeableImage =
|
||||
| string
|
||||
| { src: string; alt?: string }
|
||||
| { light: string; dark: string; alt?: string }
|
||||
```
|
||||
|
||||
## siteTitle
|
||||
|
||||
- Tipo: `string | false`
|
||||
|
||||
Puede personalizar este elemento para reemplazar el título del sitio predeterminado (`title` en configuración de la aplicación) en navegación. Cuando se establece como `false`, el título en la navegación quedará deshabilitado. Útil cuando tienes un `logo` que ya contiene el título del sitio.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
siteTitle: 'Olá Mundo'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## nav
|
||||
|
||||
- Tipo: `NavItem`
|
||||
|
||||
La configuración del elemento del menú de navegación. Más detalles en [Tema Predeterminado: Navegación](./default-theme-nav#navigation-links).
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{ text: 'Guia', link: '/guide' },
|
||||
{
|
||||
text: 'Menu Dropdown',
|
||||
items: [
|
||||
{ text: 'Item A', link: '/item-1' },
|
||||
{ text: 'Item B', link: '/item-2' },
|
||||
{ text: 'Item C', link: '/item-3' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
type NavItem = NavItemWithLink | NavItemWithChildren
|
||||
|
||||
interface NavItemWithLink {
|
||||
text: string
|
||||
link: string
|
||||
activeMatch?: string
|
||||
target?: string
|
||||
rel?: string
|
||||
noIcon?: boolean
|
||||
}
|
||||
|
||||
interface NavItemChildren {
|
||||
text?: string
|
||||
items: NavItemWithLink[]
|
||||
}
|
||||
|
||||
interface NavItemWithChildren {
|
||||
text?: string
|
||||
items: (NavItemChildren | NavItemWithLink)[]
|
||||
activeMatch?: string
|
||||
}
|
||||
```
|
||||
|
||||
## sidebar
|
||||
|
||||
- Tipo: `Sidebar`
|
||||
|
||||
La configuración del elemento del menú de la barra lateral. Más detalles en [Tema Predeterminado: Barra Lateral](./default-theme-sidebar).
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Guia',
|
||||
items: [
|
||||
{ text: 'Introducción', link: '/introduction' },
|
||||
{ text: 'A partir de', link: '/getting-started' },
|
||||
...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export type Sidebar = SidebarItem[] | SidebarMulti
|
||||
|
||||
export interface SidebarMulti {
|
||||
[path: string]: SidebarItem[]
|
||||
}
|
||||
|
||||
export type SidebarItem = {
|
||||
/**
|
||||
* El rotulo del item.
|
||||
*/
|
||||
text?: string
|
||||
|
||||
/**
|
||||
* El link del item.
|
||||
*/
|
||||
link?: string
|
||||
|
||||
/**
|
||||
* Los hijos del item.
|
||||
*/
|
||||
items?: SidebarItem[]
|
||||
|
||||
/**
|
||||
* Si no se especifica, el grupo no es retráctil.
|
||||
*
|
||||
* Si es 'true', el grupo se puede contraer y está contraído de forma predeterminada.
|
||||
*
|
||||
* Si es 'false', el grupo se puede contraer pero se expande de forma predeterminada.
|
||||
*/
|
||||
collapsed?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
## aside
|
||||
|
||||
- Tipo: `boolean | 'left'`
|
||||
- Estandar: `true`
|
||||
- Puede ser anulado por la página a través de [frontmatter](./frontmatter-config#aside)
|
||||
|
||||
Definir este valor como `false` evita que se muestre el elemento lateral.\
|
||||
Definir este valor como `true` presenta el lado de la derecha.\
|
||||
Definir este valor como `left` presenta el lado de la izquierda.
|
||||
|
||||
Si desea deshabilitarlo para todas las vistas, debe usar `outline: false` en vez de eso.
|
||||
|
||||
## outline
|
||||
|
||||
- Tipo: `Outline | Outline['level'] | false`
|
||||
- El nivel se puede superponer por página mediante [frontmatter](./frontmatter-config#outline)
|
||||
|
||||
Definir este valor como `false` evita que el elemento se muestre _outline_. Consulte la interfaz para más detalles:
|
||||
|
||||
```ts
|
||||
interface Outline {
|
||||
/**
|
||||
* Los niveles de título que se mostrarán en el esquema.
|
||||
* Un solo número significa que solo se mostrarán los títulos de ese nivel.
|
||||
* Si se pasa una tupla, el primer número es el nivel mínimo y el segundo número es el nivel máximo.
|
||||
* `'deep'` es lo mismo que `[2, 6]`, lo que sifnifica que todos los titulos `<h2>` a `<h6>` serán mostrados.
|
||||
*
|
||||
* @default 2
|
||||
*/
|
||||
level?: number | [number, number] | 'deep'
|
||||
|
||||
/**
|
||||
* El titulo que se mostrará en el equema.
|
||||
*
|
||||
* @default 'On this page'
|
||||
*/
|
||||
label?: string
|
||||
}
|
||||
```
|
||||
|
||||
## socialLinks
|
||||
|
||||
- Tipo: `SocialLink[]`
|
||||
|
||||
Você pode definir esta opção para mostrar os links de redes sociais com ícones na navegação.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' },
|
||||
{ icon: 'twitter', link: '...' },
|
||||
// También puedes agregar íconos personalizados pasando SVG como string:
|
||||
{
|
||||
icon: {
|
||||
svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>'
|
||||
},
|
||||
link: '...',
|
||||
// También puedes incluir una etiquera personalizada de accesibilidad (opcional pero recomendada):
|
||||
ariaLabel: 'cool link'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
interface SocialLink {
|
||||
icon: SocialLinkIcon
|
||||
link: string
|
||||
ariaLabel?: string
|
||||
}
|
||||
|
||||
type SocialLinkIcon =
|
||||
| 'discord'
|
||||
| 'facebook'
|
||||
| 'github'
|
||||
| 'instagram'
|
||||
| 'linkedin'
|
||||
| 'mastodon'
|
||||
| 'npm'
|
||||
| 'slack'
|
||||
| 'twitter'
|
||||
| 'x'
|
||||
| 'youtube'
|
||||
| { svg: string }
|
||||
```
|
||||
|
||||
## footer
|
||||
|
||||
- Tipo: `Footer`
|
||||
- Se puede superponer por página mediante [frontmatter](./frontmatter-config#footer)
|
||||
|
||||
Configuración de pie de página. Puede agregar un mensaje o texto de derechos de autor en el pie de página; sin embargo, solo se mostrará cuando la página no contenga una barra lateral. Esto se debe a preocupaciones de diseño.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
footer: {
|
||||
message: 'Publicado bajo la licencia MIT.',
|
||||
copyright: 'Derechos de autor © 2019-presente Evan You'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface Footer {
|
||||
message?: string
|
||||
copyright?: string
|
||||
}
|
||||
```
|
||||
|
||||
## editLink
|
||||
|
||||
- Tipo: `EditLink`
|
||||
- Se puede superponer por página mediante [frontmatter](./frontmatter-config#editlink)
|
||||
|
||||
_EditLink_ le permite mostrar un enlace para editar la página en los servicios de administración Git, como GitHub o GitLab. Consulte [Tema por defecto: Editar Link](./default-theme-edit-link) para más detalles.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
editLink: {
|
||||
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
|
||||
text: 'Editar esta página en GitHub'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface EditLink {
|
||||
pattern: string
|
||||
text?: string
|
||||
}
|
||||
```
|
||||
|
||||
## lastUpdated
|
||||
|
||||
- Tipo: `LastUpdatedOptions`
|
||||
|
||||
Permite la personalización del formato de fecha y texto actualizado por ultima vez.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
lastUpdated: {
|
||||
text: 'Actualizado en',
|
||||
formatOptions: {
|
||||
dateStyle: 'full',
|
||||
timeStyle: 'medium'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface LastUpdatedOptions {
|
||||
/**
|
||||
* @default 'Last updated'
|
||||
*/
|
||||
text?: string
|
||||
|
||||
/**
|
||||
* @default
|
||||
* { dateStyle: 'short', timeStyle: 'short' }
|
||||
*/
|
||||
formatOptions?: Intl.DateTimeFormatOptions & { forceLocale?: boolean }
|
||||
}
|
||||
```
|
||||
|
||||
## algolia
|
||||
|
||||
- Tipo: `AlgoliaSearch`
|
||||
|
||||
Una opción para dar soporte para buscar en su sitio de documentación usando [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch). Obtenga más información en [Tema predeterminado: Buscar](./default-theme-search).
|
||||
|
||||
```ts
|
||||
export interface AlgoliaSearchOptions extends DocSearchProps {
|
||||
locales?: Record<string, Partial<DocSearchProps>>
|
||||
}
|
||||
```
|
||||
|
||||
Ver todas las opciones [aquí](https://github.com/vuejs/vitepress/blob/main/types/docsearch.d.ts).
|
||||
|
||||
## carbonAds {#carbon-ads}
|
||||
|
||||
- Tipo: `CarbonAdsOptions`
|
||||
|
||||
Una opción para mostrar [Carbon Ads](https://www.carbonads.net/).
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
carbonAds: {
|
||||
code: 'su-código-carbon',
|
||||
placement: 'su-colocación-carbon'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface CarbonAdsOptions {
|
||||
code: string
|
||||
placement: string
|
||||
}
|
||||
```
|
||||
|
||||
Obtenga más información en [Tema Predeterminado: Carbon Ads](./default-theme-carbon-ads).
|
||||
|
||||
## docFooter
|
||||
|
||||
- Tipo: `DocFooter`
|
||||
|
||||
Se puede utilizar para personalizar el texto que aparece encima de los enlaces anterior y siguiente. Útil si no estás escribiendo documentación en inglés. También se puede utilizar para desactivar globalmente los enlaces anteriores/siguientes. Si desea habilitar/deshabilitar selectivamente enlaces anteriores/siguientes, puede usar [frontmatter](./default-theme-prev-next-links).
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
docFooter: {
|
||||
prev: 'Página anterior',
|
||||
next: 'Próxima página'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface DocFooter {
|
||||
prev?: string | false
|
||||
next?: string | false
|
||||
}
|
||||
```
|
||||
|
||||
## darkModeSwitchLabel
|
||||
|
||||
- Tipo: `string`
|
||||
- Estandar: `Appearance`
|
||||
|
||||
Se puede utilizar para personalizar la etiqueta del botón del modo oscuro. Esta etiqueta solo se muestra en la vista móvil.
|
||||
|
||||
## lightModeSwitchTitle
|
||||
|
||||
- Tipo: `string`
|
||||
- Estandar: `Switch to light theme`
|
||||
|
||||
Se puede utilizar para personalizar el título del botón borrar que aparece al pasar el mouse.
|
||||
|
||||
## darkModeSwitchTitle
|
||||
|
||||
- Tipo: `string`
|
||||
- Estandar: `Switch to dark theme`
|
||||
|
||||
Se puede utilizar para personalizar el título del botón del modo oscuro que aparece al pasar el mouse.
|
||||
|
||||
## sidebarMenuLabel
|
||||
|
||||
- Tipo: `string`
|
||||
- Estandar: `Menu`
|
||||
|
||||
Se puede utilizar para personalizar la etiqueta del menú de la barra lateral. Esta etiqueta solo se muestra en la vista móvil.
|
||||
|
||||
## returnToTopLabel
|
||||
|
||||
- Tipo: `string`
|
||||
- Estandar: `Return to top`
|
||||
|
||||
Se puede utilizar para personalizar la etiqueta del botón Volver al principio. Esta etiqueta solo se muestra en la vista móvil.
|
||||
|
||||
## langMenuLabel
|
||||
|
||||
- Tipo: `string`
|
||||
- Estandar: `Change language`
|
||||
|
||||
Se puede utilizar para personalizar la etiqueta aria del botón de idioma en la barra de navegación. Esto sólo se usa si estás usando [i18n](../guide/i18n).
|
||||
|
||||
## externalLinkIcon
|
||||
|
||||
- Tipo: `boolean`
|
||||
- Estandar: `false`
|
||||
|
||||
Se debe mostrar um ícono de link externo junto a los enlaces externos en markdown.
|
||||
@ -0,0 +1,60 @@
|
||||
# Editar Link {#edit-link}
|
||||
|
||||
## Configuración a nivel de sitio {#site-level-config}
|
||||
|
||||
Editar enlace le permite mostrar un enlace para editar la página con servicios de administración de Git como GitHub o GitLab. Para habilitar, agregue la opción `themeConfig.editLink` en su configuración.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
editLink: {
|
||||
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
La opción `pattern` define una estructura de URL para el enlace, y `:path` se reemplaza con la misma ruta de la página
|
||||
|
||||
También puedes poner una función pura que acepte [`PageData`](./runtime-api#usedata) como argumento y retorna una URL en string.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
editLink: {
|
||||
pattern: ({ filePath }) => {
|
||||
if (filePath.startsWith('packages/')) {
|
||||
return `https://github.com/acme/monorepo/edit/main/${filePath}`
|
||||
} else {
|
||||
return `https://github.com/acme/monorepo/edit/main/docs/${filePath}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Esto no debería generar efectos secundarios ni acceder a nada fuera de su alcance, ya que será serializado y ejecutado en el navegador.
|
||||
|
||||
De forma predeterminada, esto agregará el enlace con el texto 'Editar esta página' al final de la página de documentación. Puedes personalizar este texto configurando la opción `text`.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
editLink: {
|
||||
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
|
||||
text: 'Edite essa página no GitHub'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Configuración Frontmatter {#frontmatter-config}
|
||||
|
||||
La funcionalidad se puede desactivar por página utilizando la opción `editLink` en frontmatter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
editLink: false
|
||||
---
|
||||
```
|
||||
@ -0,0 +1,53 @@
|
||||
# Pie de página {#footer}
|
||||
|
||||
VitePress mostrará un pie de página global en la parte inferior de la página cuando `themeConfig.footer` está presente.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
footer: {
|
||||
message: 'Publicado bajo la licencia MIT.',
|
||||
copyright: 'Derechos de autor © 2019-present Evan You'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface Footer {
|
||||
// El mensaje mostrado justo antes del copyright.
|
||||
message?: string
|
||||
|
||||
// El texto real de copyright.
|
||||
copyright?: string
|
||||
}
|
||||
```
|
||||
|
||||
La configuración anterior también admite cadenas HTML. Entonces, por ejemplo, si desea configurar el texto de su pie de página para que tenga algunos enlaces, puede ajustar la configuración de la siguiente manera:
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
footer: {
|
||||
message: 'Publicado bajo <a href="https://github.com/vuejs/vitepress/blob/main/LICENSE">Licencia MIT</a>.',
|
||||
copyright: 'Derechos de autor © 2019-present <a href="https://github.com/yyx990803">Evan You</a>'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
::: warning
|
||||
Solo se utilizan elementos _inline_ será utilizado en `message` y `copyright` tal como se presenta dentro del elemento `<p>`. Si desea agregar elementos de tipo _block_, considere usar un _slot_ [`layout-bottom`](../guide/extending-default-theme#layout-slots).
|
||||
:::
|
||||
|
||||
Tenga en cuenta que el pie de página no se mostrará cuando la [Barra Lateral](./default-theme-sidebar) es visible.
|
||||
|
||||
## Configuración Frontmatter {#frontmatter-config}
|
||||
|
||||
Esto se puede desactivar por página usando la opción `footer` en frontmatter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
footer: false
|
||||
---
|
||||
```
|
||||
@ -0,0 +1,168 @@
|
||||
# Página Inicial {#home-page}
|
||||
|
||||
El tema predeterminado de VitePress proporciona un diseño de página de inicio, que también puedes ver en uso [en la página de inicio de este sitio web](../). Puedes usarlo en cualquiera de sus páginas especificando `layout: home` en [frontmatter](./frontmatter-config).
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: home
|
||||
---
|
||||
```
|
||||
|
||||
Sin embargo, esta opción por sí sola no sirve de mucho. Puede agregar varias "secciones" predefinidas diferentes a la página de inicio configurando opciones adicionales como `hero` y `features`.
|
||||
|
||||
## Sección Hero {#hero-section}
|
||||
|
||||
La sección _Hero_ queda en la parte superior de la página de inicio. Asi es como se puede configurar la sección _Hero_.
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: home
|
||||
|
||||
hero:
|
||||
name: VitePress
|
||||
text: Generador de sitios web estaticos con Vite & Vue.
|
||||
tagline: Lorem ipsum...
|
||||
image:
|
||||
src: /logo.png
|
||||
alt: VitePress
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Iniciar
|
||||
link: /guide/what-is-vitepress
|
||||
- theme: alt
|
||||
text: Ver en GitHub
|
||||
link: https://github.com/vuejs/vitepress
|
||||
---
|
||||
```
|
||||
|
||||
```ts
|
||||
interface Hero {
|
||||
// El string que se muestra encima del `text`. Viene con el color de la marca
|
||||
// y se espera que sea breve, como el nombre del producto.
|
||||
name?: string
|
||||
|
||||
// El texto principal de la sección de hero.
|
||||
// Esto se definirá como un tag `h1`.
|
||||
text: string
|
||||
|
||||
// Eslogan que se muestra abajo del `text`.
|
||||
tagline?: string
|
||||
|
||||
// La imagen se muestra junto al área de texto y eslogan.
|
||||
image?: ThemeableImage
|
||||
|
||||
// Botones accionables para mostrar en la sección principal de la página de inicio.
|
||||
actions?: HeroAction[]
|
||||
}
|
||||
|
||||
type ThemeableImage =
|
||||
| string
|
||||
| { src: string; alt?: string }
|
||||
| { light: string; dark: string; alt?: string }
|
||||
|
||||
interface HeroAction {
|
||||
// Tema de color de botón. Estándar: `brand`.
|
||||
theme?: 'brand' | 'alt'
|
||||
|
||||
// Etqueta del botón.
|
||||
text: string
|
||||
|
||||
// Destino del enlace del botón.
|
||||
link: string
|
||||
|
||||
// Atributo target del link.
|
||||
target?: string
|
||||
|
||||
// Atributo rel del link.
|
||||
rel?: string
|
||||
}
|
||||
```
|
||||
|
||||
### Personalizando el color del nombre {#customizing-the-name-color}
|
||||
|
||||
VitePress usa el color de la marca (`--vp-c-brand-1`) para `name`. Sin embargo, puedes personalizar este color anulando la variable `--vp-home-hero-name-color`.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--vp-home-hero-name-color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
También puedes personalizarlo aún más combinando `--vp-home-hero-name-background` para dar al `name` un color degradado.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
|
||||
}
|
||||
```
|
||||
|
||||
## Sección de caracteristicas {#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.
|
||||
|
||||
Puede proporcionar un icono para cada función, que puede ser un emoji o cualquier tipo de imagen. Cuando el icono configurado es una imagen (svg, png, jpeg...), debes proporcionar al ícono el ancho y alto apropiados; También puedes proporcionar la descripción, su tamaño intrínseco y sus variantes para temas oscuros y claros cuando sea necesario.
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: home
|
||||
|
||||
features:
|
||||
- icon: 🛠️
|
||||
title: Sencillo y minimalista, siempre
|
||||
details: Lorem ipsum...
|
||||
- icon:
|
||||
src: /cool-feature-icon.svg
|
||||
title: Otra caracteristica interesante
|
||||
details: Lorem ipsum...
|
||||
- icon:
|
||||
dark: /dark-feature-icon.svg
|
||||
light: /light-feature-icon.svg
|
||||
title: Otra caracteristica interesante
|
||||
details: Lorem ipsum...
|
||||
---
|
||||
```
|
||||
|
||||
```ts
|
||||
interface Feature {
|
||||
// Muestra el icono en cada cuadro de funcón.
|
||||
icon?: FeatureIcon
|
||||
|
||||
// Título de la caracteristica.
|
||||
title: string
|
||||
|
||||
// Detalles de la caracteristicas.
|
||||
details: string
|
||||
|
||||
// Enlace al hacer clic en el componente de funcionalidad
|
||||
// El vínculo puede ser interno o externo.
|
||||
//
|
||||
// ex. `guide/reference/default-theme-home-page` ou `https://example.com`
|
||||
link?: string
|
||||
|
||||
// Texto del enlace que se mostrará dentro del componente de funcionalidad.
|
||||
// Mejor usado con opción `link`.
|
||||
//
|
||||
// ex. `Saiba mais`, `Visitar página`, etc.
|
||||
linkText?: string
|
||||
|
||||
// Atributo rel de enlace para la opción `link`.
|
||||
//
|
||||
// ex. `external`
|
||||
rel?: string
|
||||
|
||||
// Atributo de destino del enlace para la opción `link`.
|
||||
target?: string
|
||||
}
|
||||
|
||||
type FeatureIcon =
|
||||
| string
|
||||
| { src: string; alt?: string; width?: string; height: string }
|
||||
| {
|
||||
light: string
|
||||
dark: string
|
||||
alt?: string
|
||||
width?: string
|
||||
height: string
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,27 @@
|
||||
# Última Actualización {#last-updated}
|
||||
|
||||
La hora en que se actualizó el contenido por última vez se mostrará en la esquina inferior derecha de la página. Para habilitar, agregue la opción `lastUpdated` en su confirguración.
|
||||
|
||||
::: tip
|
||||
Necesitas hacer un _commit_ en el archivo markdown para ver el clima actualizado.
|
||||
:::
|
||||
|
||||
## Configuración a nivel de sitio {#site-level-config}
|
||||
|
||||
```js
|
||||
export default {
|
||||
lastUpdated: true
|
||||
}
|
||||
```
|
||||
|
||||
## Configuración Frontmatter {#frontmatter-config}
|
||||
|
||||
Esto se puede desactivar por página usando la opción `lastUpdated` en frontmatter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
lastUpdated: false
|
||||
---
|
||||
```
|
||||
|
||||
Consulte [Tema PErsonalizado: Última Actualización](./default-theme-config#lastupdated) para obtener más. Cualquier valor positivo a nivel de tema también habilitará la funcionalidad a menos que esté explícitamente deshabilitado a nivel de página o sitio.
|
||||
@ -0,0 +1,63 @@
|
||||
# Layout {#layout}
|
||||
|
||||
Puedes elegir el layout de la página definiendo una opción de `layout` para el [frontmatter](./frontmatter-config) De la página. Hay tres opciones de layout: `doc`, `page` y `home`. Si no se especifica nada, la página será tratada como una página. `doc`.
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: doc
|
||||
---
|
||||
```
|
||||
|
||||
## Layout del documento {#doc-layout}
|
||||
|
||||
La opción `doc` es el layout predeterminado y aplca estlo a todo el contenido de Markdown el aspecto de "documentación". Funciona agrupando todo el contenido en la clase CSS `vp-doc`, y aplicando estilos a los elementos debajo de ella.
|
||||
|
||||
Casi todos los elementos genéricos como `p` o `h2`, recibir un estilo especial. Por tanto, recuerda que si añades algún HTML contenido personalizado dentro del contenido Markdown, también se verá afectado por estos estilos.
|
||||
|
||||
También proporciona recursos de documentación específicos que se enumeran a continuación. Estas funciones solo están habilitadas en este layout.
|
||||
|
||||
- Editar link
|
||||
- Links Anterior y próximo.
|
||||
- _Outline_
|
||||
- [Carbon Ads](./default-theme-carbon-ads)
|
||||
|
||||
## Layout de la Página {#page-layout}
|
||||
|
||||
La opción `page` se trata como una 'página en blanco'. Markdown aún se procesará y todo [Extensiones Markdown](../guide/markdown) funcionará de la misma manera que el layout `doc`,
|
||||
pero esto no recibirá ningún estilo predeterminado.
|
||||
|
||||
El layout de la página le permitirá diseñar todo sin que el tema de VitePress afecte el marcado. Esto es útil cuando desea crear su propia página personalizada.
|
||||
|
||||
Tenga en cuenta que incluso en este mismo layout, a barra lateral seguirá apareciendo si la página tiene una configuración de barra lateral correspondiente.
|
||||
|
||||
## Layout de Home {#home-layout}
|
||||
|
||||
La opción `home` gerará un modelo de _"Homepage"_. En este layout você pofra definir opciones extras, como `hero` y `features`, para personalizar todavá más el contenido. Visite [Tema padrão: Página Inicial](./default-theme-home-page) para obter más detalles.
|
||||
|
||||
## 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).
|
||||
|
||||
## Layout Personalizado {#custom-layout}
|
||||
|
||||
También puedes usar un layout personalizado:
|
||||
|
||||
```md
|
||||
---
|
||||
layout: foo
|
||||
---
|
||||
```
|
||||
|
||||
Esto buscará un componente llamado `foo` registrado en contexto. Por ejemplo, puede registrar su componente globalmente en `.vitepress/theme/index.ts`:
|
||||
|
||||
```ts
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import Foo from './Foo.vue'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
enhanceApp({ app }) {
|
||||
app.component('foo', Foo)
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,162 @@
|
||||
# Navegacion {#nav}
|
||||
|
||||
Refiriéndose a la barra de navegación que se muestra en la parte superior de la página. Contiene el título del sitio, enlaces del menú global, etc.
|
||||
|
||||
## Título y logotipo del sitio {#site-title-and-logo}
|
||||
|
||||
Por defecto, la navegación muestra el título del sitio que hace referencia al valor de [`config.title`](./site-config#title). Si desea cambiar lo que se muestra en la navegación, puede configurar un texto personalizado en el `themeConfig.siteTitle`.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
siteTitle: 'Mi Título Personalizado'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Si tiene un logotipo para su sitio web, puede mostrarlo pasando la ruta a la imagen. Debes colocar el logo directamente dentro de la carpeta. `public`, y establezca la ruta absoluta hacia él.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
logo: '/my-logo.svg'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Cuando agrega un logotipo, se muestra junto con el título del sitio. Si su logotipo tiene todo lo que necesita y desea ocultar el texto del título, configure `false` en la opción `siteTitle`.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
logo: '/my-logo.svg',
|
||||
siteTitle: false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
También puedes pasar un objeto como logotipo si quieres agregar un atributo. `alt` o personalizarlo según el modo claro/oscuro. Consultar [`themeConfig.logo`](./default-theme-config#logo) para obtener más detalles.
|
||||
|
||||
## Links de Navegaion {#navigation-links}
|
||||
|
||||
Puedes configurar la opción `themeConfig.nav` para añadir enlaces a tu navegación.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{ text: 'Guia', link: '/guide' },
|
||||
{ text: 'Configuración', link: '/config' },
|
||||
{ text: 'Registro de Cambios', link: 'https://github.com/...' }
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`text` es el texto que se muestra en la navegación, y el `link` es el link al que será navegando cuando se hace click en el texto. Para el enlace, establezca la ruta al archivo sin el prefijo `.md` y siempre comenzar por `/`.
|
||||
|
||||
Links de navegación también pueden ser menus _dropdown_. Para hacer eso, establezca la clave de `items` en la opción del link.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{ text: 'Guia', link: '/guide' },
|
||||
{
|
||||
text: 'Menú Dropdown',
|
||||
items: [
|
||||
{ text: 'Item A', link: '/item-1' },
|
||||
{ text: 'Item B', link: '/item-2' },
|
||||
{ text: 'Item C', link: '/item-3' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Tenga en cuenta que el titulo del menú _dropdown_ (`Menu Dropdown` en el ejemplo anterior) no puede tener una propiedad `link`, ya que se convierte en un botón para abrir el cuadro del dialogo dropdown.
|
||||
|
||||
También puedes agregar "secciones" a los elementos del menú _dropdown_ pasando más elementos anidados.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{ text: 'Guia', link: '/guia' },
|
||||
{
|
||||
text: 'Menú Dropdown',
|
||||
items: [
|
||||
{
|
||||
// Título da seção.
|
||||
text: 'Título de la sección A',
|
||||
items: [
|
||||
{ text: 'Item A de la sección A', link: '...' },
|
||||
{ text: 'Item B de la sección B', link: '...' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Menú Dropdown',
|
||||
items: [
|
||||
{
|
||||
// También puedes omitir el título
|
||||
items: [
|
||||
{ text: 'Item A da Seção A', link: '...' },
|
||||
{ text: 'Item B da Seção B', link: '...' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Personaliza el estado "activo" del link {#customize-link-s-active-state}
|
||||
|
||||
Los elementos del menú de navegación se resaltarán cuando la página actual esté en la ruta correspondiente. Si desea personalizar la ruta que debe coincidir, establezca la propiedad `activeMatch` el regex como um valor en string.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
// Este link esta en estado activo cuando
|
||||
// el usuario esta en el camino `/config/`.
|
||||
{
|
||||
text: 'Guia',
|
||||
link: '/guide',
|
||||
activeMatch: '/config/'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
::: warning
|
||||
`activeMatch` Debería ser un string regex, pero deberías definirla como un string. No podemos usar un objeto RegExp real aquí porque no es serializable durante el tiempo de construcción.
|
||||
:::
|
||||
|
||||
### Personalizar los atributos "target" y "rel" de links {#customize-link-s-target-and-rel-attributes}
|
||||
|
||||
Por defecto, VitePress determina automaticamente lod atributos `target` y `rel` en función de si existe un enlace externo o no. Pero si quieres, también puedes personalizarlos.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{
|
||||
text: 'Merchandise',
|
||||
link: 'https://www.thegithubshop.com/',
|
||||
target: '_self',
|
||||
rel: 'sponsored'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Links Scociales {#social-links}
|
||||
|
||||
Consulte [`socialLinks`](./default-theme-config#sociallinks).
|
||||
@ -0,0 +1,43 @@
|
||||
# Links Anterior y Próximo {#prev-next-links}
|
||||
|
||||
Puede personalizar el texto y el enlace de los botones Anterior y Siguiente que se muestran en la parte inferior de la página. Esto es útil cuando desea mostrar un texto diferente al que tiene en la barra lateral. Además, puede resultarle útil desactivar el pie de página o el enlace a la página para que no se incluya en la barra lateral.
|
||||
|
||||
## prev
|
||||
|
||||
- Tipo: `string | false | { text?: string; link?: string }`
|
||||
|
||||
- Detalles:
|
||||
|
||||
Especifica el text/enlace que se mostrará en el enlace a la página anterior. Si no ve esto al principio, el text/enlace se deducirá de la configuración de la barra lateral.
|
||||
|
||||
- Ejemplos:
|
||||
|
||||
- Para personalizar solo texto:
|
||||
|
||||
```yaml
|
||||
---
|
||||
prev: 'Iniciar | Markdown'
|
||||
---
|
||||
```
|
||||
|
||||
- Para personalizar ambos texto y link:
|
||||
|
||||
```yaml
|
||||
---
|
||||
prev:
|
||||
text: 'Markdown'
|
||||
link: '/guide/markdown'
|
||||
---
|
||||
```
|
||||
|
||||
- Para esconder la página anterior:
|
||||
|
||||
```yaml
|
||||
---
|
||||
prev: false
|
||||
---
|
||||
```
|
||||
|
||||
## next
|
||||
|
||||
Igual que el `prev` pero para la página siguiente.
|
||||
@ -0,0 +1,379 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Buscar {#search}
|
||||
|
||||
## Busqueda local {#local-search}
|
||||
|
||||
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`:
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
themeConfig: {
|
||||
search: {
|
||||
provider: 'local'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Resultado de ejemplo:
|
||||
|
||||
|
||||
|
||||
Alternativamente, puedes usar [Algolia DocSearch](#algolia-search) ou algunos complementos comunitarios como <https://www.npmjs.com/package/vitepress-plugin-search> o <https://www.npmjs.com/package/vitepress-plugin-pagefind>.
|
||||
|
||||
### i18n {#local-search-i18n}
|
||||
|
||||
Puede utilizar una configuración como esta para utilizar la búsqueda multilingüe:
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
themeConfig: {
|
||||
search: {
|
||||
provider: 'local',
|
||||
options: {
|
||||
locales: {
|
||||
zh: {
|
||||
translations: {
|
||||
button: {
|
||||
buttonText: '搜索文档',
|
||||
buttonAriaLabel: '搜索文档'
|
||||
},
|
||||
modal: {
|
||||
noResultsText: '无法找到相关结果',
|
||||
resetButtonTitle: '清除查询条件',
|
||||
footer: {
|
||||
selectText: '选择',
|
||||
navigateText: '切换'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Opciones MiniSearch {#mini-search-options}
|
||||
|
||||
Puedes configurar MiniSearch de esta manera:
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
themeConfig: {
|
||||
search: {
|
||||
provider: 'local',
|
||||
options: {
|
||||
miniSearch: {
|
||||
/**
|
||||
* @type {Pick<import('minisearch').Options, 'extractField' | 'tokenize' | 'processTerm'>}
|
||||
*/
|
||||
options: {
|
||||
/* ... */
|
||||
},
|
||||
/**
|
||||
* @type {import('minisearch').SearchOptions}
|
||||
* @default
|
||||
* { fuzzy: 0.2, prefix: true, boost: { title: 4, text: 2, titles: 1 } }
|
||||
*/
|
||||
searchOptions: {
|
||||
/* ... */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Obtenga más información en [documentação do MiniSearch](https://lucaong.github.io/minisearch/classes/MiniSearch.MiniSearch.html).
|
||||
|
||||
### Presentador de contenido personalizado {#custom-content-renderer}
|
||||
|
||||
Puedes personalizar la función utilizada para presentar el contenido de rebajas antes de indexarlo:
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
themeConfig: {
|
||||
search: {
|
||||
provider: 'local',
|
||||
options: {
|
||||
/**
|
||||
* @param {string} src
|
||||
* @param {import('vitepress').MarkdownEnv} env
|
||||
* @param {import('markdown-it')} md
|
||||
*/
|
||||
_render(src, env, md) {
|
||||
// retorne a string HTML
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
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}
|
||||
|
||||
Puedes excluir páginas de la busqueda adicionando `search: false` al principio de la página. Alternativamente:
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
themeConfig: {
|
||||
search: {
|
||||
provider: 'local',
|
||||
options: {
|
||||
_render(src, env, md) {
|
||||
const html = md.render(src, env)
|
||||
if (env.frontmatter?.search === false) return ''
|
||||
if (env.relativePath.startsWith('algum/caminho')) return ''
|
||||
return html
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
::: warning Nota
|
||||
En este caso, una función `_render` se proporciona, es necesario manipular el `search: false` desde el frente por su cuenta. Además, el objeto `env` não estará completamente populado antes que `md.render` no estará completamente poblado antes `env`, como `frontmatter`, debe hacerse después de eso.
|
||||
:::
|
||||
|
||||
#### Ejemplo: Transformar contenido - agregar anclajes {#example-transforming-content-adding-anchors}
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
themeConfig: {
|
||||
search: {
|
||||
provider: 'local',
|
||||
options: {
|
||||
_render(src, env, md) {
|
||||
const html = md.render(src, env)
|
||||
if (env.frontmatter?.title)
|
||||
return md.render(`# ${env.frontmatter.title}`) + html
|
||||
return html
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Pesquisa 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:
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
themeConfig: {
|
||||
search: {
|
||||
provider: 'algolia',
|
||||
options: {
|
||||
appId: '...',
|
||||
apiKey: '...',
|
||||
indexName: '...'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### i18n {#algolia-search-i18n} {#algolia-search-i18n}
|
||||
|
||||
Puede utilizar una configuración como esta para utilizar la búsqueda multilingüe:
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
themeConfig: {
|
||||
search: {
|
||||
provider: 'algolia',
|
||||
options: {
|
||||
appId: '...',
|
||||
apiKey: '...',
|
||||
indexName: '...',
|
||||
locales: {
|
||||
zh: {
|
||||
placeholder: '搜索文档',
|
||||
translations: {
|
||||
button: {
|
||||
buttonText: '搜索文档',
|
||||
buttonAriaLabel: '搜索文档'
|
||||
},
|
||||
modal: {
|
||||
searchBox: {
|
||||
resetButtonTitle: '清除查询条件',
|
||||
resetButtonAriaLabel: '清除查询条件',
|
||||
cancelButtonText: '取消',
|
||||
cancelButtonAriaLabel: '取消'
|
||||
},
|
||||
startScreen: {
|
||||
recentSearchesTitle: '搜索历史',
|
||||
noRecentSearchesText: '没有搜索历史',
|
||||
saveRecentSearchButtonTitle: '保存至搜索历史',
|
||||
removeRecentSearchButtonTitle: '从搜索历史中移除',
|
||||
favoriteSearchesTitle: '收藏',
|
||||
removeFavoriteSearchButtonTitle: '从收藏中移除'
|
||||
},
|
||||
errorScreen: {
|
||||
titleText: '无法获取结果',
|
||||
helpText: '你可能需要检查你的网络连接'
|
||||
},
|
||||
footer: {
|
||||
selectText: '选择',
|
||||
navigateText: '切换',
|
||||
closeText: '关闭',
|
||||
searchByText: '搜索提供者'
|
||||
},
|
||||
noResultsScreen: {
|
||||
noResultsText: '无法找到相关结果',
|
||||
suggestedQueryText: '你可以尝试查询',
|
||||
reportMissingResultsText: '你认为该查询应该有结果？',
|
||||
reportMissingResultsLinkText: '点击反馈'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
[Estas opciones](https://github.com/vuejs/vitepress/blob/main/types/docsearch.d.ts) se pueden superponer. Consulte la documentación oficial de Algolia para obtener más información sobre ellos.
|
||||
|
||||
### Configuración _Crawler_ {#crawler-config}
|
||||
|
||||
A continuación se muestra un ejemplo de la configuración que utiliza este sitio:
|
||||
|
||||
```ts
|
||||
new Crawler({
|
||||
appId: '...',
|
||||
apiKey: '...',
|
||||
rateLimit: 8,
|
||||
startUrls: ['https://vitepress.dev/'],
|
||||
renderJavaScript: false,
|
||||
sitemaps: [],
|
||||
exclusionPatterns: [],
|
||||
ignoreCanonicalTo: false,
|
||||
discoveryPatterns: ['https://vitepress.dev/**'],
|
||||
schedule: 'at 05:10 on Saturday',
|
||||
actions: [
|
||||
{
|
||||
indexName: 'vitepress',
|
||||
pathsToMatch: ['https://vitepress.dev/**'],
|
||||
recordExtractor: ({ $, helpers }) => {
|
||||
return helpers.docsearch({
|
||||
recordProps: {
|
||||
lvl1: '.content h1',
|
||||
content: '.content p, .content li',
|
||||
lvl0: {
|
||||
selectors: '',
|
||||
defaultValue: 'Documentation'
|
||||
},
|
||||
lvl2: '.content h2',
|
||||
lvl3: '.content h3',
|
||||
lvl4: '.content h4',
|
||||
lvl5: '.content h5'
|
||||
},
|
||||
indexHeadings: true
|
||||
})
|
||||
}
|
||||
}
|
||||
],
|
||||
initialIndexSettings: {
|
||||
vitepress: {
|
||||
attributesForFaceting: ['type', 'lang'],
|
||||
attributesToRetrieve: ['hierarchy', 'content', 'anchor', 'url'],
|
||||
attributesToHighlight: ['hierarchy', 'hierarchy_camel', 'content'],
|
||||
attributesToSnippet: ['content:10'],
|
||||
camelCaseAttributes: ['hierarchy', 'hierarchy_radio', 'content'],
|
||||
searchableAttributes: [
|
||||
'unordered(hierarchy_radio_camel.lvl0)',
|
||||
'unordered(hierarchy_radio.lvl0)',
|
||||
'unordered(hierarchy_radio_camel.lvl1)',
|
||||
'unordered(hierarchy_radio.lvl1)',
|
||||
'unordered(hierarchy_radio_camel.lvl2)',
|
||||
'unordered(hierarchy_radio.lvl2)',
|
||||
'unordered(hierarchy_radio_camel.lvl3)',
|
||||
'unordered(hierarchy_radio.lvl3)',
|
||||
'unordered(hierarchy_radio_camel.lvl4)',
|
||||
'unordered(hierarchy_radio.lvl4)',
|
||||
'unordered(hierarchy_radio_camel.lvl5)',
|
||||
'unordered(hierarchy_radio.lvl5)',
|
||||
'unordered(hierarchy_radio_camel.lvl6)',
|
||||
'unordered(hierarchy_radio.lvl6)',
|
||||
'unordered(hierarchy_camel.lvl0)',
|
||||
'unordered(hierarchy.lvl0)',
|
||||
'unordered(hierarchy_camel.lvl1)',
|
||||
'unordered(hierarchy.lvl1)',
|
||||
'unordered(hierarchy_camel.lvl2)',
|
||||
'unordered(hierarchy.lvl2)',
|
||||
'unordered(hierarchy_camel.lvl3)',
|
||||
'unordered(hierarchy.lvl3)',
|
||||
'unordered(hierarchy_camel.lvl4)',
|
||||
'unordered(hierarchy.lvl4)',
|
||||
'unordered(hierarchy_camel.lvl5)',
|
||||
'unordered(hierarchy.lvl5)',
|
||||
'unordered(hierarchy_camel.lvl6)',
|
||||
'unordered(hierarchy.lvl6)',
|
||||
'content'
|
||||
],
|
||||
distinct: true,
|
||||
attributeForDistinct: 'url',
|
||||
customRanking: [
|
||||
'desc(weight.pageRank)',
|
||||
'desc(weight.level)',
|
||||
'asc(weight.position)'
|
||||
],
|
||||
ranking: [
|
||||
'words',
|
||||
'filters',
|
||||
'typo',
|
||||
'attribute',
|
||||
'proximity',
|
||||
'exact',
|
||||
'custom'
|
||||
],
|
||||
highlightPreTag: '<span class="algolia-docsearch-suggestion--highlight">',
|
||||
highlightPostTag: '</span>',
|
||||
minWordSizefor1Typo: 3,
|
||||
minWordSizefor2Typos: 7,
|
||||
allowTyposOnNumericTokens: false,
|
||||
minProximity: 1,
|
||||
ignorePlurals: true,
|
||||
advancedSyntax: true,
|
||||
attributeCriteriaComputedByMinProximity: true,
|
||||
removeWordsIfNoResults: 'allOptional'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
<style>
|
||||
img[src="/search.png"] {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,217 @@
|
||||
# Barra Lateral {#sidebar}
|
||||
|
||||
La barra lateral es el bloque de navegación principal de su documentación. Puede configurar el menú de la barra lateral en [`themeConfig.sidebar`](./default-theme-config#sidebar).
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Guia',
|
||||
items: [
|
||||
{ text: 'Introducción', link: '/introduction' },
|
||||
{ text: 'Iniciando', link: '/getting-started' },
|
||||
...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Conceptos básicos {#the-basics}
|
||||
|
||||
La forma más sencilla del menú de la barra lateral es pasar una único _array_ de links. El elemento de primer nivel define la "sección" de la barra latera. debe contener `text`, cuál es el título de la sección, y `items` que son los propios enlaces de navegación.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Título de la sección A',
|
||||
items: [
|
||||
{ text: 'Item A', link: '/item-a' },
|
||||
{ text: 'Item B', link: '/item-b' },
|
||||
...
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Título de la sección B',
|
||||
items: [
|
||||
{ text: 'Item C', link: '/item-c' },
|
||||
{ text: 'Item D', link: '/item-d' },
|
||||
...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Cada `link` debe especificar la ruta al archivo en sí comenzando con `/`.
|
||||
Si agrega una barra al final del enlace, mostrará el `index.md` del directorio correspondiente.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Guia',
|
||||
items: [
|
||||
// Esto muestra la página `/guide/index.md`.
|
||||
{ text: 'Introducción', link: '/guide/' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Puede anidar aún más elementos de la barra lateral hasta 6 niveles de profundidad contando desde el nivel raíz. Tenga en cuenta que los niveles superiores a 6 se ignorarán y no se mostrarán en la barra lateral.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Nivel 1',
|
||||
items: [
|
||||
{
|
||||
text: 'Nivel 2',
|
||||
items: [
|
||||
{
|
||||
text: 'Nivel 3',
|
||||
items: [
|
||||
...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Varias Barras Laterales {#multiple-sidebars}
|
||||
|
||||
Puede mostrar una barra lateral diferente según la ruta de la página. Por ejemplo, como se muestra en este sitio, es posible que desee crear secciones separadas de contenido en su documentación, como la página "Guía" y la página "Configuración".
|
||||
|
||||
Para hacer esto, primero organice sus páginas en directorios para cada sección deseada:
|
||||
|
||||
```
|
||||
.
|
||||
├─ guide/
|
||||
│ ├─ index.md
|
||||
│ ├─ one.md
|
||||
│ └─ two.md
|
||||
└─ config/
|
||||
├─ index.md
|
||||
├─ three.md
|
||||
└─ four.md
|
||||
```
|
||||
|
||||
Luego actualice su configuración para definir su barra lateral para cada sección. Esta vez debes pasar un objeto en lugar de un array.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: {
|
||||
// Esta barra lateral se muestra cuando un usuario
|
||||
// está en el directorio `guide`.
|
||||
'/guide/': [
|
||||
{
|
||||
text: 'Guia',
|
||||
items: [
|
||||
{ text: 'Índice', link: '/guide/' },
|
||||
{ text: 'Um', link: '/guide/one' },
|
||||
{ text: 'Dois', link: '/guide/two' }
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
// Esta barra lateral se muestra cuando un usuario
|
||||
// está en el directorio `config`.
|
||||
'/config/': [
|
||||
{
|
||||
text: 'Configuración',
|
||||
items: [
|
||||
{ text: 'Índice', link: '/config/' },
|
||||
{ text: 'Tres', link: '/config/three' },
|
||||
{ text: 'Cuatro', link: '/config/four' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Grupos Retráctiles en la Barra Lateral {#collapsible-sidebar-groups}
|
||||
|
||||
Adicionando una opción `collapsed` al grupo de la barra lateral, muestra un botón para ocultar/mostrar cada sección
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Título de la sección A',
|
||||
collapsed: false,
|
||||
items: [...]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Todas las secciones están 'abiertas' de forma predeterminada. Si desea que estén 'cerrados' al cargar la página inicial, configure la opción `collapsed` como `true`.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Título de la sección A',
|
||||
collapsed: true,
|
||||
items: [...]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `useSidebar` <Badge type="info" text="composable" />
|
||||
|
||||
Devuelve datos relacionados con la barra lateral. El objeto devuelto tiene el siguiente tipo:
|
||||
|
||||
```ts
|
||||
export interface DocSidebar {
|
||||
isOpen: Ref<boolean>
|
||||
sidebar: ComputedRef<DefaultTheme.SidebarItem[]>
|
||||
sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
|
||||
hasSidebar: ComputedRef<boolean>
|
||||
hasAside: ComputedRef<boolean>
|
||||
leftAside: ComputedRef<boolean>
|
||||
isSidebarEnabled: ComputedRef<boolean>
|
||||
open: () => void
|
||||
close: () => void
|
||||
toggle: () => void
|
||||
}
|
||||
```
|
||||
|
||||
**Exemplo:**
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useSidebar } from 'vitepress/theme'
|
||||
|
||||
const { hasSidebar } = useSidebar()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="hasSidebar">Sólo visible cuando existe la barra lateral
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@ -0,0 +1,258 @@
|
||||
<script setup>
|
||||
import { VPTeamMembers } from 'vitepress/theme'
|
||||
|
||||
const members = [
|
||||
{
|
||||
avatar: 'https://github.com/yyx990803.png',
|
||||
name: 'Evan You',
|
||||
title: 'Criador',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/yyx990803' },
|
||||
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
|
||||
]
|
||||
},
|
||||
{
|
||||
avatar: 'https://github.com/kiaking.png',
|
||||
name: 'Kia King Ishii',
|
||||
title: 'Desenvolvedor',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/kiaking' },
|
||||
{ icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
# Página de Equipo {#team-page}
|
||||
|
||||
Si desea presentar a su equipo, puede utilizar componentes del equipo para crear la página del equipo. Hay dos formas de utilizar estos componentes. Una es incrustarlo en la página del documento y otra es crear una página de equipo completa.
|
||||
|
||||
## Mostrar miembros del equipo en una página {#show-team-members-in-a-page}
|
||||
|
||||
Puedes usar el componente `<VPTeamMembers>` expuesto en `vitepress/theme` para mostrar una lista de los miembros del equipo en cualquier página.
|
||||
|
||||
```html
|
||||
<script setup>
|
||||
import { VPTeamMembers } from 'vitepress/theme'
|
||||
|
||||
const members = [
|
||||
{
|
||||
avatar: 'https://www.github.com/yyx990803.png',
|
||||
name: 'Evan You',
|
||||
title: 'Criador',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/yyx990803' },
|
||||
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
|
||||
]
|
||||
},
|
||||
...
|
||||
]
|
||||
</script>
|
||||
|
||||
# Nuestro equipo
|
||||
|
||||
Saluda a nuestro increible equipo.
|
||||
|
||||
<VPTeamMembers size="small" :members="members" />
|
||||
```
|
||||
|
||||
El código anterior mostrará a un miembro del equipo en un elemento similar a una tarjeta. Debería mostrar algo similar a lo siguiente.
|
||||
|
||||
<VPTeamMembers size="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).
|
||||
|
||||
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.
|
||||
|
||||
Si tienes una gran cantidad de miembros o simplemente deseas más espacio para exhibir a los miembros del equipo, considere [crear una página de equipo completa.](#create-a-full-team-page)
|
||||
|
||||
## Creando una página de equipo completa {#create-a-full-team-page}
|
||||
|
||||
En lugar de agregar miembros del equipo a la página del documento, también puede crear una página de equipo completa, del mismo modo que puede crear una [Página Inicial](./default-theme-home-page) personalizada.
|
||||
|
||||
Para crear una página de equipo, primero cree un nuevo md. El nombre del archivo no importa, pero aquí lo llamaremos `team.md`. En este archivo, configure la opción `layout: page` desde frontmatter, y luego puedes componer la estructura de tu página usando componentes `TeamPage`.
|
||||
|
||||
```html
|
||||
---
|
||||
layout: page
|
||||
---
|
||||
<script setup>
|
||||
import {
|
||||
VPTeamPage,
|
||||
VPTeamPageTitle,
|
||||
VPTeamMembers
|
||||
} from 'vitepress/theme'
|
||||
|
||||
const members = [
|
||||
{
|
||||
avatar: 'https://www.github.com/yyx990803.png',
|
||||
name: 'Evan You',
|
||||
title: 'Creador',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/yyx990803' },
|
||||
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
|
||||
]
|
||||
},
|
||||
...
|
||||
]
|
||||
</script>
|
||||
|
||||
<VPTeamPage>
|
||||
<VPTeamPageTitle>
|
||||
<template #title>
|
||||
Nuestro equipo
|
||||
</template>
|
||||
<template #lead>
|
||||
El desarrollo de VitePress está guiado por un equipo internacional,
|
||||
Algunos de los miembros han elegido aparecer a continuación.
|
||||
</template>
|
||||
</VPTeamPageTitle>
|
||||
<VPTeamMembers
|
||||
:members="members"
|
||||
/>
|
||||
</VPTeamPage>
|
||||
```
|
||||
|
||||
Al crear una página de equipo completa, recuerde agrupar todos los componentes con el componente `<VPTeamPage>`. Este componente garantizará que todos los componentes anidados relacionados con el equipo obtengan la estructura de diseño adecuada, como los espacios.
|
||||
|
||||
El componente `<VPPageTitle>` adiciona la sección de título de la página. El título es `<h1>`. Use los _slots_ `#title` y `#lead` para poder documentar sobre su equipo.
|
||||
|
||||
`<VPMembers>` funciona igual que cuando se usa en una página de documento. Mostrará la lista de miembros.
|
||||
|
||||
### Agregar secciones para dividir a los miembros del equipo {#add-sections-to-divide-team-members}
|
||||
|
||||
Puede agregar "secciones" a la página de su equipo. Por ejemplo, puede tener diferentes tipos de miembros del equipo, como miembros del equipo central y socios de la comunidad. Puede dividir a estos miembros en secciones para explicar mejor las funciones de cada grupo.
|
||||
|
||||
Para poder hacerlo, agregue al componente `<VPTeamPageSection>` al archivo `team.md` que creamos anteriormente.
|
||||
|
||||
```html
|
||||
---
|
||||
layout: page
|
||||
---
|
||||
<script setup>
|
||||
import {
|
||||
VPTeamPage,
|
||||
VPTeamPageTitle,
|
||||
VPTeamMembers,
|
||||
VPTeamPageSection
|
||||
} from 'vitepress/theme'
|
||||
|
||||
const coreMembers = [...]
|
||||
const partners = [...]
|
||||
</script>
|
||||
|
||||
<VPTeamPage>
|
||||
<VPTeamPageTitle>
|
||||
<template #title>Nuestro equipo</template>
|
||||
<template #lead>...</template>
|
||||
</VPTeamPageTitle>
|
||||
<VPTeamMembers size="medium" :members="coreMembers" />
|
||||
<VPTeamPageSection>
|
||||
<template #title>Amigos</template>
|
||||
<template #lead>...</template>
|
||||
<template #members>
|
||||
<VPTeamMembers size="small" :members="partners" />
|
||||
</template>
|
||||
</VPTeamPageSection>
|
||||
</VPTeamPage>
|
||||
```
|
||||
|
||||
El componente `<VPTeamPageSection>` Puede tener los _slots_ `#title` y `#lead` similares al componente `VPTeamPageTitle`, y también al _slot_ `#members` para mostrar a los miembros del equipo.
|
||||
|
||||
Recuerde colocar el componente `<VPTeamMembers>` dentro del _slot_ `#members`.
|
||||
|
||||
## `<VPTeamMembers>`
|
||||
|
||||
El componente `<VPTeamMembers>` muestra una determinada lista de miembros.
|
||||
|
||||
```html
|
||||
<VPTeamMembers
|
||||
size="medium"
|
||||
:members="[
|
||||
{ avatar: '...', name: '...' },
|
||||
{ avatar: '...', name: '...' },
|
||||
...
|
||||
]"
|
||||
/>
|
||||
```
|
||||
|
||||
```ts
|
||||
interface Props {
|
||||
// Tamaño de cada miembro. El valor predeterminado es `medium`.
|
||||
size?: 'small' | 'medium'
|
||||
|
||||
// Lista de miembros que se mostrará.
|
||||
members: TeamMember[]
|
||||
}
|
||||
|
||||
interface TeamMember {
|
||||
// Imagen de avatar de miembro.
|
||||
avatar: string
|
||||
|
||||
// Nombre del miembro.
|
||||
name: string
|
||||
|
||||
// Título a ser mostrado a bajo del nombre del miembro.
|
||||
// Ej.: Desarrollador, Ingeniero de Software, etc.
|
||||
title?: string
|
||||
|
||||
// Organización a la que pertenece al miembro.
|
||||
org?: string
|
||||
|
||||
// URL de la organización.
|
||||
orgLink?: string
|
||||
|
||||
// Descripción del miembro.
|
||||
desc?: string
|
||||
|
||||
// Links sociales, por ejemplo, GitHub, Twitter, etc.
|
||||
// Puedes pasar un objeto de Links Sociales aquí.
|
||||
// Vea: https://vitepress.dev/reference/default-theme-config.html#sociallinks
|
||||
links?: SocialLink[]
|
||||
|
||||
// URL de la página del patrocinador del miembro.
|
||||
sponsor?: string
|
||||
|
||||
// Texto para enlace del patrocinador. El valor predeterminado es 'Sponsor'.
|
||||
actionText?: string
|
||||
}
|
||||
```
|
||||
|
||||
## `<VPTeamPage>`
|
||||
|
||||
El componente raíz al crear una página de equipo completa. Sólo acepta una _slot_. Aplicará estilo a todos los componentes anteriores relacionados con el equipo.
|
||||
|
||||
## `<VPTeamPageTitle>`
|
||||
|
||||
Agrega la sección "título" a la página. Es mejor usarlo desde el principio debajo `<VPTeamPage>`. Acepta los _slots_ `#title` y `#lead`.
|
||||
|
||||
```html
|
||||
<VPTeamPage>
|
||||
<VPTeamPageTitle>
|
||||
<template #title>
|
||||
Nuestro equipo
|
||||
</template>
|
||||
<template #lead>
|
||||
El desarrollo de VitePress está guiado por un equipo internacional,
|
||||
Algunos de los miembros han elegido aparecer a continuación.
|
||||
</template>
|
||||
</VPTeamPageTitle>
|
||||
</VPTeamPage>
|
||||
```
|
||||
|
||||
## `<VPTeamPageSection>`
|
||||
|
||||
Crea una 'sección' en la página del equipo. Aceptar los _slots_ `#title`, `#lead` y `#members`. Puedes agregar tantas secciones como quieras dentro `<VPTeamPage>`.
|
||||
|
||||
```html
|
||||
<VPTeamPage>
|
||||
...
|
||||
<VPTeamPageSection>
|
||||
<template #title>Amigos</template>
|
||||
<template #lead>Lorem ipsum...</template>
|
||||
<template #members>
|
||||
<VPTeamMembers :members="data" />
|
||||
</template>
|
||||
</VPTeamPageSection>
|
||||
</VPTeamPage>
|
||||
```
|
||||
Loading…
Reference in new issue