Página Inicial

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.

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

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.

---
layout: home

hero:
  name: VitePress
  text: Generador de sitios web estáticos 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
---

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'

  // Etiqueta 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

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.

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

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
}

Sección de caracteristicas

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.

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

interface Feature {
  // Muestra el icono en cada cuadro de funció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.
  //
  // ej. `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`.
  //
  // ej. `Sepa más`, `Visitar página`, etc.
  linkText?: string

  // Atributo rel de enlace para la opción `link`.
  //
  // ej. `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
    }