面向 WordPress 開發者的 EmDash

EmDash 保留了熟悉的內容概念，例如文章、頁面、分類法、選單、媒體和修訂版本。Astro 提供佈景主題層：路由、佈局、元件和伺服器端算繪。

保持熟悉的部分

編輯者仍然使用具名的內容類型、結構化欄位、草稿和已發佈狀態、階層式分類、扁平標籤、巢狀選單、媒體以及修訂記錄。這些概念都對應到 EmDash 的集合和管理介面中。

開發工作流程有所不同。PHP 範本選擇變成明確的 Astro 路由，範本部件變成匯入的元件，程式碼與資料庫內容分開部署。建構公開網站不需要 React；.astro 元件將伺服器端 TypeScript 與類似 HTML 的範本結合在一起。

概念對應

內容模型

在 EmDash 管理後台的 Content Types 下建立和編輯集合。集合具有明確型別的欄位，並且可以啟用草稿、修訂版本、排程發佈、搜尋、SEO 或留言。

查詢會傳回 Astro 即時集合（live collection）條目。entry.id 是路由識別碼，通常就是 slug；entry.data.id 是資料庫中的內容 ID。

下面的封存頁依發佈順序查詢文章：

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

const { entries: posts, error } = await getEmDashCollection("posts", {
  orderBy: { published_at: "desc" },
  limit: 10,
});

if (error) return new Response("Could not load posts", { status: 500 });
---

{posts.map((post) => (
  <article>
    <h2><a href={`/posts/${post.id}`}>{post.data.title}</a></h2>
    {post.data.excerpt && <p>{post.data.excerpt}</p>}
  </article>
))}

佈景主題檔案

Astro 路由取代了 WordPress 的範本層級。範本自行選擇其 URL 結構，而不是依賴具有特殊意義的檔名。

有關 EmDash 範本使用的專案結構、元件語法、Props、插槽、佈局、路由和伺服器端算繪查詢流程，請閱讀面向 WordPress 開發者的 Astro。

選單和小工具區域

選單和小工具區域儲存在資料庫中，設定完成後仍然可以編輯。範本在請求時查詢它們：

---
import { getMenu } from "emdash";
import { WidgetArea } from "emdash/ui";

const primary = await getMenu("primary");
---

<nav>
  {primary?.items.map((item) => <a href={item.url}>{item.label}</a>)}
</nav>

<aside><WidgetArea name="sidebar" /></aside>

網站設定和分類法

Customizer 風格的網站識別儲存在 EmDash 設定中。只需取得一次設定，並在存在標誌時使用解析後的標誌 URL：

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

const settings = await getSiteSettings();
---

<a href="/">
  {settings.logo?.url
    ? <img src={settings.logo.url} alt={settings.logo.alt || settings.title} />
    : settings.title}
</a>

分類法詞彙是獨立的記錄，而不是直接儲存在 entry.data 中的值。先解析詞彙，再在集合篩選器中使用它的 slug：

import { getEmDashCollection, getTerm } from "emdash";

const news = await getTerm("category", "news", { includeCounts: false });
const { entries: posts } = news
  ? await getEmDashCollection("posts", { where: { category: news.slug } })
  : { entries: [] };

外掛格式

EmDash 有兩種外掛格式：

• 沙盒外掛使用 emdash-plugin.jsonc 作為其身分和信任合約，再加上一個以 SandboxedPlugin 為型別的預設匯出 src/plugin.ts 物件。它可以在隔離的執行時中執行，並使用 Block Kit 建構管理 UI。
• 原生外掛匯出一個建置時的描述符工廠，以及一個使用 definePlugin() 建構的執行時 createPlugin() 函式。用於 React 管理元件、公開 Astro 元件或頁面片段。

請從選擇外掛格式開始。掛鉤名稱和 PluginContext API 是共用的，但套件和處理常式的形式不可互換。

匯入 WordPress 內容

在管理後台側邊欄中選擇 Import 以開啟 Import from WordPress 頁面，或直接造訪 /_emdash/admin/import/wordpress。EmDash 支援兩種匯入路徑：

1. 上傳從 Tools → Export 匯出的 WordPress eXtended RSS（WXR）檔案。
2. 在 WordPress 網站上安裝 EmDash Exporter 外掛，並使用 WordPress 應用程式密碼進行連線。此路徑可以包含一般公開 REST API 不會公開的內容。

在沒有匯出器的情況下輸入 WordPress URL，可以偵測網站並統計公開的文章、頁面和媒體。該 REST 探測不會匯入內容。

匯入器將 WordPress 的 publish 對應到 EmDash 的 published。草稿、待審、私密、排程、資源回收筒和未知狀態都會變為草稿。在變更 DNS 或停用 WordPress 之前，請檢查匯入的權限和發佈狀態。

完整步驟和重試行為請參見從 WordPress 遷移。

編輯器工作流程

EmDash 管理後台提供集合清單、Portable Text 編輯器、媒體管理、選單編輯、分類法管理、修訂版本和預覽連結。它不是 wp-admin 的視覺化複製品：Gutenberg 區塊會變成 Portable Text，可用的介面取決於為網站設定的集合和功能。

下一步