ページレイアウト

WordPress には「Page Templates」があります。エディターのドロップダウンでページごとにレイアウト（例: Default、Full Width、Landing Page）を選べます。EmDash でも select フィールドで同じパターンを実現できます。

仕組み

1. pages コレクションに template という select フィールドを追加する
2. 各選択肢用のレイアウトコンポーネントを作る
3. ページルートでフィールドの値をレイアウトに対応づける

特別な仕組みは不要で、EmDash の既存の select フィールドと Astro のコンポーネントモデルを使います。

フィールドを追加する

管理画面で 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 に選択肢を追加する → マップに 1 行足す、です。

レイアウトをさらに追加する

WordPress テーマでよくある選択肢:

• Default — 本文カラムが狭く読みやすい
• Full Width — コンテンツエリアが広く、サイドバーなし
• Landing Page — ヘッダー/フッターなし、ヒーローセクション
• Sidebar — サイドバーのウィジェットエリア付きコンテンツ

いずれも src/layouts/ に Astro コンポーネントを 1 つ足し、ルートのレイアウトマップにエントリを 1 つ足すだけです。