Pular para o conteúdo

Crie um arquivo de postagens do blog

Agora que você tem algumas postagens do blog para adicionar links para, é 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 utilizando Astro.glob()
  • Mostrar uma lista dinamicamente gerada de postagens na sua página Blog
  • Refatorar para utilizar um componente <BlogPost /> para cada item da lista

Dinamicamente mostre uma lista de postagens

Seção intitulada 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() irá retornar um array de objetos, um de cada postagem do blog.

    src/pages/blog.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Meu Blog de Aprendizado sobre 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:

    src/pages/blog.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Meu Blog de Aprendizado sobre 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 adicionando um novo arquivo post-4.md em src/pages/posts/ e adicionando algum conteúdo Markdown. Certifique-se de pelo menos adicionar as propriedades de frontmatter usadas abaixo.

    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: Minha Quarta Postagem no Blog
    author: Aluno de Astro
    description: "Esta postagem irá aparecer por si mesma!"
    image:
      url: "https://docs.astro.build/default-og-image.png"
      alt: "A palavra astro contra 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 de Postagem do Blog

Seção intitulada Desafio: Crie um componente de Postagem do Blog

Tente sozinho fazer todas as mudanças necessárias ao seu projeto Astro para que você ao invés disso, utilize o seguinte código para gerar sua lista de postagens do 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>
Expanda para ver as etapas

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

    Me 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
    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 = "Meu Blog de Aprendizado sobre Astro";
    ---

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

    Mostre o 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 = "Meu Blog de Aprendizado sobre 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 intitulada Teste seu conhecimento

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

---
const minhasPostagens = await Astro.glob('../pages/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

Seção intitulada Checklist

Recursos

Seção intitulada Recursos