React 관리 페이지와 위젯

네이티브 플러그인은 사용자 정의 React 페이지, 대시보드 위젯, 필드 위젯, 콘텐츠 목록 열로 관리 패널을 확장할 수 있습니다. 샌드박스 플러그인은 대신 Block Kit으로 UI를 설명합니다. 플러그인 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 훅

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");