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)
.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.

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>

Uma página deve produzir um documento HTML completo. Se não for explicitamente incluido, Astro adicionará automaticamente declarações necessárias como <!DOCTYPE html> e o conteúdo do <head> em qualquer componente .astro localizado em src/pages/. Você pode optar por 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 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, 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.

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

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

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.

Parciais de páginas

Adicionado em: astro@3.4.0

Parciais são componentes de página localizados em src/pages/ que não tem como objetivo serem renderizados em páginas completas.

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

Porém, por estarem localizados no diretório especial src/pages/, o código HTML gerado fica disponível em uma URL que corresponde ao caminho do arquivo. Isso permite que uma biblioteca de renderização (ex: htmx, Stimulus, jQuery) possa acessá-lo no cliente e carregar sessões do HTML dinamicamente em uma página, sem a necessecidade de um recarregamento ou navegação entre páginas.

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

Arquivos de página que podem exportar um valor (ex: .astro, .mdx) podem ser marcadas como parciais.

Configure um arquivo no diretório src/pages/ para ser uma parcial adicionando a seguinte exportação:

---
export const partial = true;
---

<li>Eu sou uma parcial!</li>

O export const partial deve ser identificável estaticamente. Ele pode conter os seguintes valores.

O booleano true.
Uma variável de ambiente usando import.meta.env como import.meta.env.USE_PARTIALS.

Usando com uma biblioteca

Parciais são usadas para atualizar dinamicamente sessões de uma página usando bibliotecas como htmx.

O exemplo a seguir mostra um atributo hx-post direcionado para uma URL parcial. O conteúdo da página parcial será utilizado 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>
</html>
<section>
  <div id="parent-div">Mude aqui</div>

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

A parcial .astro deve existir no caminho correspondente e incluir uma exportação definindo a página como uma parcial.

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

Visite a documentação do htmx para mais detalhes sobre como utilizá-lo.

Contribua

Comunidade