mirror of https://github.com/vuejs/vitepress
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
222 lines
4.9 KiB
222 lines
4.9 KiB
---
|
|
outline: deep
|
|
---
|
|
|
|
# Configuración Frontmatter {#frontmatter-config}
|
|
|
|
Frontmatter permite la configuración basada en páginas. En cada archivo markdown, puede utilizar la configuración de frontmatter para anular las opciones de configuración a nivel de sitio o tema. Además, hay opciones de configuración que sólo se pueden establecer en frontmatter.
|
|
|
|
Ejemplo de uso:
|
|
|
|
```md
|
|
---
|
|
title: Documentación con VitePress
|
|
editLink: true
|
|
---
|
|
```
|
|
|
|
Puede acceder a los datos del frontmatter a través de la variable global `$frontmatter` en expresiones Vue:
|
|
|
|
```md
|
|
{{ $frontmatter.title }}
|
|
```
|
|
|
|
## title
|
|
|
|
- Tipo: `string`
|
|
|
|
Título de la página. Es lo mismo que [config.title](./site-config#title), y anula la configuración a nivel de sitio.
|
|
|
|
```yaml
|
|
---
|
|
title: VitePress
|
|
---
|
|
```
|
|
|
|
## titleTemplate
|
|
|
|
- Tipo: `string | boolean`
|
|
|
|
El sufijo del título. Es lo mismo que [config.titleTemplate](./site-config#titletemplate), y anula la configuración a nivel de sitio.
|
|
|
|
```yaml
|
|
---
|
|
title: VitePress
|
|
titleTemplate: Generador de sitios web estáticos con Vite & Vue
|
|
---
|
|
```
|
|
|
|
## descripción
|
|
|
|
- Tipo: `string`
|
|
|
|
Descripción de la página. Es lo mismo que [config.description](./site-config#description), y anula la configuración a nivel de sitio.
|
|
|
|
```yaml
|
|
---
|
|
description: VitePress
|
|
---
|
|
```
|
|
|
|
## head
|
|
|
|
- Tipo: `HeadConfig[]`
|
|
|
|
Especifica etiquetas de encabezado adicionales que se inyectarán en la página actual. Se agregarán después de las etiquetas principales inyectadas por la configuración a nivel de sitio.
|
|
|
|
```yaml
|
|
---
|
|
head:
|
|
- - meta
|
|
- name: description
|
|
content: hello
|
|
- - meta
|
|
- name: keywords
|
|
content: super duper SEO
|
|
---
|
|
```
|
|
|
|
```ts
|
|
type HeadConfig =
|
|
| [string, Record<string, string>]
|
|
| [string, Record<string, string>, string]
|
|
```
|
|
|
|
## Solo Tema Predeterminado {#default-theme-only}
|
|
|
|
Las siguientes opciones de frontmatter solo se aplican cuando se usa el tema predeterminado.
|
|
|
|
### layout
|
|
|
|
- Tipo: `doc | home | page`
|
|
- Predeterminado: `doc`
|
|
|
|
Determina el layout de la página.
|
|
|
|
- `doc` - Aplica estilos de documentación por defecto al contenido markdown.
|
|
- `home` - Layout especial para la "Página Inicial". Puedes agregar opciones extras como `hero` y `features` para crear rapidamente una hermosa página inicial.
|
|
- `page` - Se comporta de manera similar a `doc`, pero no aplica estilos al contenido. Útil cuando desea crear una página totalmente personalizada.
|
|
|
|
```yaml
|
|
---
|
|
layout: doc
|
|
---
|
|
```
|
|
|
|
### hero <Badge type="info" text="apenas para página inicial" />
|
|
|
|
Define el contenido de la sección _hero_ en la página inicial cuando `layout` está definido como `home`. Más detalles en [Tema Predeterminado: Página Inicial](./default-theme-home-page).
|
|
|
|
### features <Badge type="info" text="apenas para página inicial" />
|
|
|
|
Define los elementos que se mostrarán en la sección de características cuando `layout` está definido como `home`. Más detalles en [Tema Predeterminado: Página Inicial](./default-theme-home-page).
|
|
|
|
### navbar
|
|
|
|
- Tipo: `boolean`
|
|
- Predeterminado: `true`
|
|
|
|
Se debe mostrar una [barra de navegación](./default-theme-nav).
|
|
|
|
```yaml
|
|
---
|
|
navbar: false
|
|
---
|
|
```
|
|
|
|
### sidebar
|
|
|
|
- Tipo: `boolean`
|
|
- Predeterminado: `true`
|
|
|
|
Se debe mostrar una [barra lateral](./default-theme-sidebar).
|
|
|
|
```yaml
|
|
---
|
|
sidebar: false
|
|
---
|
|
```
|
|
|
|
### aside
|
|
|
|
- Tipo: `boolean | 'left'`
|
|
- Predeterminado: `true`
|
|
|
|
Define la localización del componente aside en el layout `doc`.
|
|
|
|
Configurar este valor como `false` evita que se muestre el elemento lateral.\
|
|
Configurar este valor como `true` presenta el lado de la derecha.\
|
|
Configurar este valor como `'left'` presenta el lado de la izquierda.
|
|
|
|
```yaml
|
|
---
|
|
aside: false
|
|
---
|
|
```
|
|
|
|
### outline
|
|
|
|
- Tipo: `number | [number, number] | 'deep' | false`
|
|
- Predeterminado: `2`
|
|
|
|
Los niveles del encabezado en _outline_ que se mostrará para la página. Es lo mismo que [config.themeConfig.outline.level](./default-theme-config#outline), y anula el valor establecido en la configuración a nivel de sitio.
|
|
|
|
### lastUpdated
|
|
|
|
- Tipo: `boolean | Date`
|
|
- Predeterminado: `true`
|
|
|
|
Se debe mostrar el texto de [última actualización](./default-theme-last-updated) en el pie de página de la página actual. Si se especifica una fecha y hora específicas, se mostrarán en lugar de la hora de la última modificación de git.
|
|
|
|
```yaml
|
|
---
|
|
lastUpdated: false
|
|
---
|
|
```
|
|
|
|
### editLink
|
|
|
|
- Tipo: `boolean`
|
|
- Predeterminado: `true`
|
|
|
|
Se debe mostrar el [link de edición](./default-theme-edit-link) en el pie de página de la página actual.
|
|
|
|
```yaml
|
|
---
|
|
editLink: false
|
|
---
|
|
```
|
|
|
|
### footer
|
|
|
|
- Tipo: `boolean`
|
|
- Predeterminado: `true`
|
|
|
|
Se debe mostrar el [pie de página](./default-theme-footer).
|
|
|
|
```yaml
|
|
---
|
|
footer: false
|
|
---
|
|
```
|
|
|
|
### pageClass
|
|
|
|
- Tipo: `string`
|
|
|
|
Agrega un nombre de clase adicional a una página específica.
|
|
|
|
```yaml
|
|
---
|
|
pageClass: custom-page-class
|
|
---
|
|
```
|
|
|
|
Luego puede personalizar los estilos para esta página específica en el archivo. `.vitepress/theme/custom.css`:
|
|
|
|
```css
|
|
.custom-page-class {
|
|
/* estilos especificos de la página */
|
|
}
|
|
```
|