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/ # 選用的本機媒體檔案
主題如何引導網站
從主題建立網站時,流程如下:
create-astro從範本鷹架專案- 你執行
npm install與npm run dev - 首次造訪後台時,設定精靈會自動執行
- 精靈套用種子檔,建立集合、選單、重新導向與內容
- 網站即可使用
給使用者
選擇主題,執行精靈,開始編輯。不需要資料庫知識。
給開發者
主題就是標準的 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 以完成設定精靈。
設定精靈
設定精靈在首次造訪後台時自動執行。它會:
- 提示輸入網站標題、標語與管理員憑證
- 提供是否包含範例內容的選項
- 將種子檔套用到資料庫
- 重新導向至管理後台
┌────────────────────────────────────────────────────────┐
│ │
│ ◆ 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 的環境
種子檔僅在初次設定時使用。套用後,結構描述保存在資料庫中。