AEM Brackets Extension

概述

AEM Brackets扩展提供了编辑AEM组件和客户端库的流畅工作流程，并利用了Brackets代码编辑器的强大功能，该编辑器允许从代码编辑器中访问Photoshop文件和图层。 扩展提供的轻松同步（无需Maven或File Vault）提高了开发人员的效率，还有助于具有有限AEM知识的前端开发人员参与项目。 此扩展还提供对HTML模板语言(HTL)的一些支持，这消除了JSP的复杂性，使组件开发更简单、安全。

功能

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。

   

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文件夹或父项目文件夹。

项目设置

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

项目设置允许定义：

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

正在同步内容

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

自动同步更改的文件

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

手动双向同步

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

完整内容包同步

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

同步状态

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

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

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

编辑HTL代码

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

属性自动完成

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

表达式自动完成

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

更多信息

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

• 代码存储库：https://github.com/Adobe-Marketing-Cloud/aem-sightly-brackets-extension
• Apache License，版本2.0:https://www.apache.org/licenses/LICENSE-2.0.html

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

• 代码存储库：https://github.com/adobe/brackets

请随时投稿！