mirror of https://github.com/vuejs/vitepress
JohnFreddyTutistar
1 year ago
parent
cb228ac5ed
commit
cbd613c505
@ -0,0 +1,168 @@
|
|||||||
|
# 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 estaticos 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'
|
||||||
|
|
||||||
|
// Etqueta 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 funcó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.
|
||||||
|
//
|
||||||
|
// ex. `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`.
|
||||||
|
//
|
||||||
|
// ex. `Saiba mais`, `Visitar página`, etc.
|
||||||
|
linkText?: string
|
||||||
|
|
||||||
|
// Atributo rel de enlace para la opción `link`.
|
||||||
|
//
|
||||||
|
// ex. `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
|
||||||
|
}
|
||||||
|
```
|
||||||
Loading…
Reference in new issue