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