主题概述

本页内容

EmDash 主题是一个完整的 Astro 站点——包含页面、布局、组件和样式——通过 create-astro 分发。它还包含一个 种子文件,在首次运行时用集合、字段、菜单、重定向和示例内容初始化数据库。

主题提供什么

主题是一个可运行的 Astro 项目,包含:

  • Pages — 用于渲染内容的 Astro 路由(首页、博文、归档等)
  • Layouts — 共享的 HTML 结构
  • Components — 可复用的界面元素(导航、卡片、页脚)
  • Styles — CSS 或 Tailwind 配置
  • 种子文件 — 告诉 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. 向导应用种子文件,创建集合、菜单、重定向和内容
  5. 站点即可使用

面向用户

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

面向开发者

主题就是标准的 Astro 项目。搭建完成后可自由定制。

安装主题

create-astro 与模板一起使用:

npm create astro@latest -- --template @emdash-cms/template-blog

社区主题通过 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. 将种子文件应用到数据库
  4. 重定向到管理后台
┌────────────────────────────────────────────────────────┐
│                                                        │
│                    ◆ EmDash                            │
│                                                        │
│              欢迎访问你的新站点                          │
│                                                        │
│  站点标题:      [我的精彩博客                        ] │
│  标语:          [思考与想法                          ] │
│                                                        │
│  管理员邮箱:    [[email protected]                  ] │
│  管理员密码:    [••••••••••••                       ] │
│                                                        │
│  ☑ 包含示例内容                                        │
│                                                        │
│                   [创建站点 →]                         │
│                                                        │
│  模板:Blog Starter                                    │
│  将创建:2 个集合、3 个页面、1 篇文章                  │
└────────────────────────────────────────────────────────┘

官方主题

EmDash 提供官方入门主题,每种均有本地(SQLite + 文件系统)与 Cloudflare(D1 + R2)变体:

主题说明适用场景
@emdash-cms/template-blog含文章、页面、分类与深色模式的极简博客个人博客、简单站点
@emdash-cms/template-portfolio含项目、衬线字体(Playfair Display)与以图为主的编辑风作品集自由职业者、代理商、创意工作者
@emdash-cms/template-marketing含自定义 Portable Text 区块(首屏、功能、客户评价、定价、常见问题)的营销站点落地页、SaaS、产品营销

Cloudflare 变体

若要在 Cloudflare Pages 上使用 D1 与 R2 部署,请在模板名称后追加 -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/ 中调整布局
  • 通过管理界面添加集合
  • 安装 Astro 集成
  • 部署到任何可运行 Astro 的环境

种子文件仅在初次设置时使用。应用后,架构保存在数据库中。

后续步骤