概觀

[若要使用Edge Delivery Services從AEM Sites發佈,請按一下這裡。]{class="badge positive" title="從AEM發佈至Edge Delivery Services"}

開發人員若想使用AEM SPA編輯器將現有的React型(或Next.js)遠端SPA擴充為可編輯的AEM內容,歡迎使用多部分教學課程。

本教學課程建立在 WKND GraphQL應用程式,此類React應用程式會透過AEM GraphQL API使用AEM內容片段內容,但不會提供任何SPA內容的內容內撰寫。

關於教學課程

本教學課程旨在說明如何更新遠端SPA或在AEM環境之外執行的SPA,以使用及傳遞在AEM中撰寫的內容。

本教學課程中的大部分活動都著重於JavaScript開發,但其中涵蓋了圍繞AEM的重要方面。 這些方面包括定義內容在AEM中的製作及儲存位置,以及將SPA路由對應至AEM頁面。

此教學課程在設計上將使用 AEMas a Cloud Service 和由兩個專案組成:

  1. AEM專案 包含必須部署至AEM的設定和內容。
  2. WKND應用程式 專案是要與SPA SPA編輯器整合的AEM

最新程式碼

  • 本教學課程程式碼的起點可在上找到 GitHubremote-spa-tutorial 資料夾。

先決條件

本教學課程需要下列內容:

本教學課程假設:

  • Microsoft® Visual Studio Code 作為IDE
  • 的工作目錄 ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial
  • 以作者服務的形式執行AEM SDK,於 http://localhost:4502
  • 使用本機執行AEM SDK admin 具有密碼的帳戶 admin
  • 執行SPA於 http://localhost:3000
NOTE
需要協助設定本機開發環境嗎? 請參閱以下指南以使用 AEM as a Cloud Service SDK 設定本機開發環境

1.設定AEM for SPA編輯器

需要AEM設定才能將SPA與AEM SPA編輯器整合。 這些設定是透過AEM專案管理和部署的。 在本章中,瞭解需要哪些設定以及如何定義它們。

2.BootstrapSPA

若要讓AEM SPA Editor將SPA整合至其編寫內容,必須對SPA新增一些內容。

3.可編輯的固定元件

首先,探索新增可編輯的「固定元件」至SPA。 這說明了開發人員如何在SPA中放置特定的可編輯元件。 雖然作者可以變更元件的內容,但他們無法移除元件或變更其位置、位置或大小。

4.可編輯的容器元件

接下來,探索將可編輯的「容器元件」新增至SPA。 這說明了開發人員如何在SPA中放置容器元件。 容器元件可讓作者將允許的元件放置在其中,並調整元件的版面。

5.動態路由及可編輯元件

最後,使用前幾章中說明的概念來動態路由;根據路由的引數顯示不同內容的路由。 以下說明如何使用AEM SPA Editor來編寫程式化驅動和衍生的路由內容。

其他資源

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