페이지 레이아웃

편집자가 Default, Full Width, Landing Page 같은 페이지 템플릿을 하나 고르게 하세요. select 필드가 선택을 저장하고, 페이지 라우트가 그 값을 Astro 레이아웃 컴포넌트에 매핑합니다. 한 페이지 안에서 여러 섹션을 구성하고 순서를 바꿔야 할 때는 blocks 필드를 사용하세요.

작동 방식

1. pages 컬렉션에 template 셀렉트 필드를 추가합니다
2. 각 옵션용 레이아웃 컴포넌트를 만듭니다
3. 페이지 라우트에서 필드 값을 레이아웃에 매핑합니다

이는 EmDash의 셀렉트 필드와 Astro의 컴포넌트 모델을 사용합니다.

필드 추가

관리자 UI에서 pages 컬렉션에 slug가 template인 셀렉트 필드와 레이아웃 옵션(예: “Default”, “Full Width”)을 추가하세요. 시드 데이터에서 같은 필드를 정의하려면 컬렉션의 fields 배열에 다음 객체를 추가합니다.

{
  "slug": "template",
  "label": "Template",
  "type": "select",
  "validation": {
    "options": ["Default", "Full Width"]
  },
  "defaultValue": "Default"
}

레이아웃 컴포넌트 만들기

각 레이아웃은 기본 레이아웃 안에서 다른 스타일로 콘텐츠를 감쌉니다.

---
import type { ContentEntry, InferCollectionData } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "./Base.astro";

interface Props {
  page: ContentEntry<InferCollectionData<"pages">>;
}

const { page } = Astro.props;
---

<Base title={page.data.title}>
  <article class="page-default">
    <h1>{page.data.title}</h1>
    <PortableText value={page.data.content} />
  </article>
</Base>

<style>
  .page-default {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 2rem 1rem;
  }
</style>

---
import type { ContentEntry, InferCollectionData } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "./Base.astro";

interface Props {
  page: ContentEntry<InferCollectionData<"pages">>;
}

const { page } = Astro.props;
---

<Base title={page.data.title}>
  <article class="page-wide">
    <h1>{page.data.title}</h1>
    <PortableText value={page.data.content} />
  </article>
</Base>

<style>
  .page-wide {
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: 2rem 1rem;
  }
</style>

라우트 연결

페이지 라우트에서 각 레이아웃을 가져오고 템플릿 값을 매핑하세요.

---
import { decodeSlug, getEmDashEntry } from "emdash";
import PageDefault from "../../layouts/PageDefault.astro";
import PageFullWidth from "../../layouts/PageFullWidth.astro";

const slug = decodeSlug(Astro.params.slug);

if (!slug) {
  return Astro.redirect("/404");
}

const { entry: page } = await getEmDashEntry("pages", slug);

if (!page) {
  return Astro.redirect("/404");
}

const layouts = new Map([
  ["Default", PageDefault],
  ["Full Width", PageFullWidth],
]);

const Layout = layouts.get(page.data.template ?? "") ?? PageDefault;
---

<Layout page={page} />

라우트는 작게 유지합니다. 각 레이아웃 컴포넌트가 자체 마크업과 스타일을 가집니다. 레이아웃 추가는 컴포넌트를 만들고, 셀렉트 필드에 옵션을 추가하고, 맵에 한 줄을 추가하는 것입니다.

더 많은 레이아웃 추가

흔한 레이아웃 선택:

• Default — 좁은 콘텐츠 열, 읽기에 좋음
• Full Width — 더 넓은 콘텐츠 영역, 사이드바 없음
• Landing Page — 헤더/푸터 없음, 히어로 섹션
• Sidebar — 옆에 위젯 영역이 있는 콘텐츠

각각은 src/layouts/ 디렉터리의 또 다른 Astro 컴포넌트이자 라우트 레이아웃 맵의 또 다른 항목입니다.