React 管理頁面和小工具

原生外掛可以使用自訂 React 頁面、儀表板小工具、欄位小工具和內容清單欄來擴充管理面板——沙盒外掛改為將其 UI 描述為 Block Kit，因為將外掛 JavaScript 載入管理面板會破壞沙盒隔離。

如果您的外掛只需要設定表單，自動產生的 admin.settingsSchema 表單（參見您的第一個原生外掛）無需撰寫 React 即可涵蓋大多數場景。

管理進入點

import { SEOSettingsPage } from "./components/SEOSettingsPage";
import { SEODashboardWidget } from "./components/SEODashboardWidget";

export const widgets = { "seo-overview": SEODashboardWidget };
export const pages = { "/settings": SEOSettingsPage };

{ "exports": { ".": "./dist/index.js", "./admin": "./dist/admin.js" } }

definePlugin({
	id: "seo",
	version: "1.0.0",
	admin: {
		entry: "@my-org/plugin-seo/admin",
		pages: [{ path: "/settings", label: "SEO Settings", icon: "settings" }],
		widgets: [{ id: "seo-overview", title: "SEO Overview", size: "half" }],
	},
});

管理頁面

管理頁面是掛載在 /_emdash/admin/plugins/<plugin-id>/<路徑> 下的 React 元件。標籤以英文宣告——管理面板在渲染側邊欄和命令面板之前會透過共享的 Lingui 實例處理，因此載入自己訊息目錄的外掛可以免費獲得本地化導覽。

外掛 API Hook

usePluginAPI() 會自動添加外掛 ID 前綴和 X-EmDash-Request: 1 CSRF 標頭來呼叫外掛路由。

儀表板小工具

內容編輯器面板

受信任的 React 外掛可以為已儲存的內容條目在設定側邊欄中添加宿主框架的區域。

import type { ContentEditorPanelContext } from "@emdash-cms/admin";

function ContentInsights({ entry, locale }: ContentEditorPanelContext) {
	return <p>{entry.slug} 的分析（{locale ?? "預設區域設定"}）</p>;
}

export const contentEditorPanels = [
	{ id: "content-insights", title: "內容洞察", component: ContentInsights, collections: ["posts", "pages"], minRole: 40, order: 10 },
];

內容清單欄

受信任的 React 外掛可以向活躍的內容集合清單添加唯讀欄。

自動產生的設定 UI

admin: {
	settingsSchema: {
		apiKey: { type: "secret", label: "API Key" },
		enabled: { type: "boolean", label: "Enabled", default: true },
	},
},

建置設定

export default {
	entry: { index: "src/index.ts", admin: "src/admin.tsx" },
	format: "esm", dts: true,
	external: ["react", "react-dom", "emdash", "@emdash-cms/admin"],
};

export default {
	entry: ["src/index.ts", "src/admin.tsx"],
	format: "esm", dts: true,
	external: ["react", "react-dom", "emdash", "@emdash-cms/admin"],
};

啟用/停用外掛

當外掛在管理面板中被停用時：側邊欄連結被隱藏、儀表板小工具不渲染、內容清單欄不渲染、管理頁面回傳 404、後端鉤子繼續執行（為了資料安全）。

const enabled = await ctx.kv.get<boolean>("_emdash:enabled");