컨텐츠로 이동

레이아웃을 결합하여 두 가지 장점을 모두 활용하세요

이제 각 블로그 게시물에 레이아웃을 추가했으므로 게시물을 웹 사이트의 나머지 페이지와 비슷하게 만들 차례입니다!

요구 사항

  • 기본 페이지 레이아웃 안에 블로그 게시물 레이아웃을 중첩하세요.

페이지의 전체 레이아웃을 정의하기 위한 BaseLayout.astro가 이미 있습니다.

MarkdownPostLayout.astrotitledate와 같은 일반적인 블로그 게시물 속성에 대한 몇 가지 추가 템플릿을 제공하지만 블로그 게시물은 사이트의 다른 페이지와 모양이 다릅니다. 레이아웃 중첩을 통해 블로그 게시물의 모양을 사이트의 나머지 부분과 일치시킬 수 있습니다.

  1. src/layouts/MarkdownPostLayout.astro에서 BaseLayout.astro를 가져와 이를 사용하여 전체 템플릿 콘텐츠를 래핑합니다. pageTitle prop을 전달하는 것을 잊지 마세요:

    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>Written by: {frontmatter.author}</p>
    <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
    <slot />
    </BaseLayout>
  2. http://localhost:4321/posts/post-1에서 브라우저 미리보기를 확인하세요. 이제 다음과 같이 렌더링된 콘텐츠가 표시됩니다.

    • 스타일, 탐색 링크, 소셜 바닥글을 포함한 메인 페이지 레이아웃.
    • 설명, 날짜, 제목, 이미지와 같은 프런트매터 속성을 포함한 블로그 게시물 레이아웃
    • 여러분의 개별 블로그 게시물 Markdown 콘텐츠 (이 게시물에 작성된 텍스트만 포함)
  3. 이제 페이지 제목이 각 레이아웃별로 한 번씩, 두 번 표시됩니다.

    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>Written by: {frontmatter.author}</p>
    <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
    <slot />
    </BaseLayout>
  4. http://localhost:4321/posts/post-1에서 브라우저 미리보기를 다시 확인하고 이 줄이 더 이상 표시되지 않고 제목이 한 번만 표시되는지 확인하세요. 중복된 콘텐츠가 없는지 확인하기 위해 필요한 다른 조정을 수행합니다.

다음 사항을 확인하세요.

  • 각 블로그 게시물은 동일한 페이지 템플릿을 표시하며 누락된 콘텐츠가 없습니다. (블로그 게시물 중 하나에 콘텐츠가 누락된 경우 해당 게시물의 프런트매터 속성을 확인하세요.)

  • 한 페이지에 내용이 중복되지 않습니다. (어떤 것이 두 번 렌더링되는 경우 MarkdownPostLayout.astro에서 제거해야 합니다.)

페이지 템플릿을 사용자 정의하려면 그렇게 할 수 있습니다.

  1. 무엇을 통해 하나의 레이아웃을 다른 레이아웃 안에 중첩하고 모듈식 작업을 활용할 수 있습니까?

  2. 다중 레이아웃은 Markdown 페이지가 포함된 프로젝트에 특히 유용합니다. 다음 중 이에 해당하는 것은 무엇입니까?

  3. 다음 중 모든 페이지에 템플릿을 제공하는 것은 무엇입니까?