设置管理面板代理
将管理面板挂载到您的网站上是一个简单的步骤。
这可确保您的编辑体验流畅。通过代理将管理面板挂载到您的网站后，您可以在同一个 URL 上编辑网站，并实时获得更改的可视化预览。 它还支持叠加编辑，为网页编辑提供更佳的用户体验。
代理设置只是您项目中的一个 proxy.ts 文件，其行为类似于 URL 重写，使您网站的 /admin 端点能够解析到 CMS。
localhost：必须使用隧道（因为 CMS 无法直接访问 localhost）// proxy.ts
import { createCmsProxy } from 'cms-renderer/lib/proxy';
export const proxy = createCmsProxy({
upstream: "https://cms.dev.tryprofound.com", // CMS 管理面板
});
现在您可以访问 /admin，从您的网站打开管理面板。这将启用实时预览。
叠加层会自动处理。您只需将 searchParams 传入渲染器。
// page.tsx
interface PageProps {
params: Promise<{ slug: string[] }>;
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
export default async function Page({ params, searchParams }: PageProps) {
const { slug } = await params;
return (
<ParametricRoutePage
registry={registry}
apiKey="sk_..."
websiteId="a2717ba3-29db-..."
cmsUrl={"https://cms.dev.tryprofound.com"}
params={Promise.resolve({ slug })}
searchParams={searchParams}
/>
);
}
/admin叠加层和实时预览应会自动工作。