profound-logoProfound CMS
⌘K
Admin
Theme
DocsTutorialBlogPhilosophy
DocsTutorialBlogPhilosophy

Hybrid

Collection of Pages with ComponentsTypes of ComponentsSetup server sent events (SSE) content refetchInstall Profound CMS as a proxyCEL Scripting in Template BuilderProject ScaffoldingMedia Library

Headless

Quick startJSON 与 Claude 代码组件 Zod 拉取

REST API

REST API 概览get连接网站 APIgetGET /routesgetGET /routegetGET /blocksget获取带有 CEL 缓存的区块getGET /blocks/generatedgetGET /componentsgetGET /components/{name}getGET /dataset/{schema_name}get获取内容变更 SSEpatchPATCH /dataset/{schema_name}postPOST /translationpatchPATCH /translationsgetGET /usagepostPOST /csvpatch修补 CSV
All Systems Operational
Powered Byprofound-logo
Theme

连接网站 API

将网站连接到 CMS API

CMS API 使您的网站能够从 Profound CMS 获取并渲染已发布的内容。您可以使用它来驱动文档页面、营销页面、博客、帮助中心或任何其他以内容为中心的体验。

典型的集成包含三个部分:

  1. 配置您的 CMS 连接
  2. 获取已发布的内容
  3. 在您的应用中渲染内容

配置

要将您的应用连接到 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。
  • 当无法加载可选的导航内容时返回空列表。
  • 记录服务器端的获取错误。
  • 避免向访问者暴露内部 API 错误。

示例:

async function getPost(id: string) {
  try {
    return await cms.schema('post').fetchSingleById(id);
  } catch (error) {
    console.error('获取 CMS 文章失败', error);
    return null;
  }
}

安全

保持 API 密钥的私密性,并仅在服务器上使用。不要在浏览器打包或公共 JavaScript 中包含私有凭据。

仅将公共环境变量用于非敏感值,例如:

  • CMS 公共 URL
  • 网站 ID
  • 语言/区域配置

将私有环境变量用于:

  • API 密钥
  • 预览令牌
  • 管理员凭据
  • 部署机密

总结

当您的网站需要获取结构化内容、渲染由 CMS 管理的路由或支持编辑预览工作流时,请使用 CMS API。

标准集成应当:

  • 配置 CMS URL、网站 ID 和 API 密钥。
  • 按架构获取文档。
  • 根据路由路径获取页面。
  • 使用自定义组件渲染 CMS 区块。
  • 缓存已发布的内容。
  • 保持预览内容的动态性。
  • 将私有凭据保留在服务器上。
Continue Reading
Previous‹REST API 概览NextGET /routes›