Saltearse al contenido
Astro Astro

Combina plantillas para obtener lo mejor de ambos mundos

Ahora que ya has añadido una plantilla a cada entrada del blog, ¡es hora de hacer que tus entradas del blog se parezcan al resto de páginas de tu sitio web!

Prepárate para...

  • Anidar la plantilla de tus publicaciones de blog dentro de la plantilla principal de tu página

Anida tus dos plantillas

Ya tienes un BaseLayout.astro para definir la plantilla general de tus páginas.

El MarkdownPostLayout.astro te proporciona algunas plantillas adicionales para las propiedades comunes de las publicaciones de tu blog, como title y date, pero las publicaciones de tu blog no tienen el mismo aspecto que el resto de páginas de tu sitio. Puedes adaptar el aspecto de las entradas de tu blog al resto de tu sitio anidando plantillas.

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

    src/layouts/MarkdownPostLayout.astro
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Escrito por: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>

  2. Comprueba la vista previa de tu navegador en http://localhost:4321/posts/post-1. Ahora debería ver el contenido renderizado por:

    • Tu plantilla de página principal, incluyendo tus estilos, enlaces de navegación y pie de página social.
    • Tu plantilla de plublicación de blog, incluyendo propiedades del frontmatter como la descripción, fecha, título e imagen.
    • Tu contenido individual en formato Markdown de tu publicación de blog, incluyendo sólo el texto escrito en esta publicación.

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

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

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

  4. Comprueba de nuevo la vista previa de tu navegador en http://localhost:4321/posts/post-1 y verifica que esta línea ya no aparece y que su título sólo se muestra una vez. Realiza cualquier otro ajuste necesario para asegurarte de que no tienes contenido duplicado.

Asegúrate de que:

  • Cada publicación muestra la misma plantilla de página y no falta contenido. (Si a una de tus publicaciones le falta contenido, comprueba sus propiedades frontmatter).

  • Ningún contenido se duplica en una página. (Si algo se está renderizando dos veces, asegúrate de eliminarlo de MarkdownPostLayout.astro).

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

Pon a prueba tus conocimientos

  1. Esto le permite anidar una plantilla dentro de otra y aprovechar las ventajas de trabajar con piezas modulares.

  2. Las plantillas múltiples son especialmente útiles para proyectos que contienen páginas Markdown, como…

  3. ¿Cuál de ellos proporciona plantillas para todas tus páginas?

Checklist

Recursos