Pasar datos a layouts

Dos caminos para los datos

El mecanismo por el que un layout recibe datos depende del tipo de página que lo use, y conviene tener el mapa claro desde el principio. Una página .astro es código: puede importar el layout, invocarlo como componente y pasarle las props que quiera, calculadas al vuelo. Una página .md o .mdx autónoma es contenido: no escribe JSX ni importa nada, así que Astro le da un atajo declarativo —la clave layout en el frontmatter— y se encarga de conectar los cables por dentro.

Ambos caminos terminan en lo mismo: el layout recibe datos por Astro.props y los usa para armar el documento. Cambia quién rellena esas props —tú en el caso .astro, Astro en el caso Markdown— y cómo llegan agrupadas.

Props explícitas desde una página .astro

Es el camino que ya conoces, ahora nombrado como lo que es: la vía manual. La página importa el layout y le pasa atributos, que llegan al layout como Astro.props. Tienes control total sobre qué envías, y puedes enviar cualquier valor serializable: cadenas, números, booleanos, arrays y objetos.

---// src/pages/blog/nota.astroimport BlogLayout from '../../layouts/BlogLayout.astro';const post = { titulo: 'Una nota', etiquetas: ['astro', 'web'] };---<BlogLayout title={post.titulo} tags={post.etiquetas}>  <p>Contenido de la nota.</p></BlogLayout>

La virtud de esta vía es la libertad: los datos pueden venir de donde sea —una constante, un cálculo, una llamada a una API en el frontmatter— y decides exactamente cómo se llaman las props y qué contienen. La contrapartida es que eres tú quien los escribe, uno a uno, en cada página.

El atajo layout en Markdown

Una página Markdown que viva directamente en src/pages no puede importar ni invocar componentes, pero sí puede nombrar el layout que la envolverá con la clave layout de su frontmatter, apuntando a la ruta del fichero del layout.

---layout: ../../layouts/MarkdownPost.astrotitle: Mi post escrito en Markdowndate: 2026-07-10---# Un encabezadoTodo este cuerpo se convierte en HTML y entra en el slot del layout,sin que tengas que escribir una sola etiqueta de componente.

Cuando Astro procesa esta página hace dos cosas por ti. Primero, renderiza el cuerpo Markdown a HTML y lo inyecta en el <slot /> del layout indicado, igual que si lo hubieras envuelto a mano. Segundo, pasa todo el frontmatter de la página al layout, para que este pueda usar el título, la fecha o cualquier otro campo que hayas declarado. El resultado es que una página de contenido puro obtiene su marco completo con una sola línea de configuración.

frontmatter: los metadatos del .md como props

Dentro del layout, el frontmatter del Markdown no llega como props sueltas sino agrupado bajo una única prop llamada frontmatter. Ese objeto contiene todos los campos que declaraste en la cabecera del .md.

---// src/layouts/MarkdownPost.astroconst { frontmatter } = Astro.props;---<!doctype html><html lang="es">  <head>    <meta charset="utf-8" />    <title>{frontmatter.title}</title>  </head>  <body>    <article>      <h1>{frontmatter.title}</h1>      <time>{frontmatter.date}</time>      <slot />    </article>  </body></html>

La diferencia con el camino .astro es de forma, no de fondo. Allí nombrabas cada prop por separado; aquí los datos llegan empaquetados en frontmatter porque su contenido es abierto: Astro no sabe qué campos vas a declarar en tu Markdown, así que los reúne todos bajo un mismo espacio de nombres en lugar de esparcirlos. Junto a frontmatter, Astro inyecta a un layout de Markdown otras props útiles que no tuviste que declarar:

• frontmatter — el objeto con todos los campos de la cabecera del .md.
• file — la ruta absoluta del fichero de origen en tu disco.
• url — la URL pública de la página dentro del sitio.
• headings — la lista de encabezados del documento, ideal para generar un índice.
• rawContent y compiledContent — funciones para obtener el Markdown crudo o el HTML compilado.