AEM Brackets扩展 aem-brackets-extension

CAUTION
AEM 6.4已结束扩展支持,本文档将不再更新。 有关更多详细信息,请参阅 技术支助期. 查找支持的版本 此处.

概述 overview

AEM Brackets扩展提供了一个顺畅的工作流,用于编辑AEM组件和客户端库,并利用 括号 代码编辑器,用于从代码编辑器中访问Photoshop文件和层。 扩展提供的轻松同步(不需要Maven或File Vault)提高了开发人员的效率,并且还帮助了解有限AEM的前端开发人员参与项目。 此扩展还为 HTML模板语言(HTL),这消除了JSP的复杂性,使组件开发更简单、更安全。

chlimage_1-53

功能 features

AEM Brackets扩展的主要功能包括:

  • 将更改的文件自动同步到AEM开发实例。
  • 文件和文件夹的手动双向同步。
  • 项目的完整内容包同步。
  • 表达式和的HTL代码完成 data-sly-* 块语句。

此外,Brackets还为AEM字体端开发人员提供了许多有用功能:

  • Photoshop文件支持从PSD文件提取信息,如图层、测量、颜色、字体、文本等。
  • 来自PSD的代码提示,以便在代码中轻松重复使用此提取的信息。
  • CSS预处理器支持,如LESS和SCSS。
  • 另外还有数百个扩展,可满足更具体的需求。

安装 installation

括号 brackets

AEM Brackets扩展支持Brackets版本1.0或更高版本。

从下载最新的Brackets版本 brackets.io.

扩展 the-extension

要安装扩展,请按如下步骤继续操作:

  1. 打开括号。 在菜单中 文件,选择 Extension Manager…

  2. 输入 AEM ,然后查找 AEM Brackets扩展.

    chlimage_1-54

  3. 单击 安装.

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

快速入门 getting-started

内容包项目 the-content-package-project

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

项目必须至少包含:

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

  2. a filter.xml 文件(例如, myproject/META-INF/vault/filter.xml);有关 filter.xml 请参阅文件 工作区过滤器定义.

在括号中 文件 菜单,选择 打开文件夹…… 然后选择 jcr_root 文件夹,或父项目文件夹。

NOTE
如果您自己没有包含内容包的项目,则可以尝试 HTL TodoMVC示例. 在GitHub上,单击 下载ZIP,从本地解压文件,并按照上面的说明,打开 jcr_root 文件夹。 然后,按照以下步骤设置 项目设置,然后通过执行以下操作将整个包上传到AEM开发实例 导出内容包 如完整内容包同步部分中进一步说明。
在执行这些步骤后,您应该能够 /content/todo.html 在您的AEM开发实例上的URL中,您可以开始对Brackets中的代码进行修改,并查看在Web浏览器中进行刷新后,更改如何立即同步到AEM服务器。

项目设置 project-settings

要将内容同步到AEM开发实例和从开发实例同步内容,您需要定义项目设置。 这可以通过转到 AEM 菜单和选择 项目设置……

chlimage_1-55

项目设置允许定义:

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

同步内容 synchronizing-content

AEM Brackets扩展为文件和文件夹提供了以下类型的内容同步,这些文件和文件夹是按照 filter.xml:

自动同步已更改的文件 automated-synchronization-of-changed-files

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

手动双向同步 manual-bidirectional-synchronization

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

chlimage_1-56

NOTE
如果所选条目在 jcr_root 文件夹, 导出到服务器从服务器导入 上下文菜单条目被禁用。

完全内容包同步 full-content-package-synchronization

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

chlimage_1-57

同步状态 synchronization-status

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

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

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

chlimage_1-58

NOTE
只有标记为包含在 filter.xml 将进行同步,而不考虑使用的同步方法。
此外, .vltignore 支持将内容从存储库的同步中排除。

编辑HTL代码 editing-htl-code

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

属性自动完成 attribute-auto-completion

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

表达式自动完成 expression-auto-completion

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

更多信息 more-information

AEM Brackets扩展是一个开源项目,由 Adobe Marketing Cloud 组织,根据Apache许可证版本2.0:

Brackets代码编辑器也是一个开源项目,由 Adobe Systems Incorporated 组织:

请随时投稿!

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e