Pular para o conteúdo

Combine layouts para conseguir o melhor de ambos os mundos

Agora que você adicionou um layout para cada postagem do blog, é hora de fazer suas postagens parecerem com o resto das páginas no seu website!

Se prepare para...

Aninhar seu layout de postagem do blog dentro do seu layout de página principal

Aninhe seus dois layouts

Você já tem um BaseLayout.astro para definir o layout geral da suas páginas.

MarkdownPostLayout.astro te dá templates adicionais para propriedades comuns de postagens do blog como um title e date, mas suas postagens do blog não se parecem com as outras páginas no seu site. Você pode corresponder a aparência das suas postagens do blog com o resto do seu site ao aninhar layouts.

Em src/layouts/MarkdownPostLayout.astro, importe BaseLayout.astro e o utilize para envolver todo o conteúdo do template. Não se esqueça de passar a prop pageTitle:

---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
  <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 />
</BaseLayout>

Verifique a pré-visualização do seu navegador http://localhost:4321/posts/post-1. Agora você deve ver conteúdo renderizado pelo:
- Seu layout de página principal, incluindo seus estilos, links de navegação e rodapé de redes sociais.
- Seu layout de postagem do blog, incluindo propriedades frontmatter como a descrição, data, título e imagem.
- Seu conteúdo Markdown individual da postagem do blog, incluindo apenas o texto escrito na postagem.

Note que o título da sua página agora é mostrado duas vezes, uma por cada um dos layouts.

Remova a linha que mostra o título da sua página de MarkdownPostLayout.astro:

<BaseLayout pageTitle={frontmatter.title}>
  <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 />
</BaseLayout>

Verifique sua pré-visualização do navegador novamente em http://localhost:4321/posts/post-1 e cheque que essa linha não é mais mostrada e seu título é mostrado apenas uma vez. Faça quaisquer outros ajustes necessários para garantir que você não tenha nenhum conteúdo duplicado.

Certifique-se de que:

Cada postagem do blog mostra o mesmo template de página, e nenhum conteúdo está faltando. (Se está faltando conteúdo em uma das suas postagens do blog, verifique suas propriedades do frontmatter.)
Nenhum conteúdo é duplicado em uma página. (Se algo está sendo renderizado duas vezes, então certifique-se de removê-lo de MarkdownPostLayout.astro.)

Se você quiser customizar seu template de página, você pode.

Teste seu conhecimento

Isso te permite aninhar um layout dentro de outro e se aproveitar trabalhando com peças modulares.
1. deployment contínuo
2. design responsivo
3. design baseado em componentes
Múltiplos layouts são particularmente úteis para projetos que contém páginas Markdown, como um…
1. blog
2. painel de controle
3. aplicativo de conversa
Qual destes fornece templates para todas as suas páginas?
1. index.astro
2. BaseLayout.astro
3. post-1.md