1.1.2設定您的AEM CS環境
1.1.2.1設定您的GitHub存放庫
移至https://github.com。 按一下 登入。
輸入您的認證。 按一下 登入。
登入後,您將會看到GitHub控制面板。
移至https://github.com/adobe-rnd/aem-boilerplate-xcom。 您將會看到此訊息。 按一下 使用此範本,然後按一下 建立新的存放庫。
對於 存放庫名稱,請使用citisignal-aem-accs
。 將可見度設定為 私人。 按一下 建立存放庫。
幾秒鐘後,您就會建立存放庫。
接著,移至https://github.com/apps/aem-code-sync。 按一下 安裝 或 設定。
按一下GitHub使用者帳戶旁的 繼續 按鈕。
按一下GitHub使用者帳戶旁的 設定。
按一下 僅選取存放庫,然後新增您剛建立的存放庫。
向下捲動並按一下 儲存。
然後您會取得此確認。
1.1.2.2更新檔案fstab.yaml
在您的GitHub存放庫中,按一下以開啟檔案fstab.yaml
。
按一下 編輯 圖示。
您現在需要在第3行更新欄位 url 的值。
您需要使用特定AEM Sites CS環境的URL結合GitHub存放庫的設定,來取代目前值。
這是URL目前的值: https://author-p130360-e1272151.adobeaemcloud.com/bin/franklin.delivery/adobe-rnd/aem-boilerplate-xcom/main
。
URL有3個部分需要更新
https://XXX/bin/franklin.delivery/YYY/ZZZ/main
XXX應取代為AEM CS作者環境的URL。
YYYY應取代為您的GitHub使用者帳戶。
ZZZ應取代為您在上一個練習中使用的GitHub存放庫名稱。
您可以前往https://my.cloudmanager.adobe.com找到AEM CS Author環境的URL。 按一下您的 程式 以開啟。
接著,按一下 環境 標籤上的3個點 …,然後按一下 檢視詳細資料。
然後您將會看到您的環境詳細資料,包括 作者 環境的URL。 複製URL。
XXX = author-p166717-e1786231.adobeaemcloud.com
若為GitHub使用者帳戶名稱,您可輕鬆在瀏覽器的URL中找到。 在此範例中,使用者帳戶名稱為woutervangeluwe
。
YYYY = woutervangeluwe
如需GitHub存放庫名稱,您也可以在已在GitHub中開啟的瀏覽器視窗中找到。 在此案例中,存放庫名稱為citisignal
。
ZZZ = citisignal-aem-accs
這3個值合併後,會產生這個需要在檔案fstab.yaml
中設定的新URL。
https://author-p166717-e1786231.adobeaemcloud.com/bin/franklin.delivery/woutervangeluwe/citisignal-aem-accs/main
按一下 認可變更……。
按一下 認可變更。
檔案fstab.yaml
現在已更新。
1.1.2.3上傳CitiSignal資產和網站
移至https://my.cloudmanager.adobe.com。 按一下您的 程式 以開啟。
接著,按一下作者環境的URL。
按一下 使用Adobe登入。
然後您會看到您的作者環境。
您的URL如下所示: https://author-p166717-e1786231.adobeaemcloud.com/ui#/aem/aem/start.html?appId=aemshell
您現在需要存取AEM的 CRX封裝管理員 環境。 若要這麼做,請從URL移除ui#/aem/aem/start.html?appId=aemshell
,並以crx/packmgr
取代,這表示您的URL現在看起來應該像這樣:https://author-p166717-e1786231.adobeaemcloud.com/crx/packmgr
。
點選 Enter 以載入封裝管理員環境
接著,按一下 上傳封裝。
按一下 瀏覽 以找出要上傳的封裝。
要上傳的封裝名稱為 citisignal-assets.zip,可從此處下載: https://one-adobe-tech-insiders.s3.us-west-2.amazonaws.com/one-adobe/citisignal_aem_accs.zip。
選取封裝citisignal_aem_accs.zip
並按一下 開啟。
接著,按一下 確定。
然後會上傳套件。 接著,在您剛上傳的封裝上按一下 安裝。
按一下 安裝。
幾分鐘後,就會安裝您的套件。
您現在可以關閉此視窗。
1.1.2.4發佈CitiSignal資產
移至https://my.cloudmanager.adobe.com。 按一下您的 程式 以開啟。
接著,按一下作者環境的URL。
按一下 使用Adobe登入。
然後您會看到您的作者環境。 按一下 Assets。
按一下 檔案。
按一下以選取資料夾 CitiSignal,然後按一下 管理出版物。
按一下 下一步。
按一下 發佈。
您的資產現已發佈。
1.1.2.5發佈CitiSignal網站
按一下熒幕左上角的 Adobe Experience Manager 產品名稱,然後按一下 Assets 旁的 箭頭。
接著,按一下 網站。
然後您應該會看到您之前在安裝套件之後建立的 CitiSignal 網站。
若要將您的網站連結至您之前建立的GitHub存放庫,您必須建立 Edge Delivery Services設定。
第一個步驟是建立 雲端設定。
若要這麼做,請按一下熒幕左上角的 Adobe Experience Manager 產品名稱,然後按一下 工具 圖示,然後選取 一般。 按一下以開啟 設定瀏覽器。
您應該會看到此訊息。 按一下 建立
將欄位 標題 和 名稱 設定為CitiSignal
。 啟用 雲端設定 的核取方塊。
按一下 建立。
然後您應該擁有此專案。
接下來,您需要更新您剛建立的 雲端設定 的某些欄位。
若要這麼做,請按一下熒幕左上角的 Adobe Experience Manager 產品名稱,然後按一下 工具 圖示,然後選取 雲端服務。 按一下以開啟 Edge Delivery Services設定。
選取 CitiSignal,按一下 建立 並選取 組態。
您現在需要填寫 組織 和 網站名稱 欄位。 若要這麼做,請先看看GitHub存放庫的URL。
- 組織:使用您的GitHub組織名稱名稱,在此範例中為
woutervangeluwe
- 網站名稱:使用GitHub存放庫的名稱,應為
citisignal-aem-accs
。
按一下 儲存並關閉。
然後您應該擁有此專案。 在新建立的Edge雲端設定前面啟用核取方塊,然後按一下 發佈。
1.1.2.6更新檔案路徑.json
在您的GitHub存放庫中,按一下以開啟檔案paths.json
。
按一下 編輯 圖示。
您現在需要在第3、4、5、6、7和10行以aem-boilerplate-commerce
取代文字CitiSignal
。
按一下 認可變更。
按一下 認可變更。
檔案paths.json
現在已更新。
1.1.2.7發佈CitiSignal網站
按一下熒幕左上角的 Adobe Experience Manager 產品名稱,然後選取 網站。
接著,按一下 CitiSignal 前面的核取方塊。 然後,按一下 管理出版物。
按一下 下一步。
按一下 包含子設定。
按一下以選取核取方塊 包含子項,然後按一下以取消選取其他核取方塊。 按一下 「確定」。
按一下 發佈。
然後您將被送回這裡。 按一下 CitiSignal,選取 索引 前面的核取方塊,然後按一下 編輯。
您的網站將在 通用編輯器 中開啟。
您現在可以移至main--citisignal-aem-accs--XXX.aem.page
及/或main--citisignal-aem-accs--XXX.aem.live
,在將XXX取代為GitHub使用者帳戶(在此範例中為woutervangeluwe
)後存取您的網站。
在此範例中,完整URL會變成:https://main--citisignal-aem-accs--woutervangeluwe.aem.page
和/或https://main--citisignal-aem-accs--woutervangeluwe.aem.live
。
可能需要一些時間,才能正確顯示所有資產,因為它們必須先發佈。
然後您會看到以下內容:
1.1.2.8測試頁面效能
移至https://pagespeed.web.dev/。 輸入您的URL並按一下 分析。
然後您會發現,您的網站(在行動裝置和案頭視覺效果中)會獲得高分:
行動裝置:
案頭:
下一步: 開發自訂區塊
返回Adobe Experience Manager Cloud Service和Edge Delivery Services