페이지 레이아웃

WordPress에는 «Page Templates»가 있습니다. 에디터 드롭다운으로 페이지마다 레이아웃(예: Default, Full Width, Landing Page)을 고릅니다. EmDash는 select 필드로 같은 패턴을 지원합니다.

동작 방식

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

별도 시스템이 필요 없고, EmDash의 기존 select 필드와 Astro 컴포넌트 모델을 사용합니다.

필드 추가

관리 UI에서 pages 컬렉션에 slug template인 select 필드와 레이아웃 옵션(예: «Default», «Full Width»)을 추가합니다. 또는 seed 데이터에 포함합니다:

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

레이아웃 컴포넌트 만들기

각 레이아웃은 기본 레이아웃으로 콘텐츠를 감싸며 스타일이 다릅니다:

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

interface Props {
  page: ContentEntry<any>;
}

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 } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "./Base.astro";

interface Props {
  page: ContentEntry<any>;
}

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하고 템플릿 값을 매핑합니다:

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

const { slug } = Astro.params;

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

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

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

const layouts = {
  "Default": PageDefault,
  "Full Width": PageFullWidth,
};

const Layout = layouts[page.data.template as keyof typeof layouts] ?? PageDefault;
---

<Layout page={page} />

라우트는 작게 유지됩니다. 각 레이아웃 컴포넌트가 자체 마크업과 스타일을 갖습니다. 레이아웃을 추가하려면: 컴포넌트 생성 → select 옵션 추가 → 맵에 한 줄 추가.

레이아웃 더 추가하기

WordPress 테마에서 흔한 선택:

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

각각 src/layouts/의 Astro 컴포넌트 하나와 라우트 레이아웃 맵의 항목 하나입니다.