Builder.io

Builder.io 是一个可视化无头 CMS。可以将其视为一个拖放式 CMS，可以集成到现有的 Qwik 代码库中，让您和您的团队可以在不编写代码的情况下编辑内容。

设置

您可以使用以下 add 脚本轻松添加 builder.io：

npm run qwik add builder.io

运行该命令后，@builder.io/sdk-qwik 将被安装，并在 src/components 和 src/routes 中创建一个新的示例组件和 catchall 路由。

创建一个免费的 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/，然后点击右上角的 保存

现在，让我们在 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}
    />
  );
});

下一步

请查看我们的完整集成指南 here

此外，当您将集成推送到生产环境时，请返回并将您的预览 URL 更新为您的生产 URL，这样您团队中的任何人都可以在您的 Qwik 应用中可视化创建内容！

另外，要集成结构化数据，请参阅 此指南