快速入門 - 開發人員教學課程

本教學課程將協助您啟動並執行新的 Adob​​e Experience Manager (AEM) 專案。您將在十到二十分鐘內建立自己的網站,並能夠建立、預覽和發佈您自己的內容、樣式以及新增區塊。

先決條件:

  1. 您有GitHub帳戶,並瞭解Git基本知識。
  2. 您有Google帳戶。
  3. 您瞭解HTML、CSS和JavaScript的基本概念。
  4. 您有Node/npm 安裝供本機開發使用。

本教學課程使用macOS、Chrome和Visual Studio Code作為開發環境,熒幕擷取畫面和指示會反映該設定。 您可以使用不同的作業系統、瀏覽器和程式碼編輯器,但您看到的UI和您必須採取的步驟可能會因此而有所不同。

開始使用樣板存放庫範本

開始遵循AEM最佳實務的最快速和最簡單方式,就是使用範本GitHub存放庫作為範本建立您的存放庫。

https://github.com/adobe/aem-boilerplate

只需按一下 Use this template 按鈕並選取 Create a new repository,並選取您要建立此存放庫的位置。

我們建議將存放庫設為 public.

GitHub剩下的唯一步驟是安裝 AEM程式碼同步GitHub應用程式 造訪此連結以存取您的存放庫: https://github.com/apps/aem-code-sync/installations/new

Repository access AEM程式碼同步應用程式的設定,請務必選取 Only select Repositories (非 All Repositories)。 然後選取您新建立的存放庫,並按一下 Save.

注意:如果您正在使用Github Enterprise搭配IP篩選,您可以將下列IP新增至允許清單: 3.227.118.73

恭喜!您有一個新網站在執行中 https://<branch>--<repo>--<owner>.hlx.page/ 在上述範例中, https://main--my-website--lighthouse100.hlx.page/

使用Google Drive連結您自己的內容來源

在您的Boilerplate GitHub存放庫復本中,網站指向Google Drive中的現有內容來源。 另請參閱 此資料夾 例如某些範例內容。

此內容是唯讀的,不過您可以將其複製至您的Google Drive資料夾,作為起點。

若要製作您自己的內容,請在您自己的Google磁碟機中建立資料夾,並與Adobe Experience Manager使用者共用該資料夾(helix@adobe.com)。

開始製作您自己的內容的一個好方法是複製 indexnavfooter 並熟悉內容結構。 navfooter 在專案中不會經常變更,且具有特殊結構。 專案中的大多數檔案看起來都類似於 index.

開啟檔案,並將整個內容複製/貼上到您自己的Google磁碟機中的對應檔案中。 您也可以透過以下方式下載檔案 Download All 或下載個別檔案。 不過,請記得將下載的 .docx 當您將檔案上傳至Google磁碟機的資料夾時,檔案會傳回原生Google檔案。

現在您已擁有內容,必須將該內容連結至GitHub存放庫。 若要這麼做,請變更中的參照 fstab.yaml GitHub存放庫中的專案,儲存至您剛剛共用的資料夾。
將資料夾URL從您的Google磁碟複製/貼上至 fstab.yaml.

請注意,進行該變更後,您將會看到 404 not found 錯誤,因為您的內容尚未預覽。 請參閱下一節以瞭解如何開始撰寫和預覽您的內容。 如果您複製至 indexnavfooter 這三種檔案都是獨立的檔案,有自己的預覽和發佈週期,因此請務必視需要預覽(和發佈)所有檔案。

提交您的變更,而且您已將自己的內容來源連結至網站。

預覽和發佈您的內容

完成最後一個步驟後,您的新內容來源並非空白,但沒有任何內容已提升至 previewlive 階段,表示您的網站提供404s。

若要預覽內容,作者必須安裝SidekickChrome擴充功能。 尋找 在此填入Chrome擴充功能.

將擴充功能新增至Chrome後,別忘了釘選擴充功能,這樣會更容易找到。

若要設定Chrome擴充功能,請前往您先前共用的Google磁碟機資料夾,然後按一下瀏覽器工具列中的擴充功能圖示,並選取「 」 Add this project.

只要已安裝擴充功能並新增專案,您就可以從Google Drive預覽和發佈內容。

選取所有三個檔案,並按一下您的釘選擴充功能以啟動AEM Sidekick。 新工具列隨即出現。 按一下 previewpublish 按鈕將觸發對應的操作。


開啟 index 檔案並進行一些變更。 按一下釘選擴充功能以啟動Sidekick,然後按一下 Preview 按鈕,會觸發預覽作業並開啟具有內容預覽轉譯的新索引標籤。

開始開發樣式和功能

若要開始開發,最簡單的做法是安裝AEM命令列介面(CLI),並使用下列方式在本機複製存放庫。

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

從那裡變更至您的專案資料夾,並使用以下專案啟動您的本機開發環境。

cd <repo>
aem up

此專案隨即開啟 http://localhost:3000/ 而且您已準備好進行變更。
良好的開端在於以下位置 blocks 資料夾,專案的大部分樣式和程式碼都存放在此資料夾中。 只需在「 」中變更 .css.js 而且您應該會立即在瀏覽器中看到變更。

準備好推送變更後,只需使用Git新增、認可及推送程式碼,將變更推送至預覽版(https://<branch>--<repo>--<owner>.hlx.page/)和生產(https://<branch>--<repo>--<owner>.hlx.live/)個網站。

夠了,你做到了! 恭喜,您的第一個網站已啟動且執行中。 若您在教學課程中需要協助,請 加入我們的Discord頻道 與我們聯絡。

recommendation-more-help
10a6ce9d-c5c5-48d9-8ce1-9797d2f0f3ec