AEM拥有庞大的基础设施,需要时间来掌握这方面的专业知识。每个专家都曾是初学者,所以你永远不会太晚开始玩AEM。在本博客中,我们将关注开发人员对AEM的看法,以及如何成为一名AEM开发人员。我们将通过一些主题,这将帮助你站在AEM的支柱,并得到它的关键。
在开始学习AEM之前,你应该对以下内容有一个基本的了解:
- Java - servlet, JSP,集合,OPPs概念。
- JS
- HTML / CSS
注意:本教程将重点介绍最新的AEM - 6.5。
首先,什么是AEM?
AEM是一个内容管理系统(CMS),提供构建网站、移动应用程序和表单的解决方案。它与其他cms的不同之处在于,它能够使用各种奇妙的功能(如Dam、Forms、Communities、Cloud等)在一个平台上构建内容并交付它们。
注意:在本教程中,我们将探讨完成给定功能的必要步骤。有关相关主题的完整和更多细节,请访问本博客末尾的链接。
通过下面的图表,你可以大致了解一下我们将要在博客中讨论的主题:
所以,让我们开始最佳状态。
在本地系统上安装AEM:
为了尝试实际操作,您需要一个本地AEM实例设置。为此,你需要:
- AEM快速启动jar和许可证文件
- 在我们的系统中安装了Java 8或11
注意:在本教程中,我们主要关注AEM的6.5版本。最近,它已经成为使用最广泛的版本,拥有所有可用的功能。
安装AEM是AEM的第一步。因为我们关注的是开发人员的角度,我们将设立一个作者实例。现在,首先,有两种模式可以设置你的实例:
作者:您编写或设计站点的实例。在这里你可以编写你的页面、资产、体验片段、模板、配置等。
发布:实例,在发布之后将在作者实例中创建的所有内容部署到该实例中。这是最终用户将与您的站点交互的实际实例。
现在,让我们设置一个作者实例,因为我们将在这里创建所有的内容,开发人员的工作将围绕这个实例展开。
按照以下步骤设置您的实例:
- 复制并粘贴AEM快速启动罐和许可文件放入一个专用文件夹。
- 将jar文件重命名为aam -author-p4502。
- 双击以运行jar文件。大概需要8-10分钟的时间。
彻底完成之后,您将注意到在浏览器上以4502端口号运行AEM,因为它也是在文件名中指定的(AEM -author-p4502)。以admin/admin登录,您就可以开始探索AEM了。
有关设置本地实例的详细信息,请参考下面的链接:
AEM环境攻略:
AEM中有许多领域支持广泛的功能。继续尝试各种功能。
站在作者的立场
谁是作者?
作者是通过编写和配置组件为页面生成内容的人。所有的代码块(组件)被作者组合和集成,以开发一个简单的网页。简而言之,作者是用户和代码之间的中介。
要开发组件,必须了解Author如何配置页面上的元素,以及它们在另一端的行为和外观。
请阅读以下教程来学习创建页面和组件:
可编辑的模板
理解了AEM页面上的创作页面和组件之后,就该深入了解页面及其结构了。
任何网站都有一个构建它的模板。类似地,AEM提供了一种创建模板并动态编辑模板的方法。可以使用模板控制台创建或编辑模板,如下面的截图所示:
点击下面的链接了解如何制作页面:
创建模板后,可以从该模板创建任意数量的页面,它将作为页面的结构。
这只是对理解AEM的环境及其基本概念的介绍。作为一名AEM开发者需要更多的步骤。让我们开始几个步骤,帮助你跑得更快。
发展的时间
在环境中设置好并开始理解AEM作为内容管理系统是如何工作的之后,就该了解AEM开发人员如何创建自定义组件和扩展现有组件了。
在我们继续之前,让我们了解一些AEM开发人员日复一日使用的关键概念。以下是其中一些:
悦目的:这是一种脚本语言,用于呈现页面上的内容。以前,JSP用于生成内容。尽管如此,由于代码分离、防止跨站点脚本编写等明显的原因,AEM的新版本仍然成为了推荐版本。Sightly类似于HTML,有一些新的标签有助于与AEM概念集成。
crx / de Lite:这是一个开发人员控制台,可以帮助开发人员快速进行更改并在页面上验证它们。它包含经过复杂组织的实例的实际树形结构。每个节点都有服务的目的。例如,项目的所有组件都存储在应用程序的节点下,而所有页面都存储在内容节点下。
http://localhost:4502/crx/de/index.jsp
当我们继续前进并进一步探索AEM时,我们将了解更多这样的概念。
至此,您了解了如何在AEM中创建和编写页面,以及它们如何向最终用户提供内容。现在,让我们了解如何设计这些组件,以及如何将它们提供给作者。
首先,让我们从理解什么是AEM中的组件开始。
组件是为服务于特定网页区域而封装的一段代码。我们可以在页面的任何地方使用这个组件,并根据需要使用对话框定制它的行为。
创建第一个AEM组件
对于第一个组件,我们将从重用自零售站点(示例站点,随AEM 6.5发货)中的现有组件开始。
- 去crx /德
- 通过路径导航应用程序->是尾巴->组件->内容.components文件夹包含为我们零售网站创建的所有组件。我们可以进一步将它们细分为不同的类别,如内容、结构等。
- 打开按钮组件。你会看到如下图所示的节点:
现在,让我们关注button.html和cq:dialog。
button.html:它包含将组件添加到页面时呈现的实际HTML代码。
cq:对话框:该节点形成节点的对话框,该对话框作为编写对话框提供给Author,用于配置字段。这些值存储在/content节点下的节点结构中。例如,如果您在下面添加按钮组件男人我们的一页。零售站点则这些值将存储在路径下/内容/ we-retail /美国/ en /男人/ jcr:内容/根/ responsivegrid / button_1022012327如下图所示:
在这里,我将按钮标记为Sample。但是,拯救他们并不是我们的动机。我们必须获得这些值并渲染它们。谢天谢地,我们有了Sightly,这让我们的工作变得很容易。看看前面截图中button.html中下划线的句子。
$ {properties.label}
这是从对话框中访问值的一种美观的方式。所以,在这里属性是AEM提供的隐式对象,用于使用点运算符访问对话框中的值。我们可以使用许多这样的隐式对象来获取和处理值。它们也被称为全局对象。请阅读Sightly的文档来了解更多关于它们的信息。
在这里,我们正在访问属性/字段标签.如上图所示,按钮标签的值存储在label字段中。我们获取那个值并使用HTML代码在按钮上呈现它。属性的名称由对话框确定,如下所示。无论在对话框中指定什么名称,值都以该名称存储,我们可以使用相同的名称访问它们。
你会注意到一切都是相互联系的。这可能会让你很困惑,但当你向前走的时候,这对你来说就是小菜一碟。
试着将该组件添加到任何我们零售站点页面并尝试使用该组件。
使用最新原型创建一个AEM项目
我们可以在crx/de中进行实验和尝试,以了解AEM的功能。AEM开发人员使用crx/de只是为了测试、快速修复和调试;因此,我们不能在crx/de上开发整个项目。要创建任何工作的AEM站点,我们需要创建一个项目并将其部署到更高的环境中。
让我们创建一个实际的AEM项目。
以下是设置任何AEM项目的先决条件:要启动任何AEM项目,您的系统中应该安装以下东西:
- Maven
- Java 8或更高版本
- Git和Npm
- 任何IDE, IntelliJ或Eclipse
- Adobe Public Maven存储库:这个maven2存储库提供了对公共构件的访问,这些构件用于在Adobe框架上开发基于java的应用程序。只需要复制这个内容链接在C:\Users\My user.m2\settings.xml目录或mac中的/.m2/settings.xml中。
有关这方面的更多信息,请参考以下链接:https://experienceleague.adobe.com/docs/experience-cloud-kcs/kbarticles/KA-17454.html?lang=en
现在,让我们使用maven命令创建一个AEM项目。
转到要保存项目的本地驱动器位置,并从那里打开命令提示符。或者,右键单击驱动器上所需的位置并打开Git bash。现在,运行以下命令:
mvn -B org.apache.maven.plugin:maven- prototype -plugin:3.2.1:generate \ -D archetypeGroupId=com.adobe。aem \ -D archtypeartifactid =aem- Project - prototype \ -D archtypeversion =35 \ -D appTitle="WKND Sites Project" \ -D appId=" WKND " \ -D groupId="com.adobe.aem. "\ -D artifactId="aem-guides-wknd" \ -D package="com.adobe.aem.guides. guides. "wknd" \ -D version="0.0.1-SNAPSHOT" \ -D aemVersion="cloud"
一旦命令执行完毕,您将看到在所需位置创建了一个项目。
这是启动任何项目的直接方法。一旦您掌握了AEM,这是创建和开始任何项目所需的唯一步骤,但由于您是初学者,请通读以下文档,并了解任何AEM项目的项目结构和模块。
请运行以下命令在本地实例上安装项目:
mvn clean install -PautoInstallPackage -PautoInstallBundle
如果您想了解更多关于该命令的信息,请访问以下链接:
成功构建项目之后,在IDE(IntelliJ或Eclipse)中打开项目
为了使您的IDE能够理解AEM模块和概念,您需要在IDE中安装插件。
Eclipse:为Eclipse安装AEM开发人员工具。请按此链接查看详细步骤-https://experienceleague.adobe.com/docs/experience-manager-64/developing/devtools/aem-eclipse.html?lang=en
IntelliJ:安装AEM IDE工具4 IntelliJ.只需在IDE中打开文件->设置->插件。搜索插件并安装它。
这些插件通过增强IDE提供的特性,为管理和开发任何AEM项目提供了一种简单的方法。在IDE中安装这些插件总是好的,这样可以更快地开发和轻松地映射。
创建自定义组件
AEM允许您创建自定义组件并扩展随AEM附带的现有核心组件。在这里,我们将看到如何创建自定义组件和概念,如sightly、吊带模型和对话框。
请按照以下教程学习如何创建自定义组件:
注意:本教程引用了另一个git存储库,但你也可以在新创建的项目中创建这个组件。
在通过本教程的过程中,您一定会遇到一些新的概念,如美观和吊带模型。你不需要一下子就理解它们。所以,不用担心,当你更多地使用它们时,你就会得到它们。再说一次,AEM不是一件很容易理解的事情,但一旦你开始了,就没有回头的机会了。
欲了解更多有关新概念的资料,请浏览以下连结:
当你开始理解这些概念时,一切都会变得有意义,你将能够将这些片段组合在一起。
更多要去的地方
这些只是了解AEM和从它开始的第一步。AEM不是,仅此而已。我们还没探索它的10%呢。但是我们前面讲过的概念将帮助您掌握AEM,以便您可以进一步探索它。这是AEM的ABC。以下是一些概念,可以帮助您理解和开发AEM网站:
谢谢有用的文章。
非常简单的定义....谢谢!