Páginas

Las páginas son archivos que viven en el subdirectorio src/pages/ de tu proyecto de Astro. Son responsables de manejar el enrutamiento, la carga de datos y el diseño general de cada página de tu sitio web.

Archivos de página admitidos

Astro admite los siguientes tipos de archivos en el directorio src/pages/:

.astro
.md
.mdx (con la integración de MDX instalada)
.html
.js/.ts (como endpoints)

Enrutamiento basado en archivos

Astro aprovecha una estrategia de enrutamiento llamada enrutamiento basado en archivos. Cada archivo en tu directorio src/pages/ se convierte en un endpoint en tu sitio web según su ruta de archivo.

Un solo archivo también puede generar múltiples páginas mediante el enrutamiento dinámico. Esto te permite crear páginas incluso si tu contenido vive fuera del directorio especial /pages/, como en una colección de contenido o un CMS.

Lee más sobre el enrutamiento en Astro.

Enlaces entre páginas

Escribe elementos <a> HTML estándar en tus páginas de Astro para enlazar a otras páginas de tu sitio web. Utiliza una ruta de URL relativa a tu dominio raíz como enlace, no una ruta de archivo relativa.

Por ejemplo, para enlazar a https://example.com/authors/sonali/ desde cualquier otra página en example.com:

Read more <a href="/authors/sonali/">about Sonali</a>.

Páginas de Astro

Las páginas de Astro utilizan la extensión de archivo .astro y admiten las mismas funciones que los componentes de Astro.

---
---
<html lang="en">
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

Una página debe producir un documento HTML completo. Si no se incluye explíciamente, Astro agregará la declaración <!DOCTYPE html> necesaria y el contenido de <head> a cualquier componente .astro ubicado dentro de src/pages/ por defecto. Puedes optar por no participar en este comportamiento para cada componente marcándolo como una página parcial.

Para evitar repetir los mismos elementos HTML en cada página, puedes mover los elementos comunes de <head> y <body> a tus propios componentes de layout. Puedes utilizar tantos o tan pocos componentes de layout como desees.

---
import MySiteLayout from "../layouts/MySiteLayout.astro";
---
<MySiteLayout>
  <p>My page content, wrapped in a layout!</p>
</MySiteLayout>

Lee más sobre los componentes de layout en Astro.

Páginas Markdown/MDX

Astro también trata cualquier archivo Markdown (.md) dentro de src/pages/ como páginas en tu sitio web final. Si tienes la integración de MDX instalada, también trata los archivos MDX (.mdx) de la misma manera.

Los archivos Markdown pueden utilizar la propiedad frontmatter especial layout para especificar un componente de layout que envolverá su contenido Markdown en un documento de página <html>...</html> completo.

---
layout: ../layouts/MySiteLayout.astro
title: My Markdown page
---
# Title

This is my page, written in **Markdown.**

Lee más sobre Markdown en Astro.

Páginas HTML

Los archivos con la extensión de archivo .html se pueden colocar en el directorio src/pages/ y utilizar directamente como páginas en tu sitio web. Ten en cuenta que algunas características clave de Astro no son compatibles con los componentes HTML.

Página de error 404 personalizada

Para una página de error 404 personalizada, puedes crear un archivo 404.astro o 404.md en src/pages.

Esto compilará a una página 404.html. La mayoría de los servicios de despliegue la encontrarán y la utilizarán.

Página de error 500 personalizada

Para que se muestre una página de error 500 personalizada para páginas que se renderizan bajo demanda, crea el archivo src/pages/500.astro. Esta página personalizada no está disponible para páginas prerenderizadas.

Si ocurre un error al renderizar esta página, se mostrará al visitante la página de error 500 predeterminada de tu proveedor de alojamiento.

Añadido en: astro@4.10.3

Durante el desarrollo, si tienes un 500.astro, el error lanzado en tiempo de ejecución se registra en tu terminal, en lugar de mostrarse en la superposición de errores.

`error`

Añadido en: astro@4.11.0

src/pages/500.astro es una página especial a la que se le pasa automáticamente una prop error para cualquier error lanzado durante el renderizado. Esto te permite usar los detalles de un error (por ejemplo, de una página, de un middleware, etc.) para mostrar información a tu visitante.

El tipo de datos de la prop error puede ser cualquier cosa, lo que puede afectar cómo tipas o usas el valor en tu código:

---
interface Props {
  error: unknown;
}

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

Para evitar la filtración de información sensible al mostrar contenido de la prop error, considera evaluar el error primero y devolver contenido adecuado según el error lanzado. Por ejemplo, debes evitar mostrar la pila de llamadas (stack) del error, ya que contiene información sobre cómo está estructurado tu código en el servidor.

Parciales de página

Añadido en: astro@3.4.0

Los parciales son componentes de página ubicados dentro de src/pages/ que no están destinados a renderizarse como páginas completas.

Al igual que los componentes ubicados fuera de esta carpeta, estos archivos no incluyen automáticamente la declaración <!DOCTYPE html>, ni ningún contenido de <head> como estilos y scripts con ámbito.

Sin embargo, debido a que se encuentran en el directorio especial src/pages/, el HTML generado está disponible en una URL correspondiente a su ruta de archivo. Esto permite que una biblioteca de renderizado (por ejemplo, htmx, Stimulus, jQuery) acceda a él en el cliente y cargue secciones de HTML dinámicamente en una página sin necesidad de actualizar el navegador o navegar por las páginas.

Los parciales, cuando se combinan con una biblioteca de renderizado, proporcionan una alternativa a las islas de Astro y a las etiquetas <script> para construir contenido dinámico en Astro.

Los archivos de página que pueden exportar un valor para partial (por ejemplo, .astro y .mdx, pero no .md) se pueden marcar como parciales.

---
export const partial = true;
---
<li>I'm a partial!</li>

Uso con una biblioteca

Los parciales se utilizan para actualizar dinámicamente una sección de una página utilizando una biblioteca como htmx.

El siguiente ejemplo muestra un atributo hx-post establecido en la URL de un parcial. El contenido de la página parcial se utilizará para actualizar el elemento HTML de destino en esta página.

<html>
  <head>
    <title>My page</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">Target here</div>

      <button hx-post="/partials/clicked/"
        hx-trigger="click"
        hx-target="#parent-div"
        hx-swap="innerHTML"
      >
        Click Me!
      </button>
    </section>
  </body>
</html>

El parcial .astro debe existir en la ruta de archivo correspondiente e incluir una exportación que defina la página como un parcial:

---
export const partial = true;
---
<div>I was clicked!</div>

Consulta la documentación de htmx para obtener más detalles sobre el uso de htmx.

Contribuir Comunidad Patrocinar