隆重推出 DatoCMS 視覺化編輯 (Visual Editing)

什麼是 DatoCMS 視覺化編輯？

DatoCMS 視覺化編輯是一項革命性的功能，旨在消除傳統無頭 CMS 工作流程中內容建立與內容呈現之間脫節的問題。它不再強迫內容編輯者瀏覽複雜的後台表單並猜測哪個欄位對應到哪個頁面元素，而是允許他們直接與即時網站預覽互動。此功能將直觀的「所見即所得」(WYSIWYG) 體驗直接帶入無頭環境，確保內容變更快速、準確且具有情境感知能力。它從根本上將編輯者的思維從管理資料模型轉變為管理頁面和文章。

這項強大的功能由兩種截然不同但又相輔相成的流程提供支援：點擊編輯（內容連結 Content Link）和並排編輯（視覺化模式 Visual Mode）。至關重要的是，此功能在所有 DatoCMS 計畫中都可用，包括免費方案，並且受惠於專門為 Next.js、Astro、Svelte 和 Vue 等現代前端框架設計的 SDK，使現有和新專案的採用變得無縫銜接。

主要功能

• 點擊編輯（內容連結 Content Link）： 編輯者在草稿模式下造訪即時網站，將滑鼠懸停在可編輯內容上，點擊後即可立即在新分頁中開啟 DatoCMS 中對應的欄位。無論託管在哪裡（Vercel、Netlify、Cloudflare），此功能完全在前端運作。
• 並排視覺化模式 (Side-by-Side Visual Mode)： Web Previews 外掛程式的增強版本，它在一側顯示網站預覽，並在旁邊直接顯示編輯面板。點擊內容會立即開啟相關的編輯面板，無需切換情境。
• 隱寫術後端 (Steganography Backend)： 系統使用附加到 GraphQL API 回應的隱形 Unicode 字元，來編碼每個內容片段的來源中繼資料（記錄 ID、欄位路徑、地區設定），使前端能夠自動將點擊對應到正確的資料來源，而無需開發人員手動接線。
• 雙向情境同步： 在並排模式下，預覽面板中的捲動操作會使編輯面板保持同步，反之亦然，在複雜編輯過程中保持完美的情境一致性。
• 通用相容性： 開箱即用地支援複雜的內容結構，包括指向記錄的連結、模組化區塊、結構化文字 (Structured Text) 和本地化的欄位。
• 框架 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 Previews 外掛程式，以直接在 CMS 側邊欄中啟用高效能的並排編輯介面。

設定完成後，編輯者只需在草稿模式下導覽至網站（或開啟 CMS 介面），然後開始點擊他們想要修改的內容，即可立即看到變更反映或準備好進行編輯。

使用案例

1. 高效率行銷團隊： 經常發布活動或登陸頁面的團隊可以直接在頁面預覽上快速迭代文案和圖像，從而大幅減少協調設計、開發和內容團隊所需的時間。
2. 複雜電子商務產品頁面： 管理具有深度嵌套模組化內容（例如產品描述、功能區塊、規格）的編輯者可以直接點擊他們需要更新的特定區塊，而無需手動搜尋數十個內容記錄。
3. 多語言內容管理： 對於支援多個地區設定的網站，視覺化編輯可確保編輯者正在編輯正確本地化的內容版本，因為中繼資料包含地區設定資訊，可防止意外覆寫翻譯的字串。
4. 代理商開發與客戶交接： 代理商可以部署啟用視覺化編輯功能的專案，為客戶提供立即直觀的編輯體驗，最大限度地減少培訓時間並減少與內容位置相關的支援請求。
5. 迭代設計與內容配對： 開發人員和設計師可以與內容編輯者即時協同工作。隨著新元件的建置，編輯者可以使用視覺化介面立即填充生產就緒的內容。

常見問題 (FAQ)

問：視覺化編輯是否只適用於付費方案？ 答：不是。DatoCMS 已將視覺化編輯功能開放給所有方案，包括免費方案，確保所有使用者都能從這種增強的編輯體驗中受益，而無需升級。

問：如果我使用的框架未明確列出（例如 Remix），會發生什麼情況？ 答：所有官方 SDK 都是建立在與框架無關的函式庫 @datocms/content-link 之上。您可以直接將此核心函式庫整合到任何前端設定中，以實現相同的功能。

問：我需要手動將每一項內容對應到其欄位嗎？ 答：絕對不需要。核心創新在於隱寫術技術，它會自動將來源中繼資料附加到您的 GraphQL 回應中。<ContentLink /> 元件會掃描此中繼資料並自動接通編輯覆蓋層，從而省去了繁瑣的手動設定。

問：我可以使用視覺化編輯搭配我現有的 Web Previews 設定嗎？ 答：可以。並排視覺化模式是現有 Web Previews 外掛程式的升級。如果您已經在使用 Web Previews，啟用新功能只需最少的設定變更。

問：此功能支援哪些類型的內容結構？ 答：它支援 DatoCMS 內容模型的完整範圍，包括標準欄位、指向其他記錄的連結、複雜的結構化文字區塊以及深度嵌套的模組化內容結構。