Saltearse al contenido

Crear un archivo de entradas de blog

Ahora que ya tienes unas cuantas entradas de blog a las que enlazar, ¡es hora de configurar la página Blog para que cree una lista de ellas automáticamente!

Prepárate para...

  • Acceder a los datos de todos tus puestos a la vez utilizando Astro.glob().
  • Mostrar una lista de entradas generada dinámicamente en la página del blog
  • Refactorizar para utilizar un componente <BlogPost /> para cada elemento de la lista

Muestra dinámicamente una lista de entradas

Sección titulada Muestra dinámicamente una lista de entradas

  1. Añade el siguiente código a blog.astro para devolver información sobre todos tus archivos Markdown. Astro.glob() devolverá un array de objetos, uno por cada entrada del blog.

    src/pages/blog.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mi blog de aprendizaje de Astro";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>Aquí es donde publicaré sobre mi viaje de aprendizaje de Astro.</p>
      <ul>
        <li><a href="/posts/post-1/">Publicación 1</a></li>
        <li><a href="/posts/post-2/">Publicación 2</a></li>
        <li><a href="/posts/post-3/">Publicación 3</a></li>
      </ul>
    </BaseLayout>

  2. Para generar toda la lista de entradas dinámicamente, utilizando los títulos y las URL de las entradas, sustituye las etiquetas <li> individuales por el siguiente código de Astro:

    src/pages/blog.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mi blog de aprendizaje de Astro";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>Aquí es donde publicaré sobre mi viaje de aprendizaje de Astro.</p>
      <ul>
        <li><a href="/posts/post-1/">Publicación 1</a></li>
        <li><a href="/posts/post-2/">Publicación 2</a></li>
        <li><a href="/posts/post-3/">Publicación 3</a></li>
    

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

    La lista completa de entradas de tu blog se genera ahora dinámicamente, mapeando sobre el array devuelto por Astro.glob().

  3. Añade una nueva entrada 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 frontmatter utilizadas a continuación.

    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: Mi cuarta entrada en el blog
    author: Alumno de Astro
    description: "Esta entrada aparecerá sola!"
    image:
      url: "https://docs.astro.build/default-og-image.png"
      alt: "La palabra 'astro' contra una ilustración de planetas y estrellas."
    pubDate: 2022-08-08
    tags: ["astro", "éxitos"]
    ---
    Esta entrada debería aparecer con las demás entradas de mi blog, porque `Astro.glob()` está devolviendo una lista de todas mis entradas para crear mi lista.

  4. Vuelve a visitar la página de tu blog en la vista previa de tu navegador en http://localhost:4321/blog y busca una lista actualizada con cuatro elementos, incluida tu nueva entrada de blog

Desafío: Crea un componente BlogPost

Sección titulada Desafío: Crea un componente BlogPost

Intenta por tu cuenta realizar todos los cambios necesarios en tu proyecto de Astro para que puedas utilizar el siguiente código para generar tu lista de entradas de blog:

src/pages/blog.astro
<ul>
  {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>
Ampliar para ver los pasos

  1. Crear un nuevo componente en src/components/.

    Mostrar el nombre del archivo
    BlogPost.astro

  2. Escribe la línea de código en tu componente para que pueda recibir un title y una url como Astro.props.

    Mostrar el código
    src/components/BlogPost.astro
    ---
    const { title, url } = Astro.props;
    ---

  3. Añade la plantilla utilizada para crear cada elemento de la lista de entradas de tu blog.

    Mostrar el código
    src/components/BlogPost.astro
    <li><a href={url}>{title}</a></li>

  4. Importa el nuevo componente a tu página Blog.

    Mostrar el código
    src/pages/blog.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import BlogPost from '../components/BlogPost.astro';
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mi blog de aprendizaje de Astro";
    ---

  5. Compruébalo tu mismo: mira el código del componente terminado.

    Mostrar el código
    src/components/BlogPost.astro
    ---
    const { title, url } = Astro.props
    ---
    <li><a href={url}>{title}</a></li>
    src/pages/blog.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import BlogPost from '../components/BlogPost.astro';
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mi blog de aprendizaje de Astro"
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>Aquí es donde publicaré sobre mi viaje de aprendizaje de Astro.</p>
      <ul>
        {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
      </ul>
    </BaseLayout>

Pon a prueba tus conocimientos

Sección titulada Pon a prueba tus conocimientos

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

---
const myPosts = await Astro.glob('../pages/posts/*.md');
---

Elige la sintaxis que podrías escribir para representar:

  1. El título de la tercera entrada de tu blog.

  2. Un enlace a la URL de tu primera entrada en el blog.

  3. Un componente para cada entrada, que muestra la fecha de su última actualización.

Checklist

Sección titulada Checklist

Recursos

Sección titulada Recursos