什麼是 Headless CMS?
- 主題:
- 無周邊
建立對象:
- 管理員
- 開發人員
Headless 內容管理是當今網頁設計的關鍵發展,它將前端、用戶端應用程式與後端、內容管理系統分離。因此,Headless CMS 會負責 (後端) 內容管理服務以及允許 (前端) 應用程式存取該內容的機制。
但是這個術語的真正含義是什麼?我們在此 (非常快速地) 介紹重要概念。
什麼是內容管理系統 (CMS)?
讓我們從基礎開始 - 什麼是內容管理系統?
內容管理系統 (CMS) 會儲存、管理和傳遞用於提供線上體驗的內容。
傳統 CMS
傳統上,CMS 即已包括用於儲存和傳遞內容的後端功能,以及用於呈現瀏覽器將顯示的體驗標記的前端技術 (展示層)。
非常強大,讓您可以完全控制內容和格式,但缺少當今快速發展的環境中所需的一些靈活性;例如,與外部應用程式結合。
Headless CMS
使用無周邊內容管理系統,後端和前端現在可分離。
無周邊部分是內容後端,因為無周邊內容管理系統 (CMS) 是僅限後端的內容管理系統,明確設計和建置為內容存放庫,可透過 API 存取內容,以便在任何裝置上顯示。
獨立開發和維護的前端使用內容傳遞 API 通常採用 JSON 格式從無周邊後端擷取內容,通常採用 JSON 格式。例如,這可以作為 React 或 Angular 應用程式 (單頁應用程式 (SPA))。
Headless CMS 後端通常需要內容已根據模型或方案進行結構化。這有助於用戶端應用程式要求正確內容來呈現體驗。一些 CMS 可以公開 JSON 格式的結構化和非結構化內容。
此拓撲的一個關鍵特性是 Headless CMS 以 JSON 格式提供的內容是純內容,沒有設計或版面資訊。在 Headless CMS 實作中,所有格式和版面都由分離的前端應用程式維護。
Headless CMS 拓撲的一個主要好處是能夠跨多個管道重複使用內容,這可能使用不同的用戶端前端實作。這可以提高前端開發流程效率。但這也表示前端體驗開發流程可以變得非常以程式碼和 IT 為中心,IT 基本上擁有體驗。
內容傳遞 API
Headless CMS 可以提供一種或多種方式將內容公開給用戶端應用程式。最常見的是 HTTP REST API、GraphQL API 或兩者皆有。
雖然 REST API 通常看起來是一種更簡單的要求內容方式 (例如,為符合條件的所有內容提供 JSON),但它們通常會向用戶端應用程式提供太多內容。這可能導致用戶端必須剖析和篩選掉用於呈現的實際必要內容。
相比之下,GraphQL 是一種更有針對性的機制,允許用戶端應用程式準確查詢用於呈現體驗的必要內容。
全堆疊 CMS
全堆疊 CMS 通常代表用於管理和傳遞內容的傳統拓撲,包括用於呈現體驗的內容後端和前端技術。使用全堆疊 CMS 進行內容傳遞通常發生內部內容傳遞 API 上。前端功能通常特定於全堆疊 CMS。這種前端技術與內容後端的結合讓所見即所得 (WYSIWYG) 體驗編寫成為主要優勢。
混合 CMS
全堆疊 CMS 的現代進化版可以是混合 CMS。這旨在結合兩者的強項:
- 使用現代前端工具跨管道進行高效的前端開發,
- 同時保留 WYSIWYG 體驗編寫讓非技術使用者可使用,並避免 IT 成為跨組織內容和體驗管理的瓶頸。
這是透過採用現代前端框架 (例如 React) 但保持與內容後端的最低結合度來實現的。
分離的 CMS
雖然這個術語「分離的 CMS」有時是獨立使用的,但它本質上是透過強調其與用戶端前端應用程式分離的主要特性來描述 Headless CMS 後端。
有周邊 CMS
這是傳統 CMS 的另一個術語。
延伸閱讀
此處提供更多在 Headless CMS 拓撲中使用 AEM 的相關資訊:
Experience Manager
- 概觀
- 發行說明
- 發行資訊
- AEMaaCS 功能發行說明
- AEMaaCS 維護版本發行說明
- Cloud Manager 發行說明
- 移轉工具發行說明
- Workfront for Experience Manager 加強連接器發行說明
- 產生變化版本的發行說明
- 通用編輯器發行說明
- 新增功能
- AEM Cloud Service 的重大變更
- 已過時和已移除的功能和 API
- 發行前通道
- 安全性
- 上線
- AEM as a Cloud Service 移轉歷程
- Sites
- 資產
- 概觀與新增功能
- Assets as a Cloud Service 重大變更
- Assets 架構
- 支援的檔案格式
- 資產微服務概觀
- Assets 中的協助工具
- Assets as a Cloud Service Ultimate
- 啟用 Assets as a Cloud Service Ultimate
- Assets as a Cloud Service Prime
- Assets 協作者使用者
- 為 Edge Delivery Services 製作內容時,將 AEM Assets 進行整合
- 管理數位資產
- 微前端資產選擇器
- 微前端目標選擇器
- 共用資產
- 重新處理資產
- 開始使用資產微服務
- 新增和上傳資產
- 搜尋資產
- 資產管理常見任務
- 管理出版物
- 預覽 3D 資產
- 影像的智慧型標記
- 為您視訊資產加上智慧型標記
- 如何組織資產
- 使用 Adobe Stock 資產
- 管理收藏集
- 中繼資料概觀
- 與 Adobe Creative Cloud 整合
- 如何新增或編輯中繼資料
- 查看資料夾資產和集合
- 使用和設定 Assets Insights
- 中繼資料設定檔
- 中繼資料結構
- 管理影片資產
- 使用 MSM 重複使用資產
- 下載資產
- 要編輯的簽入和簽出資產
- 建立和共用私人資料夾
- 資產的 Digital Rights Management
- 浮水印資產
- 使用 Creative Cloud API 處理資產
- 影像的顏色標記
- 管理 PDF 文件
- 設定、管理及擴充 Assets
- 共用與發佈資產
- 內容片段
- Dynamic Media
- Dynamic Media 歷程:基礎知識
- Experience League 的 Dynamic Media 電子報
- 設定 Dynamic Media
- 使用 Dynamic Media
- 設定 Dynamic Media
- Dynamic Media Prime 與 Ultimate
- 啟用 Dynamic Media Prime 與 Ultimate
- 選擇性 - 設定 Dynamic Media,一般設定
- 選擇性 - 設定 Dynamic Media,發佈設定
- Dynamic Media 疑難排解
- 設定 Dynamic Media 別名帳戶
- Dynamic Media 無障礙內容
- 管理 Dynamic Media 資產
- 影像品質最佳化的最佳做法
- 影像設定檔
- 視訊設定檔
- 管理 Dynamic Media 影像預設集
- 套用 Dynamic Media 影像預設集
- 管理 Dynamic Media 檢視器預設集
- 套用 Dynamic Media 檢視器預設集
- 大量集預設集
- 透過 Dynamic Media 使 CDN 快取失效
- 透過 Dynamic Media Classic 使 CDN 快取失效
- 智慧型影像
- 具有用戶端裝置像素比的智慧型影像
- 傳遞 Dynamic Media 資產
- Dynamic Media 範本
- 在 Dynamic Media 中啟動直接連結保護
- 3D 支援
- Dynamic Media 限制
- 影像集
- 全景影像
- 混合媒體集
- 迴轉集
- Dynamic Media 中的視訊
- 輪播橫幅
- 互動式影像
- 互動式影片
- 360 VR 影片
- 整合 Dynamic Media 檢視器與 Adobe Analytics 和 Adobe Experience Platform 標記
- 使用 Quickview 建立自訂快顯視窗
- 為回應式網站傳遞最佳化影像
- 預覽 Dynamic Media 資產
- 將 Dynamic Media 資產新增至頁面
- 將 Dynamic Video 或影像檢視器內嵌在網頁上
- 將 URL 連結至您的網頁應用程式
- 使用規則集轉換 URL
- 發佈 Dynamic Media 資產
- 在 Dynamic Media 中使用選擇性發佈
- 使用選取器
- HTTP2 傳送內容常見問題集
- Flash 檢視器產品壽命終止
- DHTML 檢視器產品壽命終止
- 具有 OpenAPI 功能的 Dynamic Media
- 使用資產檢視
- Content Hub
- 最佳做法
- 與 Adobe Workfront 整合
- 整合 Adobe Express
- 與 Creative Cloud 整合
- Forms
- 概觀
- 設定和移轉
- 整合
- 服務
- 將 AEM Forms as a Cloud Service 與 Adobe Sign 整合
- 將 AEM Forms as a Cloud Service 與 DocuSign 整合
- 將最適化表單整合至 Adobe Analytics
- 檢視並了解 Adaptive Forms Analytics 報告
- 向 Adobe Workfront Fusion 提交最適化表單
- 將最適化表單與 Microsoft Power Automate 整合
- 在 AEM Sites 頁面中內嵌最適化表單
- 將根據核心元件的最適化表單內嵌至外部網頁
- 將根據基礎元件的最適化表單內嵌至外部網頁
- 將最適化表單與 Adobe Marketo Engage 進行整合
- 表單資料模式
- 服務
- 最適化表單
- 建立最適化表單片段
- 新增最適化表單至 AEM Sites 頁面或體驗片段
- 核心元件
- 建立最適化表單
- 建立最適化表單
- 設定以核心元件為主的最適化表單版面
- 建立最適化表單片段
- 為最適化表單建立主題 - 核心元件
- 建立以核心元件為基礎的最適化表單範本
- 以 XFA Form 範本為基礎建立最適化表單 (核心元件)
- 為最適化表單產生記錄文件
- 使用機器翻譯或人工翻譯來翻譯最適化表單
- 設定重新導向頁面或感謝訊息
- 建立具有可重複區段的表單
- 為最適化表單設定提交動作
- 將最適化表單提交至 Azure Blob 儲存體
- 將最適化表單提交至 Microsoft
- 將最適化表單連結到 Microsoft® SharePoint
- 將 AEM 最適化表單與 AEM 工作流程整合
- 設定提交到最適化表單的 REST 端點提交動作
- 設定最適化表單的傳送電子郵件提交動作
- 在最適化表單中使用 Google reCAPTCHA
- 在最適化表單核心元件中使用 hCaptcha
- 於最適化表單核心元件中使用 Turnstile 驗證碼
- 在最適化表單中新增自訂的錯誤處理常式
- 為以核心元件為主的最適化表單新增地區設定
- 設計最適化表單的 JSON 結構 (核心元件)
- 在最適化表單中新增版本設定、評論和附註
- 比較最適化表單
- 建立自訂提交動作
- 於 Experience Manager Forms 中管理發佈
- 以核心元件為主之最適化表單的規則編輯器簡介
- 以核心元件為主之最適化表單的自訂函數簡介
- Forms Portal 及其元件簡介
- 建立最適化表單
- Foundation 元件
- 最適化表單關鍵字
- 預覽表單
- 互動式通訊
- 以 Forms 為中心的工作流程
- 通訊 API
- 交易報告
- 開發人員 API 參考
- 疑難排解
- Screens
- Content and Commerce
- Edge Delivery Services
- Headless
- 生成式 AI
- 實作
- 為 AEM as a Cloud Service 實作應用程式
- 使用 Cloud Manager
- 為 AEM as a Cloud Service 開發
- AEM 專案結構
- AEM 專案存放庫結構套件
- AEM as a Cloud Service SDK
- AEM 快速開發環境
- AEM as a Cloud Service 開發指南
- AEM as a Cloud Service Developer Console (Beta)
- 記錄
- 記錄轉送
- 設定和設定瀏覽器
- AEM 技術基礎
- API 參考資料
- 基於 OpenAPI 的 API
- 為伺服器端 API 產生存取權杖
- 快速網站建立和前端自訂
- 使用前端管道開發網站
- 自訂網站範本和主題
- AEM Headful 和 Headless 技術
- 禁止透過 Sling 模型匯出工具序列化 ResourceResolvers
- 全端 AEM 開發
- 通用編輯器
- Headless 體驗管理
- 混合式與 SPA 開發
- 開發人員工具
- 個人化
- 設定和擴充 AEM as a Cloud Service
- 部署至 AEM as a Cloud Service
- 製作層
- 內容傳遞概觀
- 連接器
- 運作
- 合規性