元件與註冊表

Atlas 絕不會把元件送到您的網站。您的元件留在您的程式碼儲存庫中。網站合約會告訴 Atlas 有哪些元件，以及編輯者可以填寫哪些欄位。

元件如何宣告

合約中的每個元件都有：

• 一個完整限定 id，例如 acme.home.hero，以及一個版本；
• 一種類別（kind）：section、block 或 layout；
• 具型別的欄位，例如 heading（文字、必填、最多 80 個字元）、image（素材）與 cta（連結）。

編輯者看到的是依這些欄位產生的表單。他們無法新增欄位、貼上 HTML 或更動您的標記。

您的網站如何算繪

請在程式碼中維護一個小型註冊表，將每個元件 id 對應到算繪它的 React 元件：

atlas/sections.tsx

import { Hero } from '@/components/hero';
import { FeatureGrid } from '@/components/feature-grid';
import type { AtlasSection } from '@/lib/atlas';

const registry = {
  'acme.home.hero': Hero,
  'acme.home.features': FeatureGrid,
} as const;

export function renderSection(
  section: AtlasSection,
  assets: Record<string, { url: string; alt?: string }>,
) {
  const Component = registry[section.component.id as keyof typeof registry];
  if (!Component) return null; // unknown component: skip it, never guess
  return <Component key={section.id} {...section.props} assets={assets} />;
}

請以驗證任何外部輸入的相同方式，驗證您的元件所收到的 props。

讓程式碼與內容保持同步

您的網站在啟動時會回報其建置所使用的元件（POST /deployments）。Studio 會將其與已啟用的合約比較，並顯示下列其中一種狀態：

狀態	意義
已同步	已部署的建置算繪的是已啟用的合約
缺少元件	合約使用了此建置所沒有的元件。請先部署程式碼
合約不同	此建置是針對合約的另一個版本所製作
合約未知	Atlas 從未見過此建置所回報的合約
無合約	尚未啟用任何合約

網站未同步時，無法核准 Production 發行版本。這可避免編輯者使用正式網站上尚不存在的元件。

新增元件

1. 在網站程式碼中建置並測試該元件。
2. 將它連同其欄位加入合約套件，並加入允許編輯者插入它的頁面類型。
3. 驗證並提出合約申請。網站管理員將它啟用。
4. 部署網站。Studio 顯示已同步。
5. 編輯者現在即可使用它。