4.3 KiB
Página Inicial
O tema padrão VitePress fornece um layout de página inicial, que você também pode ver em uso na página inicial deste site. Você pode usá-lo em qualquer uma de suas páginas especificando layout: home
em frontmatter.
---
layout: home
---
No entanto, essa opção sozinha não faz muito. Você pode adicionar várias "seções" diferentes pré-modeladas à página inicial definindo opções adicionais como hero
e features
.
Seção Hero
A seção Hero fica no topo da página inicial. Aqui segue como você pode configurar a seção Hero.
---
layout: home
hero:
name: VitePress
text: Gerador de site estático com 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 no GitHub
link: https://github.com/vuejs/vitepress
---
interface Hero {
// A string mostrada acima de `text`. Vem com a cor da marca
// e espera-se que seja curta, como o nome do produto.
name?: string
// O texto principal para a seção hero.
// Isso será definido como uma tag `h1`.
text: string
// Slogan exibido abaixo de `text`.
tagline?: string
// A imagem é exibida ao lado da área de texto e slogan.
image?: ThemeableImage
// Botões acionáveis para exibir na seção hero da página inicial.
actions?: HeroAction[]
}
type ThemeableImage =
| string
| { src: string; alt?: string }
| { light: string; dark: string; alt?: string }
interface HeroAction {
// Tema de cor do botão. Padrão: `brand`.
theme?: 'brand' | 'alt'
// Rótulo do botão.
text: string
// Destino do link do botão.
link: string
// Atributo target do link.
target?: string
// Atributo rel do link.
rel?: string
}
Personalizando a cor do nome
VitePress usa a cor da marca (--vp-c-brand-1
) para name
. No entanto, você pode personalizar essa cor sobrescrevendo a variável --vp-home-hero-name-color
.
:root {
--vp-home-hero-name-color: blue;
}
Você também pode personalizá-la ainda mais combinando --vp-home-hero-name-background
para dar ao name
uma cor degradê.
:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
}
Seção de Funcionalidades
Na seção de funcionalidades, você pode listar qualquer número de funcionalidades que deseja mostrar imediatamente após a seção Hero. Para configurá-la, passe a opção features
para o frontmatter.
Você pode fornecer um ícone para cada funcionalidade, que pode ser um emoji ou qualquer tipo de imagem. Quando o ícone configurado é uma imagem (svg, png, jpeg...), você deve fornecer o ícone com a largura e altura apropriadas; você também pode fornecer a descrição, seu tamanho intrínseco, bem como suas variantes para temas escuros e claros quando necessário.
---
layout: home
features:
- icon: 🛠️
title: Simples e minimalista, sempre
details: Lorem ipsum...
- icon:
src: /cool-feature-icon.svg
title: Outro recurso legal
details: Lorem ipsum...
- icon:
dark: /dark-feature-icon.svg
light: /light-feature-icon.svg
title: Outro recurso legal
details: Lorem ipsum...
---
interface Feature {
// Mostra ícone em cada bloco de funcionalide.
icon?: FeatureIcon
// Título da funcionalidade.
title: string
// Detalhes da funcionalidade.
details: string
// Link quando clicado no componente de funcionalidade.
// O link pode ser interno ou externo.
//
// ex. `guide/reference/default-theme-home-page` ou `https://example.com`
link?: string
// Texto do link a ser exibido dentro do componente de funcionalidade.
// Melhor usado com a opção `link`.
//
// ex. `Saiba mais`, `Visitar página`, etc.
linkText?: string
// Atributo rel do link para a opção `link`.
//
// ex. `external`
rel?: string
// Atributo target do link para a opção `link`.
target?: string
}
type FeatureIcon =
| string
| { src: string; alt?: string; width?: string; height: string }
| {
light: string
dark: string
alt?: string
width?: string
height: string
}