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

现在，将您的 预览 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}
    />
  );
});

下一步

查看我们的完整集成指南 这里

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

此外，要集成结构化数据，请查看 本指南