DatoCMS 可视化编辑介绍

什么是 DatoCMS 可视化编辑？

DatoCMS 可视化编辑是一项革命性的功能，旨在消除传统无头 CMS 工作流程中内容创建与内容展示之间存在的脱节。它不再强迫内容编辑人员去浏览复杂的后端表单并猜测哪个字段对应哪个页面元素，而是允许他们直接与实时网站预览进行交互。此功能将直观的“所见即所得”（WYSIWYG）体验直接带入无头环境，确保内容更改快速、准确且具有上下文感知能力。它从根本上将编辑人员的思维模式从管理数据模型转变为管理页面和文章。

这项强大的功能由两种不同但互补的工作流程提供支持：点击编辑（内容链接）和并排编辑（可视化模式）。至关重要的是，此功能在所有 DatoCMS 计划（包括免费套餐）中均可用，并由专用的 SDK 支持，可用于 Next.js、Astro、Svelte 和 Vue 等现代前端框架，使现有和新项目都能无缝采用。

主要功能

• 点击编辑（内容链接）： 编辑人员在草稿模式下访问实时站点，将鼠标悬停在可编辑内容上，然后单击即可在新标签页中立即打开 DatoCMS 中相应的字段。这完全在前端运行，无论托管平台（Vercel、Netlify、Cloudflare）如何。
• 并排可视化模式： Web 预览插件的增强版本，在一侧显示网站预览，在另一侧直接显示编辑面板。单击内容会立即打开相关的编辑面板，无需切换上下文。
• 隐写术后端： 系统使用附加到 GraphQL API 响应的不可见 Unicode 字符来编码每个内容片段的源元数据（记录 ID、字段路径、区域设置），使前端能够在不进行手动开发人员连接的情况下自动将点击映射到正确的数据源。
• 双向上下文同步： 在并排模式下，预览面板中的滚动会使编辑面板保持同步，反之亦然，从而在复杂编辑过程中保持完美的上下文。
• 通用兼容性： 可立即用于复杂的コンテンツ结构，包括指向记录的链接、模块化块、结构化文本和本地化字段。
• 框架 SDK 支持： 专为主要框架（React/Next.js、Astro、Svelte/SvelteKit、Vue/Nuxt）设计的 SDK，基于框架无关的 @datocms/content-link 库，简化了实现过程。

如何使用 DatoCMS 可视化编辑

开始使用可视化编辑的设计是最小化的，只需要开发人员完成三个主要步骤即可为其内容团队启用该体验：

1. 启用 Stega 编码： 通过 GraphQL 获取草稿内容时，向请求添加两个特定的标头：X-Visual-Editing: v1 和 X-Base-Editing-Url: https://<YOUR-PROJECT-NAME>.admin.datocms.com。
2. 集成 ContentLink 组件： 将特定于框架的 <ContentLink /> 组件添加到主布局文件中。此组件会自动扫描渲染的 DOM 以查找嵌入的隐写元数据，并渲染必要的编辑覆盖层。
3. 解锁并排编辑（可选但推荐）： 在 DatoCMS 项目设置中安装并配置 Web 预览插件，以直接在 CMS 侧边栏中启用高效的并排编辑界面。

配置完成后，编辑人员只需在草稿模式下导航到站点（或打开 CMS 界面）并开始单击他们希望修改的内容，即可立即看到更改的反映或准备好进行编辑。

使用场景

1. 高效率营销团队： 频繁启动活动或登陆页面的团队可以直接在页面预览上快速迭代文案和图像，从而大大减少协调设计、开发和内容团队所需的时间。
2. 复杂的电子商务产品页面： 管理具有深度嵌套模块化内容（例如产品描述、功能块、规格）的编辑人员可以直接单击他们需要更新的特定部分，而无需手动搜索数十个内容记录。
3. 多语言内容管理： 对于支持多种区域设置的网站，可视化编辑可确保编辑人员正在编辑正确本地化的内容版本，因为元数据包含区域设置信息，可防止意外覆盖翻译的字符串。
4. 代理开发与客户交接： 代理机构可以部署启用可视化编辑的项目，为客户提供即时直观的编辑体验，最大限度地减少培训时间和减少与内容位置相关的支持请求。
5. 迭代设计与内容配对： 开发人员和设计人员可以与内容编辑人员实时协作。随着新组件的构建，编辑人员可以使用可视化界面立即填充生产就绪的内容。

常见问题 (FAQ)

问：可视化编辑仅在付费计划中可用吗？ A：不是。DatoCMS 已将可视化编辑功能提供给所有计划，包括免费计划，确保所有用户都能受益于这种增强的编辑体验，而无需升级。

问：如果我使用的框架未明确列出（例如 Remix），会发生什么？ A：所有官方 SDK 都是基于框架无关的库 @datocms/content-link 构建的。您可以将此核心库直接集成到任何前端设置中，以实现相同的功能。

问：我需要手动将每一条内容映射到其字段吗？ A：绝对不需要。核心创新是隐写术技术，它会自动将源元数据附加到您的 GraphQL 响应中。<ContentLink /> 组件会扫描此元数据并自动连接编辑覆盖层，从而消除了繁琐的手动配置。

问：我可以使用可视化编辑与我现有的 Web 预览设置吗？ A：是的。并排可视化模式是对现有 Web 预览插件的升级。如果您已经在使用 Web 预览，启用新功能只需要最少的配置更改。

问：此功能支持哪些类型的内容结构？ A：它支持 DatoCMS 内容建模的全范围，包括标准字段、指向其他记录的链接、复杂的结构化文本块和深度嵌套的模块化内容结构。