Configuración Frontmatter

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:

---
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:

{{ $frontmatter.title }}

title

• Tipo: string

Título de la página. Es lo mismo que config.title, y anula la configuración a nivel de sitio.

---
title: VitePress
---

titleTemplate

• Tipo: string | boolean

El sufijo del título. Es lo mismo que config.titleTemplate, y anula la configuración a nivel de sitio.

---
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, y anula la configuración a nivel de sitio.

---
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.

---
head:
  - - meta
    - name: description
      content: hello
  - - meta
    - name: keywords
      content: super duper SEO
---

type HeadConfig =
  | [string, Record<string, string>]
  | [string, Record<string, string>, string]

Solo Tema Predeterminado

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.

---
layout: doc
---

hero 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.

features 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.

navbar

• Tipo: boolean
• Predeterminado: true

Se debe mostrar una barra de navegación.

---
navbar: false
---

sidebar

• Tipo: boolean
• Predeterminado: true

Se debe mostrar una barra lateral.

---
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.

---
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, 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 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.

---
lastUpdated: false
---

editLink

• Tipo: boolean
• Predeterminado: true

Se debe mostrar el link de edición en el pie de página de la página actual.

---
editLink: false
---

footer

• Tipo: boolean
• Predeterminado: true

Se debe mostrar el pie de página.

---
footer: false
---

pageClass

• Tipo: string

Agrega un nombre de clase adicional a una página específica.

---
pageClass: custom-page-class
---

Luego puede personalizar los estilos para esta página específica en el archivo. .vitepress/theme/custom.css:

.custom-page-class {
  /* estilos especificos de la página */
}