AEM Brackets擴充功能 aem-brackets-extension

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

開發人員

概觀 overview

AEM Brackets Extension提供流暢的工作流程來編輯AEM元件和使用者端程式庫，並運用Brackets程式碼編輯器的強大功能，提供從程式碼編輯器存取Photoshop檔案和圖層的許可權。擴充功能提供的簡易同步功能（不需要Maven或檔案儲存庫）可提升開發人員效率，也可協助具備有限AEM知識的前端開發人員參與專案。此擴充功能也提供對HTML範本語言(HTL)的一些支援，可降低JSP的複雜性，讓元件開發更容易、更安全。

chlimage_1-53

功能 features

AEM Brackets擴充功能的主要功能包括：

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

此外，Brackets還為AEM前端開發人員提供了許多有用的功能：

Photoshop檔案支援從PSD檔案中擷取資訊，例如圖層、測量、顏色、字型、文字等。
來自PSD的程式碼提示，可輕鬆在程式碼中重複使用此擷取的資訊。
CSS前置處理器支援，例如LESS和SCSS。
以及數百種其他擴充功能，可滿足更具體的需求。

安裝 installation

括弧 brackets

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

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

擴充功能 the-extension

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

開啟Brackets。在功能表檔案中，選取 Extension Manager…
在搜尋列中輸入 AEM，並尋找 AEM Brackets副檔名。
按一下安裝。
關閉對話方塊，並在安裝完成後Extension Manager。

快速入門 getting-started

Content-Package專案 the-content-package-project

安裝擴充功能後，您可以從包含Brackets的檔案系統開啟content-package資料夾，以開始開發AEM元件。

專案必須至少包含：

jcr_root資料夾（例如，myproject/jcr_root）
filter.xml檔案（例如myproject/META-INF/vault/filter.xml）；如需filter.xml檔案結構的詳細資訊，請參閱Workspace篩選器定義。

在Brackets的檔案功能表中，選擇 開啟資料夾……，然後選取jcr_root資料夾或父專案資料夾。

NOTE

如果您沒有自己的專案包含內容封裝，可以嘗試HTL TodoMVC範例。在GitHub上，按一下 下載ZIP，將檔案解壓縮到本機，然後依照上述指示，在Brackets中開啟jcr_root資料夾。然後依照下列步驟設定 專案設定，最後執行 匯出內容封裝，將整個封裝上傳到您的AEM開發執行個體，如完整內容封裝同步化一節中進一步說明的那樣。

執行這些步驟後，您應該能夠存取您AEM開發執行個體上的/content/todo.html URL，並且您可以開始在Brackets中修改程式碼，並瞭解在網頁瀏覽器中重新整理後，變更如何立即同步至AEM伺服器。