mirror of https://github.com/vuejs/vitepress
Camilo Parra
1 year ago
commit
fda6b56d41
@ -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>
|
||||
```
|
||||
@ -1,29 +0,0 @@
|
||||
diff --git a/types/index.d.ts b/types/index.d.ts
|
||||
index 7c94aae194faa66ca006ace98cdb0dee82a3e471..0377cace7c4a9653d4ecf963babffd4bd68494b0 100644
|
||||
--- a/types/index.d.ts
|
||||
+++ b/types/index.d.ts
|
||||
@@ -1,10 +1,10 @@
|
||||
-import MarkdownIt = require('markdown-it');
|
||||
-import Token = require('markdown-it/lib/token');
|
||||
-import State = require('markdown-it/lib/rules_core/state_core');
|
||||
+import MarkdownIt from 'markdown-it';
|
||||
+import Token from 'markdown-it/lib/token.mjs';
|
||||
+import StateCore from 'markdown-it/lib/rules_core/state_core.mjs';
|
||||
|
||||
declare namespace anchor {
|
||||
- export type RenderHref = (slug: string, state: State) => string;
|
||||
- export type RenderAttrs = (slug: string, state: State) => Record<string, string | number>;
|
||||
+ export type RenderHref = (slug: string, state: StateCore) => string;
|
||||
+ export type RenderAttrs = (slug: string, state: StateCore) => Record<string, string | number>;
|
||||
|
||||
export interface PermalinkOptions {
|
||||
class?: string,
|
||||
@@ -37,7 +37,7 @@ declare namespace anchor {
|
||||
placement?: 'before' | 'after'
|
||||
}
|
||||
|
||||
- export type PermalinkGenerator = (slug: string, opts: PermalinkOptions, state: State, index: number) => void;
|
||||
+ export type PermalinkGenerator = (slug: string, opts: PermalinkOptions, state: StateCore, index: number) => void;
|
||||
|
||||
export interface AnchorInfo {
|
||||
slug: string;
|
||||
@ -1,13 +0,0 @@
|
||||
diff --git a/dist/rollup-plugin-dts.mjs b/dist/rollup-plugin-dts.mjs
|
||||
index 4a9412285c48c37d03340a086c771f8e61fd82ac..c73cba3bf47550f69011366e37d2ae974f0c9fc0 100644
|
||||
--- a/dist/rollup-plugin-dts.mjs
|
||||
+++ b/dist/rollup-plugin-dts.mjs
|
||||
@@ -675,6 +675,8 @@ function preProcess({ sourceFile }) {
|
||||
const nextToken = children[idx + 1];
|
||||
const isPunctuation = nextToken.kind >= ts.SyntaxKind.FirstPunctuation && nextToken.kind <= ts.SyntaxKind.LastPunctuation;
|
||||
if (isPunctuation) {
|
||||
+ const addSpace = code.slice(token.getEnd(), nextToken.getStart()) != " ";
|
||||
+ code.appendLeft(nextToken.getStart(), `${addSpace ? " " : ""}${defaultExport}`);
|
||||
code.appendLeft(nextToken.getStart(), defaultExport);
|
||||
}
|
||||
else {
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,11 +1,50 @@
|
||||
import type MarkdownIt from 'markdown-it'
|
||||
import type StateCore from 'markdown-it/lib/rules_core/state_core.mjs'
|
||||
import type Token from 'markdown-it/lib/token.mjs'
|
||||
import { escapeHtml } from '../../shared'
|
||||
|
||||
export function restoreEntities(md: MarkdownIt): void {
|
||||
md.core.ruler.disable('text_join')
|
||||
md.renderer.rules.text_special = (tokens, idx) => {
|
||||
if (tokens[idx].info === 'entity') {
|
||||
return tokens[idx].markup // leave as is so Vue can handle it
|
||||
}
|
||||
return md.utils.escapeHtml(tokens[idx].content)
|
||||
md.core.ruler.at('text_join', text_join)
|
||||
md.renderer.rules.text = (tokens, idx) => escapeHtml(tokens[idx].content)
|
||||
}
|
||||
|
||||
function text_join(state: StateCore): void {
|
||||
let curr, last
|
||||
const blockTokens = state.tokens
|
||||
const l = blockTokens.length
|
||||
|
||||
for (let j = 0; j < l; ++j) {
|
||||
if (blockTokens[j].type !== 'inline') continue
|
||||
|
||||
const tokens = blockTokens[j].children || []
|
||||
const max = tokens.length
|
||||
|
||||
for (curr = 0; curr < max; ++curr)
|
||||
if (tokens[curr].type === 'text_special') tokens[curr].type = 'text'
|
||||
|
||||
for (curr = last = 0; curr < max; ++curr)
|
||||
if (
|
||||
tokens[curr].type === 'text' &&
|
||||
curr + 1 < max &&
|
||||
tokens[curr + 1].type === 'text'
|
||||
) {
|
||||
tokens[curr + 1].content =
|
||||
getContent(tokens[curr]) + getContent(tokens[curr + 1])
|
||||
tokens[curr + 1].info = ''
|
||||
tokens[curr + 1].markup = ''
|
||||
} else {
|
||||
if (curr !== last) tokens[last] = tokens[curr]
|
||||
++last
|
||||
}
|
||||
|
||||
if (curr !== last) tokens.length = last
|
||||
}
|
||||
}
|
||||
|
||||
function getContent(token: Token): string {
|
||||
return token.info === 'entity'
|
||||
? token.markup
|
||||
: token.info === 'escape' && token.content === '&'
|
||||
? '&'
|
||||
: token.content
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue