将网站连接到 CMS API
CMS API 使您的网站能够从 Profound CMS 获取并渲染已发布的内容。您可以使用它来驱动文档页面、营销页面、博客、帮助中心或任何其他以内容为中心的体验。
典型的集成包含三个部分:
要将您的应用连接到 CMS,请提供 CMS API URL、网站 ID 和 API 密钥。
const cmsConfig = {
cmsUrl: 'https://cms.dev.tryprofoun.com',
websiteId: 'your-website-id',
apiKey: process.env.PROFOUND_API_KEY,
};
在不同环境之间会变化的值请使用环境变量:
NEXT_PUBLIC_CMS_API_URL=https://cms.dev.tryprofound.com
NEXT_PUBLIC_WEBSITE_ID=your-website-id
PROFOUND_API_KEY=your-api-key
不要在客户端代码中暴露私有 API 密钥。API 密钥应仅在服务器端、构建流程或后端路由中使用。
CMS 中的内容按照架构进行组织。例如,您的项目可能包含 post、category、page 或 section 等架构。
使用架构名称来获取内容:
const posts = await cms.schema('post').fetchAll();
按 ID 获取单个文档:
const post = await cms.schema('post').fetchSingleById('document-id');
要获取本地化内容,请请求该架构的翻译版本:
const frenchPost = await cms
.schema('post')
.translation('fr')
.fetchSingleById('document-id');
对于使用 CMS 管理页面的网站,您可以根据当前 URL 路径获取内容。
const route = await cms.route.getByPath({
websiteId: 'your-website-id',
path: '/docs/getting-started',
});
路由响应会标识页面以及需要渲染的区块。然后您的应用可以获取这些区块,并使用自定义组件进行渲染。
const blocks = await cms.block.getByIds({
websiteId: 'your-website-id',
ids: route.blockIds,
});
async function getDocsPage(path: string) {
const route = await cms.route.getByPath({
websiteId: process.env.WEBSITE_ID,
path,
});
const blocks = await cms.block.getByIds({
websiteId: process.env.WEBSITE_ID,
ids: route.blockIds,
});
return {
title: route.label,
path: route.path,
blocks,
};
}
您可以使用返回的区块,通过应用程序的组件系统来渲染页面。
已发布的 CMS 内容可以安全地缓存。对于大多数网站,请将 API 响应缓存较短的时间,并在内容发生变化时重新验证。
常见的设置如下:
const content = await cache(
() => cms.schema('post').fetchAll(),
{
revalidate: 60,
tags: ['cms-posts'],
}
);
推荐的缓存行为:
预览模式可让编辑在发布之前查看未发布的更改。
常见做法是使用单独的预览路由,例如:
/docs/getting-started
/cms-preview/docs/getting-started
生产页面应仅获取已发布的内容。预览页面可以接受预览参数,例如:
?edit_mode=true
预览路由通常应为动态路由,不应进行静态缓存。
在构建或请求期间,CMS 内容可能不可用。您的应用应优雅地处理这种情况。
推荐行为:
404。async function getPost(id: string) {
try {
return await cms.schema('post').fetchSingleById(id);
} catch (error) {
console.error('获取 CMS 文章失败', error);
return null;
}
}
保持 API 密钥的私密性,并仅在服务器上使用。不要在浏览器打包或公共 JavaScript 中包含私有凭据。
仅将公共环境变量用于非敏感值,例如:
将私有环境变量用于:
当您的网站需要获取结构化内容、渲染由 CMS 管理的路由或支持编辑预览工作流时,请使用 CMS API。
标准集成应当: