AEM中的Headful和Headless

Adobe Experience Manager專案可在無頭和無頭兩種模型中實作，但選項並非二進位。 AEM提供在單一專案中充分運用這兩種模型優點的彈性。本檔案提供並概述不同的模型，並說明SPA整合的層級。

概覽

AEM提供強大的工具，可在單一平台中管理內容的建立及其傳遞。這是傳統的「有頭腦」內容管理模式，內容作者和開發人員可在相同平台上工作，將體驗提供給內容消費者。

AEM也可用來簡單地管理內容，讓內容的呈現和傳遞可由其他平台管理。這是「無頭式」的內容管理模型，內容作者和開發人員在不同平台上工作，為內容消費者提供體驗。

但這不需要二進位選擇。 AEM提供前所未有的彈性，讓您可充分運用這兩種模型在專案中的優點。

AEM實作模型

在帶頭式或完整堆疊模型中，內容是根據Java、HTL等在AEM存放庫和AEM元件中管理。用於呈現使用者體驗的內容。在此模型中，建立內容、設定內容樣式、呈現內容，然後在AEM中傳送所有內容。

在無周邊模型中，內容會在AEM存放庫中管理，但透過API（例如REST和GraphQL）傳送至其他系統，以便為使用者體驗呈現內容。在此模型中，內容是在AEM中建立，但會以樣式設定、呈現，以及傳遞所有內容都會發生在其他平台上。

單頁應用程式(SPA)通常是AEM無條件傳送內容的目的地。不過，這些SPA不一定完全外部於AEM。 AEM可讓您決定將SPA整合至AEM的程度。讓我們舉個例子。

假設您已有公司的Web Shop作為SPA。其中包含所有產品詳細資訊和影像。然後您會導入AEM，以強化促銷網站、部落格和促銷活動內容等行銷工作。如何整合兩者？ AEM可啟用一系列選項：

允許系統獨立運行。
透過GraphQL從AEM提供有限內容給Web Shop。 內容可由作者在AEM中建立，但只能透過網店SPA檢視。
將網店SPA內嵌在AEM中。 內容可由作者在AEM中建立，並在AEM中於網店內容中檢視，但不受操控。
將Web Shop SPA內嵌在AEM中，並啟用可編輯的點。 內容可由作者在AEM中建立，並在AEM中於Web Shop中檢視，而作者在AEM中操控Web Shop SPA內容的能力有限。
在AEM中嵌入網頁商店SPA，並啟用整個區域進行編輯。 內容可由作者在AEM中建立，並在AEM中於Web Shop中檢視，而作者在AEM中操控Web Shop SPA內容的能力有限。

下一節將更詳細探討這些整合層級。

注意

當然，您也可以使用AEM SPA編輯器架構，將Web Shop SPA重新實作為完全運作的AEM SPA 。如果您已有AEM且想要建立新的Web商店或其他SPA，則此為建議的方法，但不在本檔案的討論範圍內。

SPA整合屬於AEM的四個層級。

0級：無整合
- SPA和AEM分別存在，且不會交換任何資訊。
- 內容是在兩個不同的系統中獨立建立、管理和傳送的。
第1級：內容片段整合
- AEM 中使用內容片段來建立和管理SPA的有限內容。
- SPA會透過AEM GraphQL API擷取此內容。
- 有些內容在AEM中管理，有些則在外部系統中管理。
- 內容只能在SPA中檢視。
第2層：將SPA內嵌於AEM
- 內容片段用於AEM中，以建立和管理SPA的內容。
- SPA會透過AEM GraphQL API擷取此內容。
- 有些內容在AEM中管理，有些則在外部系統中管理。
- 可在AEM中以內容檢視內容。
- 可在AEM中編輯有限的內容。
第3層：在AEM中內嵌並完全啟用SPA
- 內容片段用於AEM中，以建立和管理SPA的內容。
- SPA會透過AEM GraphQL API擷取此內容。
- 可在AEM中以內容檢視內容。
- 大部分內容都可在AEM內編輯。

1級是典型無頭式實作的範例。不過，內容作者只能在SPA內以內容檢視其內容。 AEM只是製作工具。

在2和3級時，AEM的優點和彈性就變得明顯，同時仍保留SPA的優點。內容作者可在AEM中建立其內容，但也可在AEM中以內容方式查看。 SPA可在AEM中撰寫，但仍以SPA形式提供。

AEM中有不同的工具可供使用，端視您選擇的整合層級而定。每個層級都以先前使用的工具為基礎。下列清單會連結至相關資源。

層級1: 內容片段和AEM 無頭架構可用來傳送AEM內容至SPA。
第2層： 除了第1層：
- RemotePage元件可用來將外部SPA內嵌至AEM中，以便在內容中檢視AEM內容。
- SPA上的某些點也可以啟用至允許AEM中的有限編輯。
第3層： 除了第2層：
- SPA的整個區域都可啟用，以允許在AEM中進行全面編輯。