1.1.2設定您的AEM CS環境

1.1.2.1設定您的GitHub存放庫

移至https://github.com。 按一下​ 登入

AEMCS

輸入您的認證。 按一下​ 登入

AEMCS

登入後,您將會看到GitHub控制面板。

AEMCS

移至https://github.com/adobe-rnd/aem-boilerplate-xcom。 您將會看到此訊息。 按一下​ 使用此範本,然後按一下​ 建立新的存放庫

AEMCS

對於​ 存放庫名稱,請使用citisignal-aem-accs。 將可見度設定為​ 私人。 按一下​ 建立存放庫

AEMCS

幾秒鐘後,您就會建立存放庫。

AEMCS

接著,移至https://github.com/apps/aem-code-sync。 按一下​ 安裝 ​或​ 設定

AEMCS

按一下GitHub使用者帳戶旁的​ 繼續 ​按鈕。

AEMCS

按一下GitHub使用者帳戶旁的​ 設定

AEMCS

按一下​ 僅選取存放庫,然後新增您剛建立的存放庫。

AEMCS

向下捲動並按一下​ 儲存

AEMCS

然後您會取得此確認。

AEMCS

1.1.2.2更新檔案fstab.yaml

在您的GitHub存放庫中,按一下以開啟檔案fstab.yaml

AEMCS

按一下​ 編輯 ​圖示。

AEMCS

您現在需要在第3行更新欄位​ url ​的值。

AEMCS

您需要使用特定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。 按一下您的​ 程式 ​以開啟。

AEMCS

接著,按一下​ 環境 ​標籤上的3個點​ ,然後按一下​ 檢視詳細資料

AEMCS

然後您將會看到您的環境詳細資料,包括​ 作者 ​環境的URL。 複製URL。

AEMCS

XXX = author-p166717-e1786231.adobeaemcloud.com

若為GitHub使用者帳戶名稱,您可輕鬆在瀏覽器的URL中找到。 在此範例中,使用者帳戶名稱為woutervangeluwe

YYYY = woutervangeluwe

AEMCS

如需GitHub存放庫名稱,您也可以在已在GitHub中開啟的瀏覽器視窗中找到。 在此案例中,存放庫名稱為citisignal

ZZZ = citisignal-aem-accs

AEMCS

這3個值合併後,會產生這個需要在檔案fstab.yaml中設定的新URL。

https://author-p166717-e1786231.adobeaemcloud.com/bin/franklin.delivery/woutervangeluwe/citisignal-aem-accs/main

按一下​ 認可變更……

AEMCS

按一下​ 認可變更

AEMCS

檔案fstab.yaml現在已更新。

1.1.2.3上傳CitiSignal資產和網站

移至https://my.cloudmanager.adobe.com。 按一下您的​ 程式 ​以開啟。

AEMCS

接著,按一下作者環境的URL。

AEMCS

按一下​ 使用Adobe登入

AEMCS

然後您會看到您的作者環境。

AEMCS

您的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 ​以載入封裝管理員環境

AEMCS

接著,按一下​ 上傳封裝

AEMCS

按一下​ 瀏覽 ​以找出要上傳的封裝。

要上傳的封裝名稱為​ citisignal-assets.zip,可從此處下載: https://one-adobe-tech-insiders.s3.us-west-2.amazonaws.com/one-adobe/citisignal_aem_accs.zip

AEMCS

選取封裝citisignal_aem_accs.zip並按一下​ 開啟

AEMCS

接著,按一下​ 確定

AEMCS

然後會上傳套件。 接著,在您剛上傳的封裝上按一下​ 安裝

AEMCS

按一下​ 安裝

AEMCS

幾分鐘後,就會安裝您的套件。

AEMCS

您現在可以關閉此視窗。

1.1.2.4發佈CitiSignal資產

移至https://my.cloudmanager.adobe.com。 按一下您的​ 程式 ​以開啟。

AEMCS

接著,按一下作者環境的URL。

AEMCS

按一下​ 使用Adobe登入

AEMCS

然後您會看到您的作者環境。 按一下​ Assets

AEMCS

