使用草稿进行可视化编辑

以下指南需要 tinacms: 1.0.2 或更高版本。

想直接查看最终结果？查看最终结果

在大多数情况下，您不希望在生产站点上为草稿文档创建页面。这使得处理草稿在可视化编辑中成为一个挑战。在本例中，我们将展示如何使用 Next.js 预览模式为草稿文档添加可视化编辑。

在预览模式中，getStaticProps 将在每次请求时被调用。这意味着我们可以在预览模式中有条件地获取草稿文档，并将其排除在生产站点之外。

“预览模式”可以通过几个步骤添加：

1. 添加预览模式 API 处理程序

注意：如果您尚未安装 @tinacms/auth，可以通过运行 yarn add @tinacms/auth 或 npm install @tinacms/auth 来安装

创建一个名为 pages/api/preview/enter.{ts,js} 的文件，这将处理进入预览模式的请求。该文件应如下所示：

此处理程序验证（通过 TinaCloud）令牌是否有效，然后重定向到我们要编辑的文档。

接下来，创建一个名为 pages/api/preview/exit.{ts,js} 的文件，这将处理退出预览模式的请求。该文件应如下所示：

我们现在将更新我们的 getStaticPaths，以便在生产站点中排除草稿页面。

根据您的使用情况，您也可以安全地使用 fallback 的任何值。

首先，我们将创建一个实用函数，该函数将根据我们是否处于预览模式返回所有文档或仅返回生产文档。

util/getPosts.{ts,js}

在您获取帖子列表的任何地方使用此函数（帖子索引页面）。

在使用 SSR 或“增量静态再生”（ISR）的页面上，您的 getStaticProps 函数将在每次请求时被调用。这意味着当文档是草稿且我们不在预览模式时，我们需要返回 404。

为了帮助退出预览模式，我们可以在站点顶部添加一个按钮。该按钮将显示在 getStaticProps 返回 preview: true 的任何页面中。

在 pages/_app.{ts,js} 中添加以下内容：

现在，当编辑者登录时，他们将进入预览模式，并能够上下文编辑草稿文档。

您可以查看最终结果，如果您想了解更多关于预览模式的信息，请参阅 Next.js 文档。

如果您正在使用编辑工作流，您可能希望确保预览数据从您正在编辑的分支中获取内容。要启用此功能，请通过配置中的 cmsCallback 函数订阅 branch:change 事件：

在 /api/preview/change-branch 添加另一个 API 端点，仅在我们处于预览模式时更新分支数据：

更新我们的请求以在 getStaticProps 中包含分支（如果提供）：