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
您也應該確認這些行程式碼也已新增至檔案中:
folders:
/products/: /products/default
按一下認可變更……。
按一下認可變更。
檔案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