Crea y pasa datos a una plantilla de blog personalizada

Ahora que ya tienes una plantilla para tus páginas, ¡es hora de añadir una plantilla para las entradas del blog!

Prepárate para...

Crear una nueva plantilla de entrada de blog para tus archivos Markdown
Pasar valores frontmatter YAML como props al componente plantilla

Añade una plantilla a las entradas de tu blog

Al incluir la propiedad frontmatter layout en un archivo .md, todos los valores YAML de frontmatter estarán disponibles para el archivo plantilla.

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

Copia el siguiente código en MarkdownPostLayout.astro.

---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>Escrito por {frontmatter.author}</p>
<slot />

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

---
layout: ../../layouts/MarkdownPostLayout.astro
title: 'Mi primera publicación en el blog'
pubDate: 2022-07-01
description: 'Este es la primera publicación de mi nuevo blog de Astro.'
author: 'Alumno de Astro'
image:
    url: 'https://docs.astro.build/assets/full-logo-light.png'
    alt: 'El logotipo completo de Astro.'
tags: ["astro", "bloguear", "aprender en público"]
---

Comprueba de nuevo la vista previa de tu navegador en http://localhost:4321/posts/post-1 y observa lo que la plantilla ha añadido a tu página.
Añade la misma propiedad plantilla a tus otras dos publicaciones post-2.md y post-3.md. Comprueba en tu navegador que el plantilla también se aplica a estas publicaciones.

Pruébalo tú mismo - Personaliza la plantilla de las publicaciones de tu blog

Reto: Identifica los elementos comunes a cada publicación del blog, y utiliza MarkdownPostLayout.astro para renderizarlos, en lugar de escribirlos en tu Markdown en post-1.md y en cada futura publicación del blog.

He aquí un ejemplo de refactorización de tu código para incluir la pubDate en el componente plantilla en lugar de escribirla en el cuerpo de tu Markdown:

Published on: 2022-07-01

¡Bienvenido a mi nuevo blog sobre el aprendizaje de Astro! Aquí, voy a compartir mi viaje de aprendizaje a medida que construyo un nuevo sitio web.

---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>Publicado el: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Escrito por {frontmatter.author}</p>
<slot />

Refactoriza todo lo que consideres útil y añade a tu plantilla todo lo que quieras, ¡recordando que todo lo que añadas a tu plantilla es una cosa menos que escribirás en todas y cada una de las publicaciones de tu blog!

Este es un ejemplo de un plantilla refactorizada que deja sólo el contenido individual de la publicación del blog renderizado por el slot. Siéntete libre de usarlo o de crear el tuyo propio.

---
const { frontmatter } = Astro.props;
---
<h1> {frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().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 />

Pon a prueba tus conocimientos

¿Puedes averiguar qué debe ir en los espacios en blanco para que los dos componentes siguientes produzcan juntos un código de Astro que funcione?

---
layout: ../../__________/MyMarkdownLayout.astro
title: "Aprendiendo sobre Markdown en Astro"
author: 'Alumno de Astro'
____: 2022-08-08
---
¡He aprendido mucho hoy! Astro me permite escribir en Markdown, pero también utilizar variables del frontmatter. Incluso puedo acceder a esos valores en un componente layout de Astro.

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

¡Muestra los espacios en blanco rellenados!

---
layout: ../../layouts/MyMarkdownLayout.astro
title: "Aprendiendo sobre Markdown en Astro"
author: 'Alumno de Astro'
pubDate: 2022-08-08
---
¡He aprendido mucho hoy! Astro me permite escribir en Markdown, pero también utilizar variables del frontmatter. Incluso puedo acceder a esos valores en un componente de plantilla de Astro.

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

Checklist

Puedo añadir una propiedad plantilla a una publicación de blog Markdown en su frontmatter YAML.
Puedo crear una plantilla separada para las publicaciones en Markdown.
Puedo utilizar valores del frontmatter de una publicación en un componente plantilla.

Recursos

Contribuir

Comunidad