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

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

요구 사항

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

두 레이아웃 중첩

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

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

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

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

http://localhost:4321/posts/post-1에서 브라우저 미리보기를 확인하세요. 이제 다음과 같이 렌더링된 콘텐츠가 표시됩니다.
- 스타일, 탐색 링크, 소셜 바닥글을 포함한 메인 페이지 레이아웃.
- 설명, 날짜, 제목, 이미지와 같은 프런트매터 속성을 포함한 블로그 게시물 레이아웃
- 여러분의 개별 블로그 게시물 Markdown 콘텐츠 (이 게시물에 작성된 텍스트만 포함)

이제 페이지 제목이 각 레이아웃별로 한 번씩, 두 번 표시됩니다.

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>

http://localhost:4321/posts/post-1에서 브라우저 미리보기를 다시 확인하고 이 줄이 더 이상 표시되지 않고 제목이 한 번만 표시되는지 확인하세요. 중복된 콘텐츠가 없는지 확인하기 위해 필요한 다른 조정을 수행합니다.

다음 사항을 확인하세요.

각 블로그 게시물은 동일한 페이지 템플릿을 표시하며 누락된 콘텐츠가 없습니다. (블로그 게시물 중 하나에 콘텐츠가 누락된 경우 해당 게시물의 프런트매터 속성을 확인하세요.)
한 페이지에 내용이 중복되지 않습니다. (어떤 것이 두 번 렌더링되는 경우 MarkdownPostLayout.astro에서 제거해야 합니다.)

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

지식 테스트

무엇을 통해 하나의 레이아웃을 다른 레이아웃 안에 중첩하고 모듈식 작업을 활용할 수 있습니까?
1. 지속적인 배포
2. 반응형 디자인
3. 컴포넌트 기반 설계
다중 레이아웃은 Markdown 페이지가 포함된 프로젝트에 특히 유용합니다. 다음 중 이에 해당하는 것은 무엇입니까?
1. 블로그
2. 대시보드
3. 채팅 앱
다음 중 모든 페이지에 템플릿을 제공하는 것은 무엇입니까?
1. index.astro
2. BaseLayout.astro
3. post-1.md

체크리스트

레이아웃을 중첩하여 중복된 요소가 있는지 확인할 수 있습니다.

참고 자료

Astro의 중첩 레이아웃