方AEM括弧延伸

概覽

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

chlimage_1-53

功能

Brackets Extension的主要AEM功能包括:

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

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

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

安裝

括弧

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

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

副檔名

要安裝擴展,請按如下步驟進行:

  1. 開啟Brackets。 在菜單​檔案​中,選擇​Extension Manager…

  2. 在搜索欄中輸AEM入​​並查找​AEM Brackets Extension

    chlimage_1-54

  3. 按一下​Install

  4. 安裝完成後,關閉對話框和Extension Manager。

快速入門

Content-Package Project

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

項目至少必須包含:

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

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

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

注意

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

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

專案設定

為了同步您的內容與開發例項之AEM間,您必須定義您的「專案設定」。 您可前往​AEM​功能表並選擇​專案設定……​來完成此作業

chlimage_1-55

「專案設定」可以定義:

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

同步內容

Brackets AEM Extension為filter.xml中定義的篩選規則允許的檔案和檔案夾提供下列類型的內容同步:

自動同步更改的檔案

這只會同步從Brackets到例項的變AEM更,但絕不會相反。

手動雙向同步

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

chlimage_1-56

注意

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

完整內容包同步

在​AEM​功能表中,匯出內容封裝​或​匯入內容封裝​選項可讓整個專案與伺服器同步。

chlimage_1-57

同步狀態

Brackets ExtensionAEM在Brackets視窗右側的工具列中加上通知圖示,指出上次同步的狀態:

  • 綠色——所有檔案都已成功同步
  • 藍色——正在進行同步操作
  • 黃色——部分檔案未同步
  • 紅色——未同步任何檔案

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

chlimage_1-58

注意

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

此外,.vltignore檔案也支援將內容排除在與儲存庫同步和從儲存庫同步的範圍。

編輯HTL代碼

BracketsAEM擴充功能也包含一些自動完成功能,以簡化HTL屬性和運算式的編寫。

屬性自動完成

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

運算式自動完成

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

更多資訊

Brackets ExtensionAEM是開放原始碼專案,由Adobe Marketing Cloud組織在GitHub上代管,位於Apache授權2.0版:

Brackets程式碼編輯器也是開放原始碼專案,由Adobe Systems Incorporated組織代管在GitHub上:

盡情揮灑創意!

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now