ページレイアウト | EmDash CMS Everything

編集者が、たとえば Default、Full Width、Landing Page のようなページテンプレートを 1 つ選べるようにします。select フィールドが選択を保存し、ページルートがその値を Astro のレイアウトコンポーネントにマッピングします。編集者が 1 つのページ内で複数のセクションを組み立てて並べ替える必要がある場合は、blocks フィールドを使ってください。

仕組み

ページコレクションに template セレクトフィールドを追加します
各オプションに対応するレイアウトコンポーネントを作成します
ページルートで、フィールドの値をレイアウトにマッピングします

これは、EmDash のセレクトフィールドと Astro のコンポーネントモデルを利用しています。

フィールドを追加する

管理画面で、スラッグが 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.rewrite("/404");
}

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

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

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

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

<Layout page={page} />

ルートは小さいままです。各レイアウトコンポーネントが、自身のマークアップとスタイルを管理します。レイアウトを追加する手順は、コンポーネントを作成し、セレクトフィールドにオプションを追加し、マップに 1 行加えるだけです。

レイアウトを追加する

よくあるレイアウトの選択肢:

Default — 幅の狭いコンテンツ列で、読みやすい
Full Width — より広いコンテンツ領域で、サイドバーなし
Landing Page — ヘッダー/フッターなしで、ヒーローセクションを使う
Sidebar — 横にウィジェットエリアを備えたコンテンツ

どれも、src/layouts/ ディレクトリ内の Astro コンポーネントがもう 1 つと、ルートのレイアウトマップのエントリがもう 1 つ増えるだけです。