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!

Get ready to…

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

Dica

Ao utilizar layouts, você agora tem a opção de incluir elementos, como um título da página, no conteúdo Markdown ou no layout. Lembre-se de visualmente inspecionar a pré-visualização da sua página e fazer quaisquer ajustes necessários para evitar elementos duplicados.

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.toString().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.toString().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 />

Evite duplicação

Qualquer coisa renderizada por seu layout não precisa ser escrito em sua postagem do blog! Se você notar qualquer duplicação ao verificar sua pré-visualização do navegador, então certifique-se de remover conteúdo do seu arquivo Markdown.

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

• Eu posso adicionar uma propriedade de layout a minha postagem Markdown do blog em seu frontmatter YAML.
• Eu posso criar um layout separado para postagens Markdown.
• Eu posso utilizar valores do frontmatter de uma postagem do blog em um componente de layout.

Recursos

Seção intitulada Recursos

• Layouts Markdown no Astro

• Props de Layout Markdown

• Introdução ao YAML externo