文件AEMAEM 教學課程AEM Headless 教學課程

第4章 — 定義內容服務範本

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • undefined
  • undefined

AEM Headless教學課程的第4章涵蓋AEM Content Services內容中AEM可編輯範本的角色。 可編輯的範本是用來定義AEM Content Services透過構成啟用AEM元件的方式向使用者端公開的JSON內容結構。

瞭解AEM Content Services中範本的角色

AEM可編輯範本用於定義存取的HTTP端點，以將事件內容公開為JSON。

傳統上，AEM會使用可編輯的範本來定義網頁，不過這僅是慣例。 可編輯的範本可用來構成​ 任何 ​內容集；內容的存取方式：在瀏覽器中作為HTML、作為JavaScript (AEM SPA Editor)使用的JSON或行動應用程式，是該頁面請求方式的函式。

在AEM Content Services中，可編輯的範本可用來定義JSON資料的公開方式。

我們將針對WKND Mobile應用程式建立單一可編輯的範本，用來驅動單一API端點。 雖然此範例只是簡單說明AEM Headless的概念，但您可以建立多個頁面（或端點），每個頁面都會公開不同的內容集，以建立更複雜、更有條理的API。

瞭解API端點

若要瞭解如何撰寫我們的API端點，以及應該向我們的WKND Mobile應用程式公開哪些內容，請讓我們重新造訪設計。

事件API頁面分解

如我們所見，我們有三個邏輯內容集可提供給行動應用程式。

  1. 標誌
  2. 標籤行
  3. 事件 ​的清單

為此，我們可以將這些需求對應至AEM元件(在此例中為AEM WCM核心元件)，以將必要內容公開為JSON。

  1. 標誌 ​是透過​ 影像元件 ​顯示
  2. 標籤行 ​是透過​ 文字元件 ​顯示
  3. 事件 ​的清單透過​ 內容片段清單元件 ​顯示，而該元件又參考一組事件內容片段。
NOTE
若要支援AEM Content Service的頁面和元件JSON匯出，頁面和元件必須​ 衍生自AEM WCM核心元件。
AEM WCM核心元件已內建功能，可支援已匯出頁面和元件的標準化JSON結構描述。 本教學課程使用的所有WKND Mobile元件（頁面、影像、文字和內容片段清單）都衍生自AEM WCM核心元件。

定義事件API範本

  1. 導覽至​ 工具 > 一般 > 範本 >WKND Mobile。

  2. 建立​ Events API ​範本：

    1. 點選頂端動作列中的​ 建立
    2. 選取​ WKND Mobile - Empty Page ​範本
    3. 點選頂端動作列中的​ 下一步
    4. 在範本標題欄位中輸入​ Events API
    5. 點選頂端動作列中的​ 建立
    6. 點選​ 開啟 ​開啟新範本以進行編輯

  3. 首先，我們允許三個已識別的AEM元件，以編輯根配置容器的原則，為內容建模。 請確定​ 結構 ​模式為作用中，選取​ Layout Container [Root]，然後點選​ 原則 ​按鈕。

  4. 在​ 屬性 > 允許的元件 ​下，搜尋​ WKND Mobile。 允許WKND Mobile元件群組中的下列元件，以便在Events API頁面上使用。

    • WKND Mobile > Image

      • 應用程式的標誌

    • WKND Mobile > Text

      • 應用程式的簡介文字

    • WKND Mobile > Content Fragment List

      • 可在應用程式中顯示的事件類別清單

  5. 完成時，點選右上角的​ 完成 ​核取記號。

  6. 重新整理 ​瀏覽器視窗，以在左側邊欄中檢視新的允許的元件清單。

  7. 從左側欄的「元件」尋找器中，拖曳下列AEM元件：

    1. 徽標的​ Image
    2. 標籤行的​ Text
    3. 事件的​ Content Fragment List

  8. 針對上述每個元件，選取它們並按下​ 解除鎖定 ​按鈕。

  9. 不過，請確定​ 配置容器 ​為​ 鎖定，以防止新增其他元件，或移除這三個元件。

  10. 點選「頁面資訊 > 以管理員檢視」以返回WKND Mobile範本清單。 選取新建立的​ Events API ​範本，然後點選頂端動作列中的​ 啟用。

https://video.tv.adobe.com/v/28342?quality=12&learn=on

NOTE
請注意，用於曲面化內容的元件會加入範本本身，並加以鎖定。 這是為了讓作者可編輯預先定義的元件，但不可任意新增或移除元件，因為變更API本身可能會破壞JSON結構的假設，並破壞耗用應用程式。 所有API都必須穩定。

後續步驟

可選擇透過AEM封裝管理員在AEM Author上安裝com.adobe.aem.guides.wknd-mobile.content.chapter-4.zip內容封裝。 此套件包含本教學課程及先前章節中概述的設定和內容。

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4