4.5 KiB
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
}