AEM Brackets扩展

概述

AEM Brackets Extension提供了编辑AEM组件和客户端库的流畅工作流程,并利用Brackets代码编辑器的强大功能,该编辑器允许从代码编辑器中访问Photoshop文件和图层。 扩展提供的轻松同步(无需Maven或File Vault)提高了开发人员效率,还帮助具有有限知识的前端开发人员参与项目。 此扩展还提供对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. 打开括号。 在菜单​文件​中,选择​Extension Manager…

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

    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的​文件​菜单中,选择​打开文件夹……​并选择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 Extension为filter.xml中定义的过滤规则允许的文件和文件夹提供以下类型的内容同步:

已更改文件的自动同步

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

手动双向同步

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

chlimage_1-56

注意

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

完整内容包同步

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

chlimage_1-57

同步状态

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

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

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

chlimage_1-58

注意

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

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

编辑HTL代码

AEM Brackets Extension还具有一些自动完成功能,可简化HTL属性和表达式的编写。

属性自动完成

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

表达式自动完成

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

更多信息

AEM Brackets Extension是一个开放源项目,由Adobe Marketing Cloud组织在GitHub上托管,位于Apache许可证2.0版下:

Brackets代码编辑器也是一个开放源码项目,由Adobe Systems Incorporated组织在GitHub上托管:

尽情贡献吧!

在此页面上