Páginas

Páginas são arquivos que vivem dentro do subdiretório src/pages/ do seu projeto Astro. Elas são responsáveis por lidar com roteamento, carregamento de dados e com o layout geral de cada página do seu website.

Tipos de arquivos suportados

Astro suporta os seguintes tipos de arquivo no diretório src/pages/:

.astro
.md
.mdx (com a Integração MDX instalada (EN))
.html
[.js/.ts] (como endpoints)

Roteamento baseado em arquivos

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. 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 ou em um CMS.

📚 Leia mais sobre Roteamento no Astro.

Link entre páginas

Escreva elementos <a> padrões do HTML em suas páginas Astro para fazer o link para outras páginas em seu site. Utilize como seu link o caminho URL relativo para a raiz do seu domínio, não o caminho relativo para o arquivo.

Por exemplo, para acessar https://exemplo.com/autores/sonali/ de uma outra página dentro de exemplo.com:

Leia mais: <a href="/autores/sonali/">sobre Sonali</a>.

Páginas Astro

Páginas Astro usam a extensão de arquivo .astro e suportam as mesmas funcionalidades que componentes Astro.

<html lang="pt-BR">
  <head>
    <title>Minha página inicial</title>
  </head>
  <body>
    <h1>Bem-vindo ao meu website!</h1>
  </body>
</html>

Para evitar repetir os mesmos elementos HTML em cada página, você pode mover elementos <head> e <body> comuns em seus próprios componentes de layout. Você pode usar quantos componentes de layout você quiser.

---
import LayoutDoMeuSite from '../layouts/LayoutDoMeuSite.astro';
---
<LayoutDoMeuSite>
  <p>O conteúdo da minha página, envolto em um layout!</p>
</LayoutDoMeuSite>

📚 Leia mais sobre componentes de layout no Astro.

Páginas Markdown/MDX

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 (EN), 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 em src/content/ podem ser utilizados para gerar páginas dinamicamente.

Layouts de página são especialmente úteis para arquivos Markdown. Arquivos MMarkdown podem utilizar a propriedade especial layout do frontmatter para especificar um componente de layout que irá envolver seu conteúdo Markdown em uma página de documento <html>...</html> completo.

---
# Example: src/pages/página.md
layout: '../layouts/LayoutDoMeuSite.astro'
title: 'Minha página Markdown'
---
# Título

Está é minha página, escrita em **Markdown.**

📚 Leia mais sobre Markdown no Astro.

Páginas HTML

Arquivos com a extensão de arquivo .html podem ser colocados dentro de src/pages/ e usados diretamente como páginas no seu site. Note que algumas funcionalidades importantes do Astro não são suportadas em Componentes HTML.

Página Customizada de Erro 404

Para uma página customizada de erro 404, você pode criar um arquivo 404.astro ou 404.md em /src/pages.

Isso irá construir uma página 404.html. A maioria dos serviços de deploy irão a encontrar e utilizar.

Criar um problema no GitHub

Send us feedback