檢閱現有設定
在 AEM 中開始任何新專案的第一步是建立其作為工作區的設定,以及建立 GraphQL API 端點。若要檢閱或建立設定,請導覽至「工具」>「一般」>「設定瀏覽器」。
請注意到,本教學課程已經建立 WKND Shared
網站設定。若要為您自己的專案建立設定,請選取右上角的「建立」,並填寫出現在「建立設定」模態視窗中的表單。
檢閱 GraphQL API 端點
接下來,您必須設定 API 端點,作為傳送 GraphQL 查詢的目的地。若要檢閱現有的端點或建立一個端點,請導覽至「工具」>「一般」>「GraphQL」。
請注意,WKND Shared Endpoint
已經建立。若要建立您專案的端點,請選取右上角的「建立」,然後按照工作流程進行。
檢閱 WKND 內容結構和語言根資料夾
明確定義的內容結構是 AEM Headless 能成功實施的關鍵,這對於您的內容在擴充性、可用性與權限管理方面都非常有幫助。
語言根資料夾是以 ISO 語言代碼為名稱 (例如 EN 或 FR) 的資料夾。AEM 翻譯管理系統使用這些資料夾來定義內容的主要語言,以及內容翻譯的語言。
前往「導覽」>「資產」>「檔案」。
導覽至 WKND 共用 資料夾。請注意到標題為「英文」而名稱為「EN」的資料夾。此資料夾是 WKND 網站專案的語言根資料夾。
針對您自己的專案,請在您的設定中建立語言根資料夾。如需詳細資訊,請參閱建立資料夾區段。
指派設定至巢狀資料夾
最後,您必須將專案的設定指派至語言根資料夾。透過這樣的指派,便能夠根據您的專案設定中所定義的內容片段模型建立內容片段。
若要將語言根資料夾指派至設定,請選取該資料夾,然後選取頂端導覽列中的「屬性」。
接下來,導覽至「雲端服務」索引標籤,然後選取「雲端設定」欄位中的資料夾圖示。
在出現的模態視窗中,選取您先前建立的設定,並將語言根資料夾指派給該設定。
最佳實務
在 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 建立開發環境。
- 開始進行教學課程的建立內容片段模型章節。