页面布局

WordPress 有「页面模板」——编辑器里的下拉菜单可为每页选择布局（例如 Default、Full Width、Landing Page）。EmDash 用 select 字段支持相同模式。

工作原理

1. 在 pages 集合中添加 slug 为 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 { 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 — 无页头/页脚，适合 hero 区块
• Sidebar — 带侧边栏小工具区域的内容

每一种只是在 src/layouts/ 里多一个 Astro 组件，并在路由的布局映射里多一行。