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 manipular o roteamento, o carregamento de dados e o layout geral de todas as páginas do seu site.

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 (EN))

Roteamento baseado em arquivos

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

Um único arquivo também pode gerar múltiplas páginas utilizando roteamento dinâmico (EN). Isso permite que você crie páginas mesmo que seu conteúdo esteja fora do diretório especial /pages/, como em uma coleção de conteúdo (EN) ou em um CMS.

Leia mais sobre Roteamento no Astro (EN).

Link Entre Páginas

Escreva elementos <a> padrão HTML em suas páginas Astro para ligar a outras páginas no site. Utilize como link o caminho URL relativo ao domínio raiz, não um caminho de arquivo relativo.

Por exemplo, para acessar https://exemplo.com/autores/sonali/ de qualquer 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>

Uma página deve produzir um documento HTML completo. Se não for explicitamente incluído, Astro adicionará a declaração <!DOCTYPE html> necessária e conteúdo <head> em qualquer componente .astro localizado em src/pages/ por padrão. Você pode optar não utilizar esse comportamento de maneira individual por componente, marcando-o como uma página parcial.

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 trata quaisquer arquivos Markdown (.md) dentro de src/pages/ como páginas em seu site final. Se você tiver a Integração MDX instalada (EN), ele tratará arquivos MDX (.mdx) da mesma forma.

Arquivos Markdown podem usar a propriedade especial layout do frontmatter para especificar um componente de layout que envolverá o conteúdo Markdown em um documento de página <html>...</html>.

---
layout: ../layouts/LayoutDoMeuSite.astro
title: Minha página Markdown
---
# Título

Esta é a minha página, escrita em **Markdown.**

Páginas HTML

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

Página de Erro 404 Personalizada

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

Isso construirá uma página 404.html. A maioria dos serviços de deploy (EN) irão encontrá-la e utilizá-la.

Página de Erro 500 Personalizada

Para uma página de erro 500 personalizada aparecer para páginas que são geradas sob demanda (EN), crie o arquivo src/pages/500.astro. Essa página personalizada não está disponível para páginas pré-geradas e não podem ser geradas previamente.

Se um erro ocorrer ao gerar essa página, a página padrão da sua hospedagem será mostrada ao visitante.

Adicionado em: astro@4.10.3

Durante o desenvolvimento, se você tiver um 500.astro, o erro lançado em tempo de execução é registrado em seu terminal, em vez de ser mostrado na janela de erros.

`error`

Adicionado em: astro@4.11.0

src/pages/500.astro é uma página especial que recebe automaticamente uma prop error para qualquer erro lançado durante a apresentação. Isso permite que você use os detalhes de um erro (por exemplo, como de uma página, de um middleware, etc.) para mostrar informações ao seu visitante.

O tipo de dado da prop error pode ser qualquer um, o que pode afetar como você tipa ou usa o valor no seu código:

---
interface Props {
  error: unknown;
}

const { error } = Astro.props;
---
<div>{error instanceof Error ? error.message : "Erro desconhecido"}</div>

Para evitar vazar informações snsíveis ao mostrar o conteúdo da prop error, considere avaliar o erro primeiro, e retornar o conteúdo apropriado baseado no erro lançado. Por exemplo, você deve evitar mostrar a pilha do erro pois ela contém informações sobre como seu código é estruturado no servidor

Páginas Parciais

Adicionado em: astro@3.4.0

Parciais são componentes de página localizados em src/pages/ que não têm como objetivo serem apresentados como páginas completas.

Como componentes localizados fora dessa pasta, esses arquivos não incluem automaticamente a declaração <!DOCTYPE html>, nem qualquer outro conteúdo do <head> como estilos em escopo e scripts.

Entretanto, por estarem localizados no diretório especial src/pages/, o HTML gerado fica disponível em uma URL que correspondente ao caminho do arquivo. Isso permite que uma biblioteca de renderização (por exemplo, htmx, Stimulus ou jQuery) possa acessá-lo no cliente e carregar seções do HTML dinamicamente em uma página sem recarregar o navegador ou navegar entre páginas.

Parciais, quando combinados com uma biblioteca de renderização, proporcionam uma alternativa às Ilhas Astro e tags <script> (EN) na construção de conteúdo dinâmico em Astro.

Arquivos de página que podem exportar um valor para partial (EN) (por exemplo, .astro e .mdx, mas não .md) podem ser marcados como parciais.

---
export const partial = true;
---
<li>Eu sou um parcial!</li>

Usando com uma Biblioteca

Parciais são usadas para atualizar dinamicamente a seção de uma página usando bibliotecas como htmx.

O exemplo a seguir mostra um atributo hx-post direcionado para a URL de uma parcial. O conteúdo da página parcial será usado para atualizar o elemento HTML escolhido na página.

<html>
  <head>
    <title>Minha página</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
  <body>
    <section>
      <div id="parent-div">Alvo aqui</div>

      <button hx-post="/parciais/clicado/"
        hx-trigger="click"
        hx-target="#parent-div"
        hx-swap="innerHTML"
      >
        Clique em mim!
      </button>
    </section>
  </body>
</html>

O parcial .astro deve existir no caminho de arquivo correspondente e incluir uma exportação que o defina como parcial:

---
export const partial = true;
---
<div>Eu fui clicado!</div>

Visite a documentação htmx para mais detalhes sobre como utilizar htmx.

Contribua Comunidade Patrocine