Visual Editing by DatoCMS

DatoCMS 可视化编辑是什么？

DatoCMS 可视化编辑是一项功能，让内容编辑者可以直接点击实时网站上的任意元素，在 CMS 中进行编辑。编辑者无需在记录表单中翻找正确的字段，只需点击想要修改的标题、图片或区块即可。该系统利用隐写术——在 GraphQL API 响应的每个字符串末尾附加不可见的 Unicode 字符——来编码每个值的来源，因此前端会自动知道每段内容的确切出处。结合草稿模式和实时更新，修改内容成为一种无缝的所见即所得体验。

适用人群

• 内容编辑者：希望告别在记录表单中“侦探式”查找字段，直接点击页面元素进行编辑
• 开发者：需要一种极其简单的实现方式，能与现有 DatoCMS 项目配合，无需手动将每段内容与其源字段关联
• 使用 Next.js、Astro、Svelte 或 Vue 的团队：希望为编辑者提供可视化编辑体验，无需更换托管服务商或重建前端

主要功能

通过内容链接实现点击编辑

编辑者以草稿模式访问网站，悬停在内容上查看可编辑区域，点击即可在新标签页中打开 DatoCMS。此功能完全在前端实现，支持任何托管服务——Vercel、Netlify、Cloudflare，应有尽有。再也不需要问“那个字段在哪儿来着？”

并排可视化模式

Web Previews 插件迎来升级：左侧预览，右侧编辑面板。点击任意内容，编辑面板即刻在右侧打开。无需切换标签页，不会丢失上下文，实时更新即时生效。该插件还支持在 CMS 侧边栏中启用预览链接、面板间的双向导航，以及全屏可视化编辑模式。

自动元数据编码

隐写术将每个值的来源（记录 ID、字段路径、语言区域）直接嵌入 GraphQL API 响应中。`` 组件会自动扫描页面中的元数据，并在正确的 DOM 节点上渲染编辑覆盖层——无需手动关联。该功能开箱即用，支持整个内容模型：记录链接、区块、结构化文本和模块化内容。

突出亮点

“再也不需要在记录表单中翻找正确的字段了。”

这不仅仅是一个预览工具——它从根本上改变了编辑者与无头 CMS 内容的交互方式。隐写术方法意味着开发者无需手动将每段内容与其源字段关联，否则这将是繁琐至极且维护噩梦般的任务。相反，元数据会自动随内容传递，设置极其简单：只需在现有 GraphQL 请求中添加两个标头，并在布局中引入一个组件即可。

值得一试，如果……

你厌倦了编辑者反复询问“那个字段在哪儿？”并希望获得一种可视化编辑体验，能与现有 DatoCMS 项目、任何托管服务商配合，且只需极少的开发工作量。该功能在所有套餐（包括免费版）中均可使用，并提供 Next.js、Astro、Svelte 和 Vue 的 SDK。