Skip to content

Commit

Permalink
i18n(pt-BR): Update routing.mdx and astro-pages.mdx translations (w…
Browse files Browse the repository at this point in the history 
…ithastro#2412)

* i18n(pt-BR): Update `routing.mdx` translation

* Update `astro-pages.mdx` translation

* Update to most recent changes
  • Loading branch information
@yanthomasdev
yanthomasdev authored Jan 24, 2023
1 parent b0db05e commit 2775158
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 85 deletions.
4 changes: 4 additions & 0 deletions src/pages/pt-br/core-concepts/astro-pages.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ Astro suporta os seguintes tipos de arquivo no diretório `src/pages/`:

Astro se beneficia de uma estratégia de roteamento chamada **roteamento baseado em arquivos**. Cada arquivo em seu diretório `src/pages` se torna um endpoint no seu site com base no seu caminho de arquivo.

Um único arquivo também pode gerar múltiplas páginas utilizando [roteamento dinâmico](/pt-br/core-concepts/routing/#rotas-dinâmicas). Isso te permite criar páginas mesmo que seu conteúdo esteja fora do diretório especial `/pages/`, como em uma [coleção de conteúdo](/pt-br/guides/content-collections/) ou em um [CMS](/pt-br/guides/cms/).

📚 Leia mais sobre [Roteamento no Astro](/pt-br/core-concepts/routing/).

### Link entre páginas
Expand Down Expand Up @@ -62,6 +64,8 @@ import LayoutDoMeuSite from '../layouts/LayoutDoMeuSite.astro';

Astro também trata quaisquer arquivos Markdown (`.md`) dentro de `src/pages/` como páginas no seu website final. Se você tiver a [Integração MDX instalada](/pt-br/guides/integrations-guide/mdx/#installation), ele também irá tratar arquivos MDX (`.mdx`) da mesma forma. Eles são comumente utilizados para páginas cheias de texto como postagens de um blog e documentação.

[Coleções de conteúdo de páginas Markdown ou MDX](/pt-br/guides/content-collections/) em `src/content/` podem ser utilizados para [gerar páginas dinamicamente](/pt-br/core-concepts/routing/#rotas-dinâmicas).

Layouts de página são especialmente úteis para [arquivos Markdown](#páginas-markdownmdx). Arquivos MMarkdown podem utilizar a propriedade especial `layout` do frontmatter para especificar um [componente de layout](/pt-br/core-concepts/layouts/) que irá envolver seu conteúdo Markdown em uma página de documento `<html>...</html>` completo.

```md {3}
Expand Down
200 changes: 115 additions & 85 deletions src/pages/pt-br/core-concepts/routing.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ title: Roteamento
description: Uma introdução a roteamento com Astro.
i18nReady: true
---
import FileTree from '~/components/FileTree.astro'


Astro utiliza **roteamento baseado em arquivos** para gerar as URLs da sua build com base no layout dos arquivos no diretório `src/pages` do seu projeto. Quando um arquivo é adicionado ao diretório `src/pages` do seu projeto, ele é automaticamente disponibilizado como uma rota baseada no seu nome de arquivo.

Expand Down Expand Up @@ -34,103 +36,81 @@ Astro usa [elementos `<a>`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/El

## Rotas dinâmicas

Um único componente de página Astro pode também especificar parâmetros dinâmicos de rota em seu nome de arquivo para gerar múltiplas rotas que cumprem certos critérios. Você pode criar várias páginas relacionadas de uma vez, como páginas de autores, ou uma página para cada categoria de um blog. Parâmetros nomeados te permitem especificar valores para níveis "nomeados" desses caminhos de rotas, e parâmetros rest permitem rotas mais flexíveis que "pegam-tudo".

:::note
Até mesmo páginas e rotas dinamicamente criadas são geradas em tempo de build.
:::

Páginas Astro que criam rotas dinâmicas devem:
Um arquivo de página Astro pode especificar parâmetros de rota dinâmicos em seu nome de arquivo para gerar páginas correspondentes. Por exemplo, você pode criar um arquivo `autores/[autor].astro` que gera uma página de biografia para cada autor no seu blog. `autor` se torna um _parâmetro_ que você pode acessar de dentro da página.

1. usar a notação de `[colchetes]` para identificar os parâmetros dinâmicos
No modo estático padrão do Astro, essas páginas são geradas em tempo de build, e logo, você precisa predeterminar a lista de `autor`es que ganham um arquivo correspondente. No modo SSR, uma página será gerada na requisição para qualquer rota que corresponde.

2. exportar uma função `getStaticPaths()` para especificar exatamente quais caminhos serão pré-renderizados pelo Astro.
### Modo Estático (SSG)

### Parâmetros Nomeados
Por conta de todas as rotas precisarem ser determinadas em tempo de build, uma rota dinãmica precisa exportar um `getStaticPaths()` que retorna um array de objetos com uma propriedade `params`. Cada um desses objetos irá gerar uma rota correspondente.

Você pode gerar rotas com um parâmetro `[nomeado]` providenciando a sua função `getStaticPaths()` os valores para utilizá-la assim:
`[cachorro].astro` define o parâmetro dinâmico `cachorro` em seu nome de arquivo, então os objetos retornados por `getStaticPaths()` devem incluir `cachorro` em suas `params`. A página pode então acessar esse parâmetro utilizando `Astro.params`.

```astro
```astro title="src/pages/cachorros/[cachorro].astro"
---
// src/pages/cachorros/[cachorro].astro
export function getStaticPaths() {
return [
// Gera: /cachorros/clifford
{params: {cachorro: 'clifford'}},
// Gera: /cachorros/rover
{params: {cachorro: 'rover'}},
// Gera: /cachorros/spot
{params: {cachorro: 'spot'}},
];
}
---
```

📚 Aprenda mais sobre [`getStaticPaths()`](/pt-br/reference/api-reference/#getstaticpaths).

Rotas podem ser geradas a partir de múltiplos parâmetros nomeados, a qualquer nível do caminho de arquivo:

- `pages/blog/[slug].astro` → (`/blog/ola-mundo`, `/blog/postagem-2`, etc.)
- `pages/[nomeusuario]/configuracoes.astro` → (`/fred/configuracoes`, `/drew/configuracoes`, etc.)
- `pages/[lingua]-[versao]/info.astro` → (`/en-v1/info`, `/fr-v2/info`, etc.)

#### O objeto `Astro.params`
Componentes Astro que geram rotas dinamicamente tem acesso ao objeto `Astro.params` para cada rota. Isso te permite utilizar as partes geradas de uma URL em seu script e template do componente.

```astro / (id) |{id}/ /(?<!//.*)Astro.params/
---
// Exemplo: src/pages/postagens/[id].astro
const { id } = Astro.params;
const { cachorro } = Astro.params;
---
<p>Postagem: {id}</p>
// Objeto Astro.params passado para a rota `/postagens/abc`
{ "id": "abc" }
<div>Bom garoto, {cachorro}!</div>
```

Múltiplos segmentos dinâmicos de rota podem ser combinados para trabalharem da mesma forma.
Isso irá gerar três páginas: `/cachorros/clifford`, `/cachorros/rover`, and `/cachorros/spot`, cada uma mostrando o nome do cachorro correspondente.

O nome do arquivo pode incluir múltiplos parâmetros, sendo que todos precisam ser inclusos nos objetos `params` em `getStaticPaths()`:

```astro /(?<=const.*)(id|comentario)/
```astro title="src/pages/[lingua]-[versao]/info.astro"
---
// Exemplo: src/pages/postagens/[id]/[comentario].astro
const { id, comentario } = Astro.params;
export function getStaticPaths() {
return [
{params: {lingua: 'en', versao: 'v1'}},
{params: {lingua: 'fr', versao: 'v2'}},
];
}
const { lingua, versao } = Astro.params;
---
// Objeto Astro.params passado para a rota `/postagens/abc/um-comentario`
{ "id": "abc", "comentario": "um-comentario" }
...
```

### Parâmetros Rest
Isso irá gerar `/en-v1/info` e `/fr-v2/info`.

Se você precisa de mais flexibilidade no roteamento de sua URL, você pode utilizar um parâmetro rest no nome do seu arquivo `.astro` como um pega-tudo universal para caminhos de arquivos de qualquer profundidade adicionando três pontos (`...`) dentro de seus colchetes.
Parâmetros podem ser incluidos em partes separadas do caminho, então poderíamos utilizar `src/pages/[lingua]/[versao]/info.astro` com o mesmo `getStaticPaths` para gerar `/en/v1/info` e `/fr/v2/info`.

Por exemplo:
📚 Leia mais sobre [`getStaticPaths()`](/pt-br/reference/api-reference/#getstaticpaths).

- `pages/postagens/[...slug].astro` → (`/postagens/a`, `/postagens/a/b`, `/postagens/a/b/c`, etc.)
#### Parâmetros Rest

Parâmetros correspondentes serão passados como um parâmetro de consulta (`slug` nesse exemplo) para a página.
Se você precisa de mais flexibilidade no roteamento de sua URL, você pode utilizar um [parâmetro rest](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/rest_parameters) (`[...caminho]`) no nome do seu arquivo `.astro` para corresponder caminhos de arquivo de qualquer profundidade:

```json
// Objeto Astro.params passado para a rota `/postagens/a/b/c`
{ "slug": "a/b/c" }
```astro title="src/pages/sequencias/[...caminho].astro"
---
export function getStaticPaths() {
return [
{params: {caminho: 'um/dois/três'}},
{params: {caminho: 'quatro'}},
{params: {caminho: undefined }}
]
}
const { caminho } = Astro.params;
---
...
```

:::tip
Parâmetros rest são opcionais por padrão, então `pages/postagens/[...slug].astro` pode corresponder com `/postagens/` também.
:::

#### Exemplo: Parâmetros rest
Isso irá gerar `/sequencias/um/dois/três`, `/sequencias/quatro` e `/sequencias`. (Definir o parâmetro rest como `undefined` o permite corresponder a página de nível superior.)

Como um exemplo do mundo real, você pode implementar o visualizador de arquivos do GitHub com os seguintes parâmetros nomeados e rest:
Parâmetros rest podem ser utilizados com **outros parâmetros nomeados**. Por exemplo, poderíamos representar o visualizador de arquivos do GitHub com uma rota dinâmica assim:

```
/[org]/[repo]/tree/[branch]/[...arquivo]
```

Nesse exemplo, uma requisição a `/withastro/astro/tree/main/docs/public/favicon.svg` iria resultar nos seguintes parâmetros sendo disponibilizados em sua página:
Nesse exemplo, uma requisição a `/withastro/astro/tree/main/docs/public/favicon.svg` seria dividida nos seguintes parâmetros nomeados:

```js
{
Expand All @@ -141,11 +121,11 @@ Nesse exemplo, uma requisição a `/withastro/astro/tree/main/docs/public/favico
}
```

#### Exemplo: Criar página raiz superior dinamicamente
#### Exemplo: Páginas dinâmicas em múltiplos níveis

Para dinamicamente criar um index.html na raiz (e.x. para conteúdo buscado de um CMS headless), inclua um objeto com `slug: undefined` em sua função `getStaticPaths()`.
Aqui, nós utilizamos um parâmetro (`[...slug]`) e a funcionalidade [`props`](/pt-br/reference/api-reference/#passagem-de-dados-com-props) de `getStaticPaths()` para gerar páginas para slugs de diferentes profundidades.

```astro title="src/pages/[...slug].astro" "slug: undefined"
```astro title="src/pages/[...slug].astro"
---
export async function getStaticPaths() {
const paginas = [
Expand Down Expand Up @@ -185,19 +165,70 @@ const { titulo, texto } = Astro.props;
</html>
```

## Ordem de Prioridade de Rotas
### Modo Servidor (SSR)

É possível que múltiplas rotas correspondam ao mesmo caminho de URL. Por exemplo, cada uma destas rotas iria corresponder a `postagens/criar`:
No [modo SSR](/pt-br/guides/server-side-rendering/), rotas dinâmicas são definidas da mesma forma: inclua colchetes `[param]` ou `[...path]` no nome de seus sarquivos para corresponder a strings ou caminhos arbritários. Porém, já que as rotas não são mais contruídas com antecedência, a página será servida para qualquer rota correspondente. Já que essas não são rotas "estáticas", `getStaticPaths` não deve ser utilizado.

```astro title="src/pages/recursos/[recurso]/[id].astro"
---
const { recurso, id } = Astro.params;
---
<h1>{recurso}: {id}</h1>
```
└── pages/
│ ├── postagens/
│ │ ├── criar.astro
│ │ ├── [pid].astro
│ │ └── [...slug].astro
A página será servida para qualquer valor de `recurso` e `id`: `recursos/usuarios/1`, `recursos/cores/azul`, etc.

#### Modificando o exemplo `[...slug]` para SSR

Já que páginas SSR não podem utilizar `getStaticPaths`, elas não podem receber props. Aqui, nós modificamos nosso [exemplo anterior](#exemplo-páginas-dinâmicas-em-múltiplos-níveis) para funcionar com SSR ao olhar para o valor do parâmetro `slug` em um objeto. Se a rota está na raiz ("/"), o parâmetro slug será `undefined`. Se o valor não existe no objeto, nós redirecionamos para uma página de 404.

```astro title="src/pages/[...slug].astro"
---
const paginas = [
{
slug: undefined,
titulo: "Loja Astro",
texto: "Bem-vindo à loja Astro!",
},
{
slug: "produtos",
titulo: "Produtos Astro",
texto: "Nós temos vários produtos para você",
},
{
slug: "produtos/manual-astro",
titulo: "O manual definitivo do Astro",
texto: "Se você quer aprender Astro, você precisa ler esse livro.",
},
];
const { slug } = Astro.params;
const pagina = paginas.find((pagina) => pagina.slug === slug);
if (!pagina) return Astro.redirect("/404");
const { titulo, texto } = pagina;
---
<html>
<head>
<title>{titulo}</title>
</head>
<body>
<h1>{titulo}</h1>
<p>{texto}</p>
</body>
</html>
```

## Ordem de Prioridade de Rotas

É possível que múltiplas rotas correspondam ao mesmo caminho de URL. Por exemplo, cada uma destas rotas iria corresponder a `postagens/criar`:

<FileTree>
- src/pages/
- postagens/
- criar.astro
- [pid].astro
- [...slug].astro
</FileTree>

Astro precisa saber qual rota deve ser utilizada para construir a página. Para fazer isso, Astro as ordena de acordo com as seguintes regras:

- Rotas estáticas sem parâmetros de caminho terão precedência sobre todas as outras rotas
Expand Down Expand Up @@ -349,16 +380,15 @@ Isso permite que você crie páginas privadas e também co-localizar testes, uti

Neste exemplo, apenas `src/pages/index.astro` e `src/pages/postagens/postagem1.md` serão construídas como rotas de página e arquivos HTML.

```md mark="postagem1.md" mark="index.astro"
src/
└── pages/
├── _diretorio-escondido/
│ ├── pagina1.md
│ └── pagina2.md
├── _pagina-escondida.astro
├── index.astro
└── postagens/
├── _UmComponente.astro
├── _utils.js
└── postagem1.md
```
<FileTree>
- src/pages/
- _diretorio-escondido/
- pagina1.md
- pagina2.md
- _pagina-escondida.astro
- **index.astro**
- postagens/
- _AlgumComponente.astro
- _utils.js
- **postagem1.md**
</FileTree>

0 comments on commit 2775158

Please sign in to comment.