Saltearse al contenido

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

Sección titulada 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.

  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;
    ---
    <h1>{frontmatter.title}</h1>
    <p>Escrito por {frontmatter.author}</p>
    <slot />

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

    src/pages/posts/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"]
    ---

  4. 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.

  5. 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

Sección titulada 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:

src/pages/posts/post-1.md
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.
src/layouts/MarkdownPostLayout.astro
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>Publicado el: {frontmatter.pubDate.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.

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

Pon a prueba tus conocimientos

Sección titulada 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?

  1. src/pages/posts/learning-astro.md
    ---
    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.
  2. src/layouts/MarkdownLayout.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!
    1. src/pages/posts/learning-astro.md
      ---
      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.
    2. src/layouts/MarkdownLayout.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

Sección titulada Checklist

Recursos

Sección titulada Recursos