概覽

歡迎使用多部分教學課程,協助開發人員運用AEM SPA編輯器擴充現有的React型(或Next.js)Remote SPA內容,同時提供可編輯的AEM內容。

本教學課程以WKND GraphQL應用程式為基礎, React應用程式會透過AEM GraphQL API使用AEM內容片段內容,但不提供SPA內容的內容內容編寫。

關於教學課程

本教學課程旨在說明如何更新遠端SPA或在AEM內容外執行的SPA,以使用和提供在AEM中製作的內容。

教學課程中的大部分活動都著重於JavaScript開發,但是會涵蓋以AEM為中心的關鍵層面。 這些方面包括定義內容在AEM中的製作和儲存位置,以及將SPA路由對應至AEM頁面。

本教學課程旨在搭配​AEM作為Cloud Service​使用,且由兩個專案組成:

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

最新程式碼

  • 您可在feature/spa-editor分支的GitHub上找到本教學課程的程式碼。

必備條件

本教學課程需要下列項目:

本教學課程假設:

  • Microsoft® Visual Studio代 碼作為IDE
  • ~/Code/wknd-app的工作目錄
  • http://localhost:4502上以作者服務形式執行AEM SDK
  • 使用密碼為admin的本機admin帳戶執行AEM SDK
  • http://localhost:3000上執行SPA
注意

需要設定本機開發環境的協助嗎? 請參閱以下指南以使用 AEM as a Cloud Service SDK 設定本機開發環境

快速設定

快速設定可在15分鐘內讓您開始並執行WKND應用程式SPA和AEM SPA編輯器。 此加速設定會直接帶您進入教學課程的結束狀態,讓您探索在AEM SPA編輯器中編寫SPA。

1.設定AEM for SPA Editor

AEM設定是必要項目,才能將SPA與AEM SPA編輯器整合。 這些設定是透過AEM專案管理並部署。 在本章中,了解哪些設定是必要的以及如何定義。

2.BootstrapSPA

AEM SPA編輯器若要將SPA整合至其製作內容,必須對SPA新增一些內容。

3.可編輯的固定元件

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

4.可編輯的容器元件

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

5.動態路由和可編輯的元件

最後,將前幾章中解釋的概念用於動態路由;根據路由參數顯示不同內容的路由。 這說明如何使用AEM SPA編輯器,在以程式設計方式驅動和衍生的路由上製作內容。

其他資源

本頁內容