mirror of https://github.com/vuejs/vitepress
Merge pull request #16 from viniciusdeliz/5-docspt-i18n-translate-referencedefault-theme-homepagemd
docs(pt) i18n: Create and translate `docs/pt/reference/default-theme-…pull/3531/head
viniciusdeliz
2 years ago
committed by
GitHub
commit
21492dd9bb
@ -0,0 +1,168 @@
|
||||
# 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](./frontmatter-config).
|
||||
|
||||
```yaml
|
||||
---
|
||||
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_.
|
||||
|
||||
```yaml
|
||||
---
|
||||
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
|
||||
---
|
||||
```
|
||||
|
||||
```ts
|
||||
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`.
|
||||
|
||||
```css
|
||||
: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ê.
|
||||
|
||||
```css
|
||||
: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.
|
||||
|
||||
```yaml
|
||||
---
|
||||
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...
|
||||
---
|
||||
```
|
||||
|
||||
```ts
|
||||
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
|
||||
}
|
||||
```
|
||||
Loading…
Reference in new issue