快速入門 — 開發人員教學課程
本教學課程將協助您啟動並執行新的 Adobe Experience Manager (AEM) 專案。您將在十到二十分鐘內建立自己的網站,並能夠建立、預覽和發佈您自己的內容、樣式以及新增區塊。
先決條件:
- 您擁有 GitHub 帳戶,並且了解 Git 基本知識。
- 您有Google帳戶。
- 您了解 HTML、CSS 和 JavaScript 的基本知識。
- 您已安裝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
在AEM Code Sync App的Repository access
設定中,確定您選取Only select Repositories
(非All Repositories
)。 然後選取您新建立的存放庫,並按一下Save
。
注意:如果您使用Github Enterprise搭配IP篩選,您可以將下列IP新增至允許清單: 3.227.118.73
恭喜!您有一個新網站在https://<branch>--<repo>--<owner>.aem.page/
上執行,在上例中是https://main–mysite–aemtutorial.aem.page/
使用Google Drive連結您自己的內容來源
在您的Boilerplate GitHub存放庫復本中,網站指向Google Drive中的現有內容來源。 如需一些範例內容,請參閱此資料夾。
此內容是唯讀的,不過您可以將其複製至您的Google Drive資料夾,作為起點。
若要製作您自己的內容,請在您自己的Google磁碟機中建立資料夾,並與Adobe Experience Manager使用者(helix@adobe.com
)共用該資料夾。
開始編寫您自己的內容的一個好方法是從範例內容複製index
、nav
和footer
,並熟悉內容結構。 nav
和footer
在專案中不是經常變更且具有特殊結構。 專案中大部分的檔案看起來更類似於index
。
開啟檔案,並將整個內容複製/貼上到您自己的Google磁碟機中的對應檔案中。 您也可以透過Download All
下載檔案,或下載個別檔案。 不過,請記得將下載的.docx
檔案上傳至Google磁碟機的資料夾時,將檔案轉換回原生Google Docs。
現在您已擁有內容,必須將該內容連結至GitHub存放庫。 若要這麼做,請將GitHub存放庫中fstab.yaml
的參考變更為您剛共用的資料夾。
將資料夾URL從您的Google磁碟複製/貼上至fstab.yaml
。
請注意,進行此變更後,您將會看到404 not found
個錯誤,因為您的內容尚未預覽。 請參閱下一節以瞭解如何開始撰寫和預覽您的內容。 如果您複製了index
、nav
和footer
,這三者都是獨立的檔案,有自己的預覽和發佈週期,因此請務必視需要預覽(和發佈)所有這些檔案。
提交您的變更,而且您已將自己的內容來源連結至網站。
預覽和發佈您的內容
完成最後一個步驟後,您的新內容來源並非空白,但沒有任何內容已升級至preview
或live
階段,這表示您的網站提供404個專案。
若要預覽內容,作者必須安裝Sidekick Chrome擴充功能。 在Chrome網站商店🔗中尋找Chrome擴充功能。
將擴充功能新增至Chrome後,別忘了釘選它,這樣會更容易找到。
若要設定Chrome擴充功能,請前往您先前共用的Google磁碟機資料夾,然後按一下瀏覽器工具列中的擴充功能圖示,並選取「Add this project
」。
只要已安裝擴充功能並新增專案,您就可以從Google Drive預覽和發佈內容。
選取所有三個檔案,然後按一下您的釘選擴充功能以啟動AEM Sidekick。 新工具列隨即出現。 按一下preview
或publish
按鈕將會觸發對應的作業。
開啟index
檔案並進行一些變更。 按一下您的釘選擴充功能,然後按一下「Preview
」按鈕以啟動Sidekick,這將會觸發預覽操作,並開啟包含預覽內容轉譯的新索引標籤。
開始開發樣式和功能
若要開始開發,最簡單的做法是安裝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>.aem.page/
)和生產(https://<branch>--<repo>--<owner>.aem.live/
)網站即可。
就這樣,您已成功! 恭喜,您的第一個網站已啟動且執行中。 若您在本教學課程中需要協助,請 加入我們的Discord頻道 或 與我們聯絡。