AEM Brackets Extension

概述

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. 打开Bracket。 在菜单​文件​中,选择​Extension Manager…

  2. 在搜索栏中输入​AEM​并查找​AEM Brackets Extension

    chlimage_1-54

  3. 单击​安装

  4. 安装完成后关闭对话框和Extension Manager。

入门

内容包项目

安装扩展后,您可以通过使用Brackets从文件系统打开一个内容包文件夹来开始AEM组件的开发。

项目必须至少包含:

  1. jcr_root文件夹(例如myproject/jcr_root

  2. 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中的代码进行修改,并查看在Web浏览器中进行刷新后如何立即将更改同步到AEM服务器。

项目设置

要与AEM开发实例同步内容,您需要定义项目设置。 要执行此操作,请转到​AEM​菜单并选择​“项目设置……

chlimage_1-55

项目设置允许定义:

  1. 服务器URL(例如http://localhost:4502)
  2. 是否容忍没有有效HTTPS证书的服务器(除非需要,否则不选中)
  3. 用于同步内容的用户名(例如,admin)
  4. 用户的密码(例如admin)

正在同步内容

AEM Brackets扩展为filter.xml中定义的过滤规则允许的文件和文件夹提供以下类型的内容同步:

自动同步更改的文件

这将仅同步从Brackets到AEM实例的更改,但不会相反。

手动双向同步

在项目资源管理器中,通过右键单击任何文件或文件夹打开上下文菜单,可以访问​导出到Server​或​从Server​导入选项。

chlimage_1-56

注意

如果所选条目位于jcr_root文件夹之外,则禁用​导出到Server​和​从Server​导入上下文菜单条目。

完整内容包同步

在​AEM​菜单中,导出内容包​或​导入内容包​选项允许将整个项目与服务器同步。

chlimage_1-57

同步状态

AEM Brackets扩展功能在Brackets窗口右侧的工具栏中显示一个通知图标,它指示上次同步的状态:

  • 绿色 — 所有文件已成功同步
  • 蓝色 — 正在执行同步操作
  • 黄色 — 某些文件未同步
  • 红色 — 未同步任何文件

单击通知图标将打开“同步状态”报告对话框,其中列表了每个已同步文件的所有状态。

chlimage_1-58

注意

将只同步标记为filter.xml的筛选规则所包含的内容,而不管使用的同步方法。

此外,支持.vltignore文件,以排除与存储库同步或从存储库同步的内容。

编辑HTL代码

AEM Brackets扩展还具有一些自动完成功能,可轻松编写HTL属性和表达式。

属性自动完成

  1. 在HTML属性中,键入sly。 属性自动完成为data-sly-
  2. 在下拉列表中选择HTL属性。

表达式自动完成

在表达式${}中,常用变量名称会自动完成。

更多信息

AEM Brackets Extension是一个开放源项目,由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