EmDash 主题是一个完整的 Astro 站点 — 页面、布局、组件、样式 — 通过 create-astro 分发。它还包括一个 seed 文件,在首次运行时使用集合、字段、菜单、重定向和示例内容引导数据库。
主题提供的内容
主题是一个可工作的 Astro 项目,包含:
- Pages — 用于渲染内容的 Astro 路由(主页、博客文章、存档等)
- Layouts — 共享的 HTML 结构
- Components — 可重用的 UI 元素(导航、卡片、页脚)
- Styles — CSS 或 Tailwind 配置
- 一个 seed 文件 — 告诉 CMS 要创建哪些内容类型和字段的 JSON
主题结构
主题具有以下布局:
my-theme/
├── package.json # 主题元数据 + EmDash 配置
├── astro.config.mjs # Astro 集成设置
├── src/
│ ├── live.config.ts # Live Collections 配置
│ ├── pages/ # Astro 路由
│ ├── layouts/ # 布局组件
│ └── components/ # UI 组件
└── .emdash/
├── seed.json # 架构 + 示例内容
└── uploads/ # 可选的本地媒体文件
主题如何引导站点
从主题创建站点遵循以下步骤:
create-astro从模板搭建项目- 运行
npm install和npm run dev - 在首次访问管理页面时,设置向导会自动运行
- 向导应用 seed 文件,创建集合、菜单、重定向和内容
- 站点准备就绪
面向用户
选择主题,运行向导,开始编辑。无需数据库知识。
面向开发者
主题是标准的 Astro 项目。搭建后可自由定制。
安装主题
以下命令从官方主题模板搭建站点:
npm create astro@latest -- --template @emdash-cms/template-blog
托管在 GitHub 上的社区主题使用 github: 模板前缀:
npm create astro@latest -- --template github:user/emdash-portfolio
搭建后,安装依赖项并启动开发服务器:
cd my-site
npm install
npm run dev
访问 http://localhost:4321/_emdash/admin 完成设置向导。
设置向导
设置向导在首次访问管理页面时自动运行。它执行以下步骤:
- 提示输入站点标题、标语和管理员凭据
- 提供包含示例内容的选项
- 将 seed 文件应用到数据库
- 重定向到管理仪表板
官方主题
EmDash 提供官方入门主题,每个主题都有本地(SQLite + 文件系统)和 Cloudflare(D1 + R2)变体:
| 主题 | 描述 | 用例 |
|---|---|---|
@emdash-cms/template-blog | 带有文章、页面、分类和暗黑模式的极简博客 | 个人博客、简单站点 |
@emdash-cms/template-portfolio | 带有项目、衬线字体(Playfair Display)和以图片为中心的布局的编辑风格作品集 | 自由职业者、代理机构、创意人员 |
@emdash-cms/template-marketing | 带有自定义 Portable Text 块(英雄、功能、推荐、定价、FAQ)的醒目营销站点 | 着陆页、SaaS 站点、产品营销 |
Cloudflare 变体
要部署到使用 D1 和 R2 的 Cloudflare Workers,请在模板名称后添加 -cloudflare,如以下命令所示:
npm create astro@latest -- --template @emdash-cms/template-blog-cloudflare
npm create astro@latest -- --template @emdash-cms/template-portfolio-cloudflare
npm create astro@latest -- --template @emdash-cms/template-marketing-cloudflare
这些变体包含用于部署配置的 wrangler.jsonc。
安装后定制
设置向导完成后,站点就是一个标准的 Astro 项目。像任何 Astro 站点一样进行定制:
- 在
src/pages/中编辑页面 - 在
src/layouts/中修改布局 - 通过管理 UI 添加集合
- 安装 Astro 集成
- 在 Astro 运行的任何地方部署
seed 文件仅在初始设置期间使用。之后,在管理面板或使用 CLI 管理内容模型。