架構

EmDash 在 Astro 應用程式內執行。公開頁面和管理面板共用 EmDash 執行階段、資料庫和媒體儲存。它們是一個部署應用程式的組成部分，而非一個前端和一個獨立的 CMS 服務。

EmDash 網站的組成部分

下表展示了每個部分如何透過 EmDash 執行階段連接：

編輯器使用管理面板處理內容。網站開發者透過撰寫 Astro 頁面和元件決定內容的呈現方式。雙方使用相同的內容模型：描述每個項目的集合和欄位定義。

資料庫儲存內容模型、項目、使用者、設定和其他 CMS 記錄。媒體儲存轉接器保存上傳的檔案。項目中的媒體欄位參照儲存的媒體項目，而不是將檔案位元組放在內容資料表中。

Astro 的設定

EmDash 網站需要伺服器渲染，因為管理面板、API 路由和目前內容在執行時提供。使用 output: "server" 和部署平台的轉接器設定 Astro。

在 Astro 整合陣列中同時註冊 React 和 EmDash。React 負責管理面板的水合；如果安裝了 @astrojs/react 但陣列中缺少 react()，管理頁面將停留在正在載入 EmDash…。

以下 Node.js 範例提供 SQLite 資料庫和本機媒體儲存：

import node from "@astrojs/node";
import react from "@astrojs/react";
import { defineConfig } from "astro/config";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

export default defineConfig({
	output: "server",
	adapter: node({ mode: "standalone" }),
	integrations: [
		react(),
		emdash({
			database: sqlite({ url: "file:./data.db" }),
			storage: local({
				directory: "./uploads",
				baseUrl: "/_emdash/api/media/file",
			}),
		}),
	],
});

整合可以使用其他支援的資料庫和儲存轉接器。省略 storage 時預設使用本機儲存轉接器，但生產部署需要跨應用程式發布和執行個體持久化的儲存。可用轉接器和選項請參見設定。

頁面如何查詢內容

src/live.config.ts 將 EmDash 載入器註冊為 Astro 即時內容集合：

import { defineLiveCollection } from "astro:content";
import { emdashLoader } from "emdash/runtime";

export const collections = {
	_emdash: defineLiveCollection({ loader: emdashLoader() }),
};

頁面然後呼叫 getEmDashCollection() 取得清單或 getEmDashEntry() 取得單一項目。以下查詢在頁面渲染時載入文章：

---
import { getEmDashCollection } from "emdash";

const { entries: posts, error } = await getEmDashCollection("posts");

if (error) throw error;
---

<ul>{posts.map((post) => <li>{post.data.title}</li>)}</ul>

伺服器渲染的頁面針對傳入請求執行此查詢，受您設定的快取約束。預先渲染頁面在建置期間執行，在下一次建置之前無法顯示後續編輯。

模型如何變更

管理員可以在管理面板中建立集合和欄位。EmDash 變更資料庫結構描述，使後續項目和查詢使用新模型。種子檔案提供了一種版本控制的方式來描述另一個環境的起始模型，產生的 TypeScript 宣告幫助開發者在程式碼中使用目前模型。

這些工具描述和變更的是同一個模型；它們不建立平行副本。有關工作流程和資料安全邊界，請閱讀內容模型。

外掛如何擴充執行階段

外掛可以回應內容和媒體事件，新增 API 路由、設定或管理介面。原生外掛使用宿主應用程式的存取權限執行。標準格式外掛在網站設定沙盒執行器並授予功能時可以在隔離的執行階段中執行。在安裝或建構之前，請閱讀選擇外掛格式。