AEM Brackets Extension提供順暢的工作流程來編輯AEM元件和用戶端程式庫,並運用Brackets程式碼編輯器的功能,讓您從程式碼編輯器存取Photoshop檔案和圖層。 擴充功能提供的簡易同步化功能(不需Maven或File Vault)可提高開發人員的效率,並協助具備有限AEM知識的前端開發人員參與專案。 此擴充功能也支援HTML範本語言(HTL),這可免除JSP的複雜性,讓元件開發更輕鬆且更安全。
AEM Brackets Extension的主要功能有:
data-sly-*
區塊陳述式的HTL程式碼完成。此外,Brackets還為AEM字型端開發人員提供許多實用功能:
AEM Brackets延伸功能支援Brackets 1.0版或更新版本。
從brackets.io下載最新的Brackets版本。
要安裝擴展,請按如下步驟進行:
開啟Brackets。 在菜單檔案中,選擇擴展管理器……
在搜尋列中輸入AEM,並尋找AEM Brackets Extension。
按一下Install。
安裝完成後,關閉對話框和Extension Manager。
在安裝擴充功能後,您就可以使用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選單,然後選擇「專案設定……」
「專案設定」可以定義:
http://localhost:4502
)admin
)admin
)AEM Brackets Extension為filter.xml
中定義的篩選規則所允許的檔案和檔案夾提供下列類型的內容同步:
這只會同步從Brackets到AEM例項的變更,但絕不會相反。
在「項目瀏覽器」中,通過按一下右鍵任何檔案或資料夾來開啟上下文菜單,可訪問導出到伺服器或從伺服器導入選項。
如果選定條目位於jcr_root
資料夾外,則導出到伺服器和從伺服器導入上下文菜單條目將被禁用。
在AEM功能表中,匯出內容封裝或匯入內容封裝選項可讓整個專案與伺服器同步。
AEM Brackets Extension在Brackets視窗右側的工具列中,加上通知圖示,指出上次同步的狀態:
按一下通知表徵圖將開啟「同步狀態」報告對話框,其中列出了每個同步檔案的所有狀態。
無論使用何種同步方法,都只會同步filter.xml
篩選規則中標示為包含的內容。
此外,.vltignore
檔案也支援將內容排除在與儲存庫同步和從儲存庫同步的範圍。
AEM Brackets延伸功能也包含一些自動完成功能,以簡化HTL屬性和運算式的編寫。
sly
。 屬性自動完成至data-sly-
。在運算式${}
中,通用變數名稱會自動完成。
AEM Brackets擴充功能是開放原始碼專案,由Adobe Marketing Cloud組織在GitHub上代管,位於Apache授權2.0版下:
Brackets程式碼編輯器也是開放原始碼專案,由Adobe Systems Incorporated組織代管在GitHub上:
盡情揮灑創意!