主題概覽

本頁內容

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 的環境

種子檔僅在初次設定時使用。套用後,結構描述保存在資料庫中。

後續步驟