AEM Brackets擴充功能

概覽

AEM Brackets擴充功能提供編輯AEM元件和用戶端程式庫的流暢工作流程，並運用Brackets程式碼編輯器的功能，此編輯器可讓您從程式碼編輯器中存取Photoshop檔案和層。 擴充功能提供的輕鬆同步化功能（不需要Maven或File Vault）可提高開發人員的效率，也有助於具備有限AEM知識的前端開發人員參與專案。 此擴充功能也提供HTML範本語言(HTL)的部分支援，免除了JSP的複雜性，讓元件開發更輕鬆、更安全。

chlimage_1-53

功能

AEM Brackets擴充功能的主要功能為：

  • 將變更的檔案自動同步至AEM開發例項。
  • 手動雙向同步檔案和資料夾。
  • 專案的完整內容套件同步。
  • 運算式和data-sly-*區塊陳述式的HTL程式碼完成。

此外，Brackets還隨附許多對AEM字型端開發人員有用的功能：

  • Photoshop檔案支援從PSD檔案中擷取資訊，如圖層、測量、顏色、字型、文字等。
  • 從PSD中提示代碼，以便在代碼中輕鬆地重複利用這些提取的資訊。
  • CSS預處理器支援，如LESS和SCSS。
  • 還有數以百計的額外擴充功能，可涵蓋更具體的需求。

安裝

方括弧

AEM Brackets擴充功能支援Brackets 1.0版或更新版本。

請從brackets.io下載最新的Brackets版本。

擴充功能

若要安裝擴充功能，請依下列步驟執行：

  1. 開啟括弧。 在菜單​檔案​中，選擇​Extension Manager…

  2. 在搜尋列中輸入​AEM​並尋找​AEM Brackets Extension。

    chlimage_1-54

  3. 按一下​安裝。

  4. 安裝完成後，關閉對話方塊和Extension Manager。

快速入門

內容包項目

安裝擴充功能後，您可以使用Brackets從檔案系統開啟內容套件資料夾，以開始開發AEM元件。

專案必須至少包含：

  1. a jcr_root資料夾(例如myproject/jcr_root

  2. a filter.xml檔案(例如myproject/META-INF/vault/filter.xml);有關filter.xml檔案結構的詳細資訊，請參閱工作區篩選器定義。

在括弧的​檔案​菜單中，選擇​開啟資料夾……​並選擇jcr_root資料夾或父項目資料夾。

注意

如果您沒有包含內容包的專案，則可以嘗試 HTL TodoMVC示例。 在GitHub上，按一下「下載ZIP」，在本機解壓檔案，並依照上述指示，在方括弧中開啟jcr_root資料夾。 然後，請依照下列步驟來設定​專案設定，最後執行​匯出內容套件，將整個套件上傳至AEM開發執行個體，如完整內容套件同步區段中的進一步指示。

執行這些步驟後，您應該可以存取AEM開發執行個體上的/content/todo.html URL，並開始對Brackets中的程式碼進行修改，並查看在Web瀏覽器中重新整理後，變更會立即同步至AEM伺服器。

專案設定

若要將內容與AEM開發執行個體同步，您必須定義專案設定。 您可以前往​AEM​功能表，然後選擇​專案設定……

chlimage_1-55

「專案設定」可定義：

  1. 伺服器URL(例如http://localhost:4502
  2. 是否允許沒有有效HTTPS證書的伺服器（請取消選中，除非需要）
  3. 用於同步內容的使用者名稱(例如admin
  4. 使用者的密碼(例如admin

同步內容

AEM Brackets擴充功能針對filter.xml中定義的篩選規則所允許的檔案和資料夾，提供下列類型的內容同步：

自動同步更改的檔案

這只會將Brackets的變更同步至AEM例項，但絕不會以相反的方式同步。

手動雙向同步

在「項目資源管理器」中，通過按一下右鍵任何檔案或資料夾來開啟上下文菜單，並且可以訪問​導出到伺服器​或​從伺服器​導入選項。

chlimage_1-56

注意

如果所選條目位於jcr_root資料夾之外，則​導出到伺服器​和​從伺服器​導入上下文菜單條目將被禁用。

完整內容包同步

在​AEM​菜單中，導出內容包​或​導入內容包​選項允許將整個項目與伺服器同步。

chlimage_1-57

同步狀態

AEM Brackets Extension在Brackets視窗右側的工具列中顯示通知圖示，指出上次同步的狀態：

  • 綠色 — 已成功同步所有檔案
  • 藍色 — 正在執行同步操作
  • 黃色 — 某些檔案未同步
  • 紅色 — 未同步任何檔案

按一下通知表徵圖將開啟「同步狀態」報告對話框，其中列出每個已同步檔案的所有狀態。

chlimage_1-58

注意

無論使用何種同步方法，都只會同步filter.xml中的篩選規則所標示為包含的內容。

此外，.vltignore檔案支援將內容排除在與存放庫同步或與存放庫同步之外。

編輯HTL程式碼

AEM Brackets擴充功能也提供一些自動完成功能，以方便編寫HTL屬性和運算式。

屬性自動完成

  1. 在HTML屬性中，鍵入sly。 屬性自動完成為data-sly-。
  2. 在下拉式清單中選取HTL屬性。

表達式自動完成

在運算式${}中，通用變數名稱會自動完成。

更多資訊

AEM Brackets擴充功能是開放原始碼專案，由Adobe Marketing Cloud組織在GitHub上，依Apache授權規範2.0版托管：

Brackets程式碼編輯器也是開放原始碼專案，由Adobe Systems Incorporated組織托管於GitHub:

歡迎貢獻內容！

本頁內容