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

第5章 — 編寫Content Services頁面

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

建立對象：

  • undefined
  • undefined

AEM Headless教學課程的第5章涵蓋從第4章定義的範本建立頁面。 本章建立的頁面將作為行動應用程式的JSON HTTP端點。

NOTE
已預先建立/content/wknd-mobile/en/api的頁面內容架構。 en和api的基底頁面用於架構和組織目的，但並非絕對必要。 如果API內容可能經過本地化，最佳實務就是遵循一般的語言副本和多網站管理員頁面組織最佳實務，因為API頁面可以像任何AEM Sites頁面一樣進行本地化。

建立事件API頁面

  1. 導覽至​ AEM > 網站 > WKND Mobile > English >API。

  2. 點選API頁面 ​標籤，然後點選頂端動作列中的​ 建立 ​按鈕，並在API頁面下方建立新的Events API頁面。

    1. 點選頂端動作列中的​ 建立
    2. 選取​ 事件API ​範本
    3. 在​ 名稱 ​欄位中輸入​ 事件
    4. 在​ 標題 ​欄位中輸入​ 事件API
    5. 點選頂端動作列中的​ 建立 ​以建立頁面
    6. 點選​ 完成 ​以返回AEM Sites管理員

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

編寫事件API頁面

NOTE
專案提供CSS以便為作者體驗提供一些基本樣式。

  1. 請瀏覽至​ AEM > Sites > WKND Mobile >英文> API，選取​ Events API ​頁面，然後點選頂端動作列中的​ 編輯，以編輯​ Events API ​頁面。

  2. 將​ 標誌影像 ​從「資產尋找器」拖放至「影像」元件預留位置，以新增該影像以顯示在應用程式中。

    • 使用在/content/dam/wknd-mobile/images/wknd-logo.png找到的提供的標誌。

  3. 新增​ 標籤行 ​以顯示於事件上方。

    1. 編輯​ Text ​元件
    2. 輸入文字：
      • The WKND is here.

  4. 選取要顯示的​ 事件：

    1. 在​ 屬性 ​索引標籤上設定下列設定：

      • 模型： 事件
      • 父路徑： /content/dam/wknd-mobile/en/events
      • 標籤： <留空>

    2. 在​ 元素 ​索引標籤上設定下列設定：

      • 移除任何列出的元素，以確保公開事件內容片段的所有元素。

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

檢閱API頁面的JSON輸出

藉由請求包含.model.json選擇器的頁面，可檢閱JSON輸出及其格式。

此API的消費者必須充分瞭解此JSON結構（或結構描述）。 API使用者必須瞭解結構的哪些方面已修正(即 Event API的Logo （影像）和Tag live （文字）為流動的(即 「內容片段清單」元件下列出的事件)。

在已發佈API上違反此合約，可能會導致使用應用程式中的錯誤行為。

  1. 在新的瀏覽器標籤中，使用.model.json選取器來要求Events API頁面，它會叫用AEM Content Services的JSON匯出工具，並將頁面和元件序列化為已標準化、妥善定義的JSON結構。

    這些頁面產生的JSON結構是使用應用程式必須符合的結構。

  2. 請求​ 事件API ​頁面做為​ JSON。

    結果看起來應該類似於：

AEM Content Services JSON輸出

NOTE
使用.tidy選擇器，可以以​ 整齊 （格式化）的方式輸出此JSON，以方便人類閱讀：

下一步

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

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