AEM Headless的進階概念
此端對端教學課程繼續進行基本教學課程,涵蓋Adobe Experience Manager (AEM) Headless和GraphQL的基礎知識。 進階教學課程說明使用內容片段模型、內容片段和AEM GraphQL持續查詢的深入層面,包括在使用者端應用程式中使用GraphQL持續查詢。
先決條件
完成AEM as a Cloud Service 🔗的快速設定,以設定您的AEM as a Cloud Service環境。
強烈建議您先完成先前的基本教學課程和影片系列教學課程,再繼續此進階教學課程。 雖然您可以使用本機AEM環境完成本教學課程,但本教學課程僅涵蓋AEM as a Cloud Service的工作流程。
目標
本教學課程涵蓋下列主題:
- 使用驗證規則和更進階的資料型別(例如Tab預留位置、巢狀片段參照、JSON物件以及日期和時間資料型別)建立內容片段模型。
- 使用巢狀內容和片段參考時製作內容片段,並為內容片段製作控管設定資料夾原則。
- 使用具有變數和指令的GraphQL查詢來探索AEM GraphQL API功能。
- 在AEM中使用引數保留GraphQL查詢,並瞭解如何將快取控制引數用於保留查詢。
- 使用AEM Headless JavaScript SDK將持續查詢請求整合至範例WKND GraphQL React應用程式。
AEM Headless的進階概念概覽
以下影片提供本教學課程中所涵蓋概念的高層級概觀。 此教學課程包括使用更進階的資料型別定義內容片段模型、巢狀內容片段,以及在AEM中保留GraphQL查詢。
專案設定
WKND網站專案具有所有必要的設定,因此您可在完成快速設定後立即啟動教學課程。 本節僅重點說明您在建立自己的AEM Headless專案時可以使用的一些重要步驟。
檢閱現有設定
在AEM中開始任何新專案的第一步是建立其設定,作為工作區並建立GraphQL API端點。 若要檢閱或建立設定,請瀏覽至 工具 > 一般 > 設定瀏覽器。
請注意,WKND Shared
網站組態已經為教學課程建立。 若要為您自己的專案建立設定,請選取右上角的 建立,並完成出現的「建立設定」強制回應視窗中的表單。
檢閱GraphQL API端點
接下來,您必須設定API端點,以將GraphQL查詢傳送至。 若要檢閱現有端點或建立端點,請瀏覽至 工具 > 一般 > GraphQL。
請注意,WKND Shared Endpoint
已經建立。 若要建立專案的端點,請選取右上角的 建立,然後依照工作流程進行。
檢閱WKND內容結構和語言根資料夾
明確定義的內容結構是AEM Headless實施成功的關鍵。 它有助於您管理內容的可擴充性、可用性和許可權。
語言根資料夾是以ISO語言代碼作為其名稱(例如EN或FR)的資料夾。 AEM翻譯管理系統使用這些資料夾來定義內容的主要語言和內容翻譯的語言。
移至 導覽 > Assets > 檔案。
導覽至 WKND共用 資料夾。 觀察標題為「English」且名稱為「EN」的資料夾。 此資料夾是WKND網站專案的語言根資料夾。
針對您自己的專案,在設定中建立語言根資料夾。 如需詳細資訊,請參閱建立資料夾的相關章節。
將設定指派給巢狀資料夾
最後,您必須將專案的設定指派給語言根資料夾。 此指派可讓您根據專案設定中定義的內容片段模型來建立內容片段。
若要將語言根資料夾指派給組態,請選取資料夾,然後在頂端導覽列中選取 屬性。
接著,導覽至 Cloud Service 標籤,並在 雲端設定 欄位中選取資料夾圖示。
在出現的強制回應視窗中,選取您先前建立的設定,以將語言根資料夾指派給它。
最佳做法
以下是在AEM中建立您自己的專案時的最佳實務:
- 資料夾階層模型化時應考慮到本地化和翻譯。 換言之,語言資料夾應巢狀內嵌於設定資料夾中,如此可讓您輕鬆翻譯這些設定資料夾中的內容。
- 資料夾階層應保持平坦且直接。 請避免在稍後移動或重新命名資料夾和片段,尤其是在發佈以供即時使用後,因為這會變更路徑,進而影響片段參考和GraphQL查詢。
入門和解決方案套件
有兩個AEM 套件 可用,可以透過套件管理員安裝
- Advanced-GraphQL-Tutorial-Starter-Package-1.1.zip稍後會在教學課程中使用,並包含範例影像和資料夾。
- Advanced-GraphQL-Tutorial-Solution-Package-1.2.zip包含第1-4章的完成解決方案,包括新的內容片段模式、內容片段和持續的GraphQL查詢。 對於想要直接跳到使用者端應用程式整合章節的人很有用。
React應用程式 — 進階教學課程 — WKND Adventures專案可供檢閱和探索範例應用程式。 此範例應用程式會叫用持續存在的GraphQL查詢,從AEM擷取內容,並在沈浸式體驗中呈現。
快速入門
若要開始使用這個進階教學課程,請依照下列步驟進行:
- 使用AEM as a Cloud Service設定開發環境。
- 開始有關建立內容片段模型的教學課程章節。