AEM Brackets扩展提供了一个顺畅的工作流,用于编辑AEM组件和客户端库,并利用Brackets代码编辑器的功能,该编辑器允许从代码编辑器中访问Photoshop文件和层。 扩展提供的轻松同步(不需要Maven或File Vault)提高了开发人员的效率,并且还帮助了解有限AEM的前端开发人员参与项目。 此扩展还为HTML模板语言(HTL)提供了一些支持,它消除了JSP的复杂性,使组件开发更加简单和安全。
AEM Brackets扩展的主要功能包括:
data-sly-*
块语句的HTL代码完成。此外,Brackets还为AEM字体端开发人员提供了许多有用功能:
AEM Brackets扩展支持Brackets版本1.0或更高版本。
从brackets.io下载最新的Brackets版本。
要安装扩展,请按如下步骤继续操作:
打开括号。 在菜单File中,选择Extension Manager…
在搜索栏中输入AEM并查找AEM Brackets Extension。
单击安装。
安装完成后,关闭对话框和Extension Manager。
安装扩展后,您可以通过从文件系统中使用Brackets打开内容包文件夹来开始开发AEM组件。
项目必须至少包含:
jcr_root
文件夹(例如,myproject/jcr_root
)
filter.xml
文件(例如,myproject/META-INF/vault/filter.xml
);有关filter.xml
文件结构的更多详细信息,请参阅工作区过滤器定义。
在“括号”的文件菜单中,选择打开文件夹…… ,然后选择jcr_root
文件夹或父项目文件夹。
如果您自己没有包含内容包的项目,则可以尝试使用HTL TodoMVC示例。 在GitHub上,单击下载ZIP,从本地解压文件,并按照上面的说明,在Brackets中打开jcr_root
文件夹。 然后按照以下步骤设置项目设置,并最终按照完整内容包同步部分中的进一步说明,通过执行导出内容包,将整个包上传到AEM开发实例。
完成这些步骤后,您应该能够访问AEM开发实例上的/content/todo.html
URL,并且可以开始对Brackets中的代码进行修改,并查看在Web浏览器中刷新后如何将更改立即同步到AEM服务器。
要将内容同步到AEM开发实例和从开发实例同步内容,您需要定义项目设置。 可以通过转到AEM菜单并选择项目设置……来完成此操作
项目设置允许定义:
http://localhost:4502
)admin
)admin
)AEM Brackets扩展为filter.xml
中定义的筛选规则所允许的文件和文件夹提供了以下类型的内容同步:
这将仅将Brackets中的更改同步到AEM实例,但绝不会相反。
在项目资源管理器中,通过右键单击任何文件或文件夹来打开上下文菜单,并且可以访问导出到服务器或从服务器导入选项。
如果所选条目在jcr_root
文件夹之外,则导出到服务器和从服务器导入上下文菜单条目将被禁用。
在AEM菜单中,导出内容包或导入内容包选项允许将整个项目与服务器同步。
AEM Brackets扩展在Brackets窗口右侧的工具栏中显示一个通知图标,指示上次同步的状态:
单击通知图标将打开同步状态报告对话框,其中列出了每个同步文件的所有状态。
无论使用何种同步方法,都只会同步被filter.xml
的筛选规则中标记为包含的内容。
此外,支持.vltignore
文件,以排除与存储库进行同步和从存储库进行同步的内容。
AEM Brackets扩展还具有一些自动完成功能,可简化HTL属性和表达式的编写。
sly
。 该属性已自动完成到data-sly-
。在表达式${}
中,将自动填写常用变量名称。
AEM Brackets扩展是一个开源项目,由Adobe Marketing Cloud组织在GitHub上根据Apache许可证版本2.0托管:
Brackets代码编辑器也是一个开源项目,由Adobe Systems Incorporated组织在GitHub上托管:
请随时投稿!