Pular para o conteúdo

Crie e passe dados para um layout customizado do blog

Agora que você tem um layout para suas páginas, é hora de adicionar um layout para postagens do blog!

Se prepare para...

  • Criar um novo layout de postagens do blog para seus arquivos Markdown
  • Passar valores frontmatter YAML como props para o componente de layout

Adicione um layout para suas postagens do blog

Seção intitulada Adicione um layout para suas postagens do blog

Quando você inclui a propriedade frontmatter layout em um arquivo .md, todos os valores de seu frontmatter YAML são disponibilizados ao arquivo do layout.

  1. Crie um novo arquivo em src/layouts/MarkdownPostLayout.astro

  2. Copie o seguinte código em MarkdownPostLayout.astro

    src/layouts/MarkdownPostLayout.astro
    ---
    const { frontmatter } = Astro.props;
    ---
    <h1>{frontmatter.title}</h1>
    <p>Escrito por {frontmatter.author}</p>
    <slot />

  3. Adicione a seguinte propriedade frontmatter em post-1.md

    src/pages/posts/post-1.md
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: 'Minha Primeira Postagem no Blog'
    pubDate: 2022-07-01
    description: 'Esta é a primeira postagem do meu novo blog Astro.'
    author: 'Aluno de Astro'
    image:
        url: 'https://docs.astro.build/assets/full-logo-light.png'
        alt: 'A logo completa do Astro.'
    tags: ["astro", "blogueirando", "aprendendo em público"]
    ---

  4. Verifique a pré-visualização do seu navegador novamente em http://localhost:4321/posts/post-1 e note o que o layout adicionou a sua página.

  5. Adicione a mesma propriedade de layout para suas duas outras postagens do blog post-2.md e post-3.md. Verifique em seu navegador que seu layout também é aplicado nessas postagens.

Tente você mesmo - Customize seu layout de postagem do blog

Seção intitulada Tente você mesmo - Customize seu layout de postagem do blog

Desafio: Identifique itens comuns em toda postagem do blog, e utilize MarkdownPostLayout.astro para renderizá-los, ao invés de escrevê-los em seu Markdown em post-1.md e em toda futura postagem do blog.

Aqui está um exemplo de refatoração do seu código para incluir a pubDate no componente de layout ao invés de escrevê-la no corpo do seu Markdown:

src/pages/posts/post-1.md
Publicado em: 2022-07-01


Bem-vindo ao meu _novo blog_ sobre aprendendo Astro! Aqui, eu irei compartilhar minha jornada de aprendizado enquanto eu construo um novo website.
src/layouts/MarkdownPostLayout.astro
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>Publicado em: {frontmatter.pubDate.slice(0,10)}</p>
<p>Escrito por {frontmatter.author}</p>
<slot />

Refatore o quanto você achar útil para você, e adicione o quanto você quiser ao seu layout, lembrando que tudo o que você adicionar seu layout é uma coisa a menos que você irá escrever em cada uma das postagens do blog!

Aqui está um exemplo de um layout refatorado que deixa apenas o conteúdo individual da postagem do blog renderizado por um slot. Sinta-se livre para utilizá-lo, ou criar seu próprio!

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

Teste seu conhecimento

Seção intitulada Teste seu conhecimento

Você consegue descobrir o que deve ir nos espaços em branco para que os dois componentes juntos a seguir produzam código Astro funcional?

  1. src/pages/posts/learning-astro.md
    ---
    layout: ../../__________/MeuLayoutMarkdown.astro
    titulo: "Aprendendo sobre Markdown no Astro"
    autor: Aluno de Astro
    ____: 2022-08-08
    ---
    Eu aprendi tanto hoje! Astro me permite escrever em Markdown, mas também a utilizar variáveis do frontmatter. Eu posso até acessar esses valores em um componente de layout Astro.
  2. src/layouts/MeuLayoutMarkdown.astro
    ---
    import ____________ from '../components/Rodape.astro'
    const { ___________ } = Astro.props
    ---
    <h1>{frontmatter.titulo}</h1>
    <p>Escrito por: {frontmatter.______} em {frontmatter.dataPub}</p>
    < _______ />
    <Rodape />
    Me mostre os espaços em branco preenchidos!
    1. src/pages/posts/learning-astro.md
      ---
      layout: ../../layouts/MeuLayoutMarkdown.astro
      titulo: "Aprendendo sobre Markdown no Astro"
      autor: Aluno de Astro
      dataPub: 2022-08-08
      ---
      Eu aprendi tanto hoje! Astro me permite escrever em Markdown, mas também a utilizar variáveis do frontmatter. Eu posso até acessar esses valores em um componente de layout Astro.
    2. src/layouts/MeuLayoutMarkdown.astro
      ---
      import Rodape from '../components/Rodape.astro'
      const { frontmatter } = Astro.props
      ---
      <h1>{frontmatter.titulo}</h1>
      <p>Escrito por: {frontmatter.autor} em {frontmatter.dataPub}</p>
      <slot />
      <Rodape />

Checklist

Seção intitulada Checklist

Recursos

Seção intitulada Recursos