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.
169 lines
4.5 KiB
169 lines
4.5 KiB
# 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 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
|
|
---
|
|
```
|
|
|
|
```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'
|
|
|
|
// 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 {#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 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
|
|
}
|
|
```
|