按一下​ 檔案

AEMCS

按一下以選取資料夾​ CitiSignal,然後按一下​ 管理出版物

AEMCS

按一下​ 下一步

AEMCS

按一下​ 發佈

AEMCS

您的資產現已發佈。

1.1.2.5發佈CitiSignal網站

按一下熒幕左上角的​ Adobe Experience Manager ​產品名稱,然後按一下​ Assets ​旁的​ 箭頭

AEMCS

接著,按一下​ 網站

AEMCS

然後您應該會看到您之前在安裝套件之後建立的​ CitiSignal ​網站。

AEMCS

若要將您的網站連結至您之前建立的GitHub存放庫,您必須建立​ Edge Delivery Services設定

第一個步驟是建立​ 雲端設定

若要這麼做,請按一下熒幕左上角的​ Adobe Experience Manager ​產品名稱,然後按一下​ 工具 ​圖示,然後選取​ 一般。 按一下以開啟​ 設定瀏覽器

AEMCS

您應該會看到此訊息。 按一下​ 建立

AEMCS

將欄位​ 標題 ​和​ 名稱 ​設定為CitiSignal。 啟用​ 雲端設定 ​的核取方塊。

按一下​ 建立

AEMCS

然後您應該擁有此專案。

AEMCS

接下來,您需要更新您剛建立的​ 雲端設定 ​的某些欄位。

若要這麼做,請按一下熒幕左上角的​ Adobe Experience Manager ​產品名稱,然後按一下​ 工具 ​圖示,然後選取​ 雲端服務。 按一下以開啟​ Edge Delivery Services設定

AEMCS

選取​ CitiSignal,按一下​ 建立 ​並選取​ 組態

AEMCS

您現在需要填寫​ 組織 ​和​ 網站名稱 ​欄位。 若要這麼做,請先看看GitHub存放庫的URL。

AEMCS

  • 組織:使用您的GitHub組織名稱名稱,在此範例中為woutervangeluwe
  • 網站名稱:使用GitHub存放庫的名稱,應為citisignal-aem-accs

按一下​ 儲存並關閉

AEMCS

然後您應該擁有此專案。 在新建立的Edge雲端設定前面啟用核取方塊,然後按一下​ 發佈

AEMCS

1.1.2.6更新檔案路徑.json

在您的GitHub存放庫中,按一下以開啟檔案paths.json

AEMCS

按一下​ 編輯 ​圖示。

AEMCS

您現在需要在第3、4、5、6、7和10行以aem-boilerplate-commerce取代文字CitiSignal

按一下​ 認可變更

AEMCS

按一下​ 認可變更

AEMCS

檔案paths.json現在已更新。

1.1.2.7發佈CitiSignal網站

按一下熒幕左上角的​ Adobe Experience Manager ​產品名稱,然後選取​ 網站

AEMCS

接著,按一下​ CitiSignal ​前面的核取方塊。 然後,按一下​ 管理出版物

AEMCS

按一下​ 下一步

AEMCS

按一下​ 包含子設定

AEMCS

按一下以選取核取方塊​ 包含子項,然後按一下以取消選取其他核取方塊。 按一下​ 「確定」

AEMCS

按一下​ 發佈

AEMCS

然後您將被送回這裡。 按一下​ CitiSignal,選取​ 索引 ​前面的核取方塊,然後按一下​ 編輯

AEMCS

您的網站將在​ 通用編輯器 ​中開啟。

AEMCS

您現在可以移至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

可能需要一些時間,才能正確顯示所有資產,因為它們必須先發佈。

然後您會看到以下內容:

AEMCS

1.1.2.8測試頁面效能

移至https://pagespeed.web.dev/。 輸入您的URL並按一下​ 分析

AEMCS

然後您會發現,您的網站(在行動裝置和案頭視覺效果中)會獲得高分:

行動裝置

AEMCS

案頭

AEMCS

下一步: 開發自訂區塊

返回Adobe Experience Manager Cloud Service和Edge Delivery Services

返回所有模組

recommendation-more-help
4bbf020c-24db-4a43-b239-88fab142f02d