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

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

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

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

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

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:

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

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

:::note[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

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

Recursos

Contribua Comunidade Sponsor