主题概述

本页内容

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/           # 可选的本地媒体文件

主题如何引导站点

从主题创建站点遵循以下步骤:

  1. create-astro 从模板搭建项目
  2. 运行 npm installnpm run dev
  3. 在首次访问管理页面时,设置向导会自动运行
  4. 向导应用 seed 文件,创建集合、菜单、重定向和内容
  5. 站点准备就绪

面向用户

选择主题,运行向导,开始编辑。无需数据库知识。

面向开发者

主题是标准的 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 完成设置向导。

设置向导

设置向导在首次访问管理页面时自动运行。它执行以下步骤:

  1. 提示输入站点标题、标语和管理员凭据
  2. 提供包含示例内容的选项
  3. 将 seed 文件应用到数据库
  4. 重定向到管理仪表板

官方主题

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 管理内容模型。

下一步