Builder.io

Builder.io はビジュアルヘッドレス CMS です。既存の Qwik コードベースに統合されたドラッグアンドドロップ CMS として考えてみてください。これにより、あなたとあなたのチームはコードを書くことなくコンテンツを編集できます。

セットアップ

次の 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

次に、プレビュー URL を http://localhost:5173/ に設定します

1. https://builder.io/models にアクセスします
2. page モデルを選択します
3. プレビュー URL を http://localhost:5173/ に設定し、右上の save をクリックします

次に、Builder.io でページを作成し、Qwik でライブ表示してみましょう！

1. https://builder.io/content にアクセスします
2. + 新規 をクリックし、ページ を選択します
3. 名前を付けて、作成 をクリックします

次に、ビジュアルエディターを試してみてください！[挿入] タブの [カスタムコンポーネント] セクションで、カスタム Qwik コンポーネントを見つけることができます。

また、コンポーネントのみモード を使用して、ビジュアル編集をカスタムコンポーネントのみに制限することもできます。

コンポーネントの登録

ビジュアルヘッドレス CMS のキラー機能の 1 つは、コンポーネントを 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}
    />
  );
});

次のステップ

完全な統合ガイドは こちら を参照してください

また、統合を本番環境にプッシュするときは、プレビュー URL を本番環境 URL に更新して、チームの誰もが Qwik アプリで視覚的にコンテンツを作成できるようにします。

また、構造化データを統合するには、このガイド を参照してください