E EmDash CMS Everything Guides, use cases, plugins, templates
繁體中文

主題概述

本頁內容

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 install 和 npm 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 管理內容模型。

下一步