Saltar al contenido

Combina layouts para obtener lo mejor de ambos mundos

Ahora que has añadido un layout a cada post de blog, ¡es hora de hacer que tus posts se vean como el resto de las páginas de tu sitio web!

Prepárate para…

Anida tu layout de post de blog dentro de tu layout de página principal

Anida tus dos layouts

Ya tienes un BaseLayout.astro para definir el layout general de tus páginas.

MarkdownPostLayout.astro te da algo de plantillado adicional para propiedades comunes de posts de blog como title y date, pero tus posts de blog no se ven como las otras páginas de tu sitio. Puedes hacer que el aspecto de tus posts de blog coincida con el resto de tu sitio anidando layouts.

En src/layouts/MarkdownPostLayout.astro, importa BaseLayout.astro y úsalo para envolver todo el contenido de la plantilla. No olvides pasar el prop pageTitle:

---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
  <meta charset="utf-8" />
  <h1>{frontmatter.title}</h1>
  <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
  <p><em>{frontmatter.description}</em></p>
  <p>Written by: {frontmatter.author}</p>
  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
  <slot />
</BaseLayout>

En src/layouts/MarkdownPostLayout.astro, ahora puedes eliminar la etiqueta meta ya que ya está incluida en tu BaseLayout:

---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
  <meta charset="utf-8" />
  <h1>{frontmatter.title}</h1>
  <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
  <p><em>{frontmatter.description}</em></p>
  <p>Written by: {frontmatter.author}</p>
  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
  <slot />
</BaseLayout>

Revisa la vista previa de tu navegador en http://localhost:4321/posts/post-1. Ahora deberías ver contenido renderizado por:
- Tu layout de página principal, incluyendo tus estilos, enlaces de navegación, y footer social.
- Tu layout de post de blog, incluyendo propiedades de frontmatter como la descripción, fecha, título, e imagen.
- Tu contenido individual de Markdown del post de blog, incluyendo solo el texto escrito en este post.

Nota que el título de tu página ahora se muestra dos veces, una por cada layout.

Elimina la línea que muestra el título de tu página de MarkdownPostLayout.astro:

<BaseLayout pageTitle={frontmatter.title}>
  <h1>{frontmatter.title}</h1>
  <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
  <p><em>{frontmatter.description}</em></p>
  <p>Written by: {frontmatter.author}</p>
  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
  <slot />
</BaseLayout>

Revisa la vista previa de tu navegador de nuevo en http://localhost:4321/posts/post-1 y verifica que esta línea ya no se muestra y que tu título se muestra solo una vez. Haz cualquier otro ajuste necesario para asegurar que no tengas ningún contenido duplicado.

Asegúrate de que:

Cada post de blog muestre la misma plantilla de página, y que no falte contenido. (Si a uno de tus posts de blog le falta contenido, revisa sus propiedades de frontmatter.)
Ningún contenido está duplicado en una página. (Si algo está siendo renderizado dos veces, asegúrate de eliminarlo de MarkdownPostLayout.astro.)

Si quieres personalizar tu plantilla de página, puedes.

Pon a prueba tu conocimiento

Esto te permite anidar un layout dentro de otro y aprovechar el trabajo con piezas modulares.
1. despliegue continuo
2. diseño responsive
3. diseño basado en componentes
Múltiples layouts son particularmente útiles para proyectos que contienen páginas Markdown, como un…
1. blog
2. dashboard
3. app de chat
¿Cuál de estos proporciona plantillado para todas tus páginas?
1. index.astro
2. BaseLayout.astro
3. post-1.md

Checklist

Puedo anidar layouts, verificando que no haya elementos duplicados.

Recursos

Anidación de Layouts en Astro

Contribuir Comunidad Patrocinar