Crea un archivo de posts de blog

Ahora que tienes algunos posts de blog a los que enlazar, ¡es hora de configurar la página Blog para crear una lista de ellos automáticamente!

Prepárate para…

Accede a datos de todos tus posts a la vez usando import.meta.glob()
Muestra una lista generada dinámicamente de posts en tu página Blog
Refactoriza para usar un componente <BlogPost /> para cada elemento de la lista

Muestra dinámicamente una lista de posts

Añade el siguiente código a blog.astro para retornar información sobre todos tus archivos Markdown. import.meta.glob() retornará un array de objetos, uno por cada post de blog.

---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
const pageTitle = "My Astro Learning Blog";
---
<BaseLayout pageTitle={pageTitle}>
  <p>This is where I will post about my journey learning Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Post 1</a></li>
    <li><a href="/posts/post-2/">Post 2</a></li>
    <li><a href="/posts/post-3/">Post 3</a></li>
  </ul>
</BaseLayout>

Para generar la lista completa de posts dinámicamente, usando los títulos y URLs de los posts, reemplaza tus etiquetas <li> individuales con el siguiente código de Astro:

---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
const pageTitle = "My Astro Learning Blog";
---
<BaseLayout pageTitle={pageTitle}>
  <p>This is where I will post about my journey learning Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Post 1</a></li>
    <li><a href="/posts/post-2/">Post 2</a></li>
    <li><a href="/posts/post-3/">Post 3</a></li>

    {allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  </ul>
</BaseLayout>

Tu lista completa de posts de blog ahora está siendo generada dinámicamente usando el soporte integrado de TypeScript de Astro, mapeando sobre el array retornado por import.meta.glob().

Añade un nuevo post de blog creando un nuevo archivo post-4.md en src/pages/posts/ y añadiendo algo de contenido Markdown. Asegúrate de incluir al menos las propiedades de frontmatter usadas abajo.

---
layout: ../../layouts/MarkdownPostLayout.astro
title: My Fourth Blog Post
author: Astro Learner
description: "This post will show up on its own!"
image:
    url: "https://docs.astro.build/default-og-image.png"
    alt: "The word astro against an illustration of planets and stars."
pubDate: 2022-08-08
tags: ["astro", "successes"]
---
This post should show up with my other blog posts, because `import.meta.glob()` is returning a list of all my posts in order to create my list.

Vuelve a visitar tu página de blog en la vista previa de tu navegador en http://localhost:4321/blog y busca una lista actualizada con cuatro elementos, ¡incluyendo tu nuevo post de blog!

Reto: Crea un componente BlogPost

Intenta por tu cuenta hacer todos los cambios necesarios a tu proyecto de Astro para que en su lugar puedas usar el siguiente código para generar tu lista de posts de blog:

<ul>
  {allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  {allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>

Expande para ver los pasos

Crea un nuevo componente en src/components/.
Muestra el nombre del archivo
```
BlogPost.astro
```
Escribe la línea de código en tu componente para que pueda recibir un title y url como Astro.props.
Muestra el código
src/components/BlogPost.astro
```
---
const { title, url } = Astro.props;
---
```
Añade el plantillado usado para crear cada elemento en tu lista de posts de blog.
Muestra el código
src/components/BlogPost.astro
```
<li><a href={url}>{title}</a></li>
```

Importa el nuevo componente a tu página Blog.

Muestra el código

---
import BaseLayout from '../layouts/BaseLayout.astro';
import BlogPost from '../components/BlogPost.astro';
const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true }));
const pageTitle = "My Astro Learning Blog";
---

Compruébalo: ve el código del componente terminado.

Muestra el código

---
const { title, url } = Astro.props
---
<li><a href={url}>{title}</a></li>

---
import BaseLayout from '../layouts/BaseLayout.astro';
import BlogPost from '../components/BlogPost.astro';
const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true }));
const pageTitle = "My Astro Learning Blog"
---
<BaseLayout pageTitle={pageTitle}>
  <p>This is where I will post about my journey learning Astro.</p>
  <ul>
    {allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
  </ul>
</BaseLayout>

Pon a prueba tu conocimiento

Si tu componente de Astro contiene la siguiente línea de código:

---
const myPosts = Object.values(import.meta.glob('./posts/*.md', { eager:  true }));
---

Elige la sintaxis que podrías escribir para representar:

El título de tu tercer post de blog.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>First Post!!</a>
Un enlace a la URL de tu primer post de blog.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>First Post!!</a>
Un componente para cada post, mostrando la fecha en que fue actualizado por última vez.
1. myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)
2. myPosts[2].frontmatter.title
3. <a href={myPosts[0].url}>First Post!!</a>

Checklist

Puedo consultar datos de mis archivos locales.
Puedo mostrar una lista de todos mis posts de blog.

Recursos

Importando patrones glob en Astro

Contribuir Comunidad Patrocinar