AEM Brackets Extension

概覽

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

chlimage_1-53

功能

AEM Brackets Extension的主要功能有：

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

此外，Brackets還為AEM字型端開發人員提供許多實用功能：

Photoshop檔案支援從PSD檔案擷取資訊，例如圖層、度量、顏色、字型、文字等。
從PSD中的程式碼提示，以輕鬆在程式碼中重複使用此擷取的資訊。
CSS預處理器支援，例如LESS和SCSS。
還有數百個額外擴充功能，可涵蓋更多特定需求。

安裝

括弧

AEM Brackets延伸功能支援Brackets 1.0版或更新版本。

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

副檔名

要安裝擴展，請按如下步驟進行：

開啟Brackets。在菜單檔案中，選擇擴展管理器……
在搜尋列中輸入AEM，並尋找AEM Brackets Extension。
按一下Install。
安裝完成後，關閉對話框和Extension Manager。

快速入門

Content-Package Project

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

項目至少必須包含：

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

在Brackets的File菜單中，選擇開啟資料夾……並選擇jcr_root資料夾或父項目資料夾。

注意

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

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

專案設定

若要將內容同步化至AEM開發執行個體，您必須定義您的「專案設定」。若要這麼做，請前往AEM選單，然後選擇「專案設定……」

chlimage_1-55

「專案設定」可以定義：

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

同步內容

AEM Brackets Extension為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屬性和運算式的編寫。

屬性自動完成

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

運算式自動完成

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