Pular para o conteúdo

Crie um arquivo de postagens do blog

Agora que você tem algumas postagens do blog que podem ser acessadas por links, é hora de configurar a página Blog para criar uma lista de postagens automaticamente!

Se prepare para...

  • Acessar dados de todas as suas postagens de uma vez usando Astro.glob()
  • Mostrar uma lista de postagens gerada dinamicamente na sua página Blog
  • Refatorar para utilizar um componente <BlogPost /> para cada item da lista

Dinamicamente mostre uma lista de postagens

  1. Adicione o seguinte código em blog.astro para retornar informação sobre todos os seus arquivos Markdown. Astro.glob() retornará um array de objetos, um para cada postagem do blog.

    ---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('./posts/*.md');
const pageTitle = "Meu Blog de Aprendizagem Astro";
---
<BaseLayout pageTitle={pageTitle}>
  <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Postagem 1</a></li>
    <li><a href="/posts/post-2/">Postagem 2</a></li>
    <li><a href="/posts/post-3/">Postagem 3</a></li>
  </ul>
</BaseLayout>

  2. Para gerar a lista inteira de postagens dinamicamente, utilizando os títulos das postagens e URLs, substitua suas tags <li> individuais com o seguinte código Astro:

    ---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('./posts/*.md');
const pageTitle = "Meu Blog de Aprendizagem Astro";
---
<BaseLayout pageTitle={pageTitle}>
  <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
  <ul>
    <li><a href="/posts/post-1/">Postagem 1</a></li>
    <li><a href="/posts/post-2/">Postagem 2</a></li>
    <li><a href="/posts/post-3/">Postagem 3</a></li>

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

    Sua lista inteira de postagens do blog agora está sendo gerada dinamicamente, por mapear o array retornado por Astro.glob().

  3. Adicione uma nova postagem do blog criando um novo arquivo post-4.md em src/pages/posts/ e adicionando algum conteúdo Markdown. Certifique-se de adicionar as propriedades de frontmatter usadas abaixo.

    ---
layout: ../../layouts/MarkdownPostLayout.astro
title: Minha Quarta Postagem no Blog
author: Aluno Astro
description: "Esta postagem irá aparecer por si mesma!"
image: 
    url: "https://docs.astro.build/default-og-image.png"
    alt: "A palavra astro acima de uma ilustração de planetas e estrelas."
pubDate: 2022-08-08
tags: ["astro", "sucessos"]
---
Esta postagem deve aparecer junto das minhas outras postagens do blog, pois `Astro.glob()` está retornando uma lista de todas as minhas postagens para criar minha lista.

  4. Revisite a página do seu blog na pré-visualização do seu navegador em http://localhost:4321/blog e procure por uma lista atualizada com quatro itens, incluindo sua nova postagem no blog!

Desafio: Crie um componente BlogPost

Tente por si só fazer todas as mudanças necessárias em seu projeto Astro para que você posssa usar o seguinte código para gerar sua lista de postagens do blog:

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

Expanda para ver as etapas

  1. Crie um novo componente em src/components/.

    Mostre o nome do arquivo

    BlogPost.astro

  2. Escreva a linha de código no seu componente para que ele seja capaz de receber um title e url como Astro.props.

    Mostre o código

    ---
// src/components/BlogPost.astro
const { title, url } = Astro.props;
---

  3. Adicione o template utilizado para criar cada item na sua lista de postagens do blog.

    Mostre o código

    <!-- src/components/BlogPost.astro -->
<li><a href={url}>{title}</a></li>

  4. Importe o novo componente em sua página Blog.

    Mostre o código

    ---
import BaseLayout from '../layouts/BaseLayout.astro';
import BlogPost from '../components/BlogPost.astro';
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "Meu Blog de Aprendizagem Astro";
---

  5. Verifique você mesmo: veja o código completo do componente.

    Mostre o 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 = await Astro.glob('../pages/posts/*.md');
const pageTitle = "Meu Blog de Aprendizagem Astro"
---
<BaseLayout pageTitle={pageTitle}>
  <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
  <ul>
    {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
  </ul>
</BaseLayout>

Teste seu conhecimento

Se o seu componente Astro contém a seguinte linha de código:

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

Escolha a sintaxe que você pode escrever para representar:

  1. O título da sua terceira postagem do blog.

  2. Um link para a URL da sua primeira postagem do blog.

  3. Um componente para cada postagem, mostrando a data que ele foi atualizado pela última vez.

Checklist

Recursos

Contribua Comunidade Sponsor