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

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.

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

    src/layouts/MarkdownPostLayout.astro
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <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>
  2. 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
  3. 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:

    src/layouts/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>
  4. 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.

  1. Isso te permite aninhar um layout dentro de outro e se aproveitar trabalhando com peças modulares.

  2. Múltiplos layouts são particularmente úteis para projetos que contém páginas Markdown, como um…

  3. Qual destes fornece templates para todas as suas páginas?