Builder.io

Builder.io 是一個視覺化的無頭 CMS。將它想像成一個拖放式 CMS，可以整合到您現有的 Qwik 代碼庫中，讓您和您的團隊無需編寫代碼即可編輯內容。

設定

您可以使用以下 add 腳本輕鬆新增 builder.io

npm run qwik add builder.io

執行此命令後，將會安裝 @builder.io/sdk-qwik，並分別在 src/components 和 src/routes 中建立新的範例元件和全部匹配路由。

建立免費的 Builder.io 帳戶（只需幾分鐘），然後將您的 公開 API 金鑰 貼到 .env 中

- BUILDER_PUBLIC_API_KEY=YOUR_API_KEY
+ BUILDER_PUBLIC_API_KEY=abc123

然後執行開發伺服器

npm run dev

現在，將您的 預覽網址 設定為 http://localhost:5173/

1. 前往 https://builder.io/models
2. 選擇 頁面 模型
3. 將預覽網址設定為 http://localhost:5173/，然後點選右上角的 儲存

現在，讓我們在 Builder.io 中建立一個頁面，並在 Qwik 中即時查看！

1. 前往 https://builder.io/content
2. 點選 + 新增 並選擇 頁面
3. 為其命名，然後點選 建立

現在，試試視覺化編輯器！您可以在插入標籤的 自訂元件 區段中找到自訂的 Qwik 元件。

您也可以使用 僅限元件模式 將視覺化編輯限制為僅限您的自訂元件。

註冊您的元件

視覺化無頭 CMS 的一大殺手級功能是您可以 公開您的元件 到 CMS，也就是說，您的 Qwik 元件可以在 Builder.io 中作為區塊使用。

import { MyFunComponent } from './fun/fun';
 
export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
  {
    component: MyFunComponent,
    name: 'MyFunComponent',
    inputs: [
      {
        name: 'text',
        type: 'string',
        defaultValue: 'Hello world',
      },
    ],
  },
];
 
export default component$(() => {
  const content = useBuilderContent();
  return (
    <RenderContent
      customComponents={CUSTOM_COMPONENTS}
    />
  );
});

後續步驟

請參閱我們的完整整合指南 此處

此外，當您將整合推送到生產環境時，請返回並將預覽網址更新為您的生產網址，這樣您團隊中的任何人都可以在您的 Qwik 應用程式中視覺化地建立內容！

此外，如需整合結構化資料，請參閱 本指南