Crea y pasa datos a un layout de blog personalizado

Ahora que tienes un layout para tus páginas, ¡es hora de añadir un layout para posts de blog!

Prepárate para…

• Crea un nuevo layout de post de blog para tus archivos Markdown
• Pasa valores de frontmatter YAML como props al componente de layout

Añade un layout a tus posts de blog

Cuando incluyes la propiedad de frontmatter layout en un archivo .md, todos tus valores YAML del frontmatter están disponibles para el archivo de layout.

1. Crea un nuevo archivo en src/layouts/MarkdownPostLayout.astro

2. Copia el siguiente código en MarkdownPostLayout.astro

   src/layouts/MarkdownPostLayout.astro

   ---
   const { frontmatter } = Astro.props;
   ---
   <meta charset="utf-8" />
   <h1>{frontmatter.title}</h1>
   <p>Written by {frontmatter.author}</p>
   <slot />

3. Añade la siguiente propiedad de frontmatter en post-1.md

   src/pages/posts/post-1.md

   ---
   layout: ../../layouts/MarkdownPostLayout.astro
   title: 'My First Blog Post'
   pubDate: 2022-07-01
   description: 'This is the first post of my new Astro blog.'
   author: 'Astro Learner'
   image:
       url: 'https://docs.astro.build/assets/rose.webp'
       alt: 'The Astro logo on a dark background with a pink glow.'
   tags: ["astro", "blogging", "learning in public"]
   ---

4. Revisa la vista previa de tu navegador de nuevo en http://localhost:4321/posts/post-1 y nota qué ha añadido el layout a tu página.

5. Añade la misma propiedad de layout a tus otros dos posts de blog post-2.md y post-3.md. Verifica en tu navegador que tu layout también se aplica a estos posts.

Consejo

Al usar layouts, ahora tienes la opción de incluir elementos, como un título de página, en el contenido Markdown o en el layout. Recuerda inspeccionar visualmente la vista previa de tu página y hacer los ajustes necesarios para evitar elementos duplicados.

Pruébalo tú mismo - Personaliza tu layout de post de blog

Reto: Identifica elementos comunes a cada post de blog, y usa MarkdownPostLayout.astro para renderizarlos, en lugar de escribirlos en tu Markdown en post-1.md y en cada futuro post de blog.

Aquí hay un ejemplo de refactorización de tu código para incluir pubDate en el componente de layout en lugar de escribirlo en el body de tu Markdown:

src/pages/posts/post-1.md

Published on: 2022-07-01

Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.

src/layouts/MarkdownPostLayout.astro

---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>Published on: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Written by {frontmatter.author}</p>
<slot />

Refactoriza tanto como creas que te es útil, y añade tanto a tu layout como quieras, recordando que todo lo que añadas a tu layout es una cosa menos que escribirás en cada post de blog.

Aquí hay un ejemplo de un layout refactorizado que deja solo el contenido individual del post de blog renderizado por el slot. ¡Siéntete libre de usar esto, o crea el tuyo propio!

src/layouts/MarkdownPostLayout.astro

---
const { frontmatter } = Astro.props;
---
<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 />

Evita duplicación

Cualquier cosa renderizada por tu layout no necesita ser escrita en tu post de blog. Si notas alguna duplicación cuando revisas la vista previa de tu navegador, asegúrate de eliminar el contenido de tu archivo Markdown.

Pon a prueba tu conocimiento

¿Puedes averiguar qué debería ir en los espacios en blanco para que los siguientes dos componentes juntos produzcan código de Astro funcional?

1. src/pages/posts/learning-astro.md

   ---
   layout: ../../__________/MyMarkdownLayout.astro
   title: "Learning About Markdown in Astro"
   author: Astro Learner
   ____: 2022-08-08
   ---
   I learned so much today! Astro allows me to write in Markdown, but also use variables from the frontmatter. I can even access those values in an Astro layout component.

2. src/layouts/MyMarkdownLayout.astro

   ---
   import ____________ from '../components/Footer.astro'
   const { ___________ } = Astro.props
   ---
   <h1>{frontmatter.title}</h1>
   <p>Written by: {frontmatter.______} on {frontmatter.pubDate}</p>
   < _______ />
   <Footer />

   ¡Muestra los espacios en blanco rellenados!

   1. src/pages/posts/learning-astro.md

      ---
      layout: ../../layouts/MyMarkdownLayout.astro
      title: "Learning About Markdown in Astro"
      author: Astro Learner
      pubDate: 2022-08-08
      ---
      I learned so much today! Astro allows me to write in Markdown, but also use variables from the frontmatter. I can even access those values in an Astro layout component.

   2. src/layouts/MyMarkdownLayout.astro

      ---
      import Footer from '../components/Footer.astro'
      const { frontmatter } = Astro.props
      ---
      <h1>{frontmatter.title}</h1>
      <p>Written by: {frontmatter.author} on {frontmatter.pubDate}</p>
      <slot />
      <Footer />

Checklist

• Puedo añadir una propiedad de layout a un post de blog en Markdown en su frontmatter YAML.
• Puedo crear un layout separado para posts de Markdown.
• Puedo usar valores del frontmatter de un post de blog en un componente de layout.

Recursos

• Layouts de Markdown en Astro

• Props de layouts de Markdown

• Introducción a YAML externo