快速入门 — 开发人员教程

本教程将帮助您启动并运行新的 Adobe Experience Manager (AEM) 项目。在十到二十分钟内，您就可以创建自己的网站，并能够创建、预览和发布您自己的内容、样式以及添加新区块。

先决条件：

本教程使用macOS、Chrome和Visual Studio Code作为开发环境，并且屏幕截图和说明反映了此设置。 您可以使用不同的操作系统、浏览器和代码编辑器，但您看到的UI和必须执行的步骤可能会相应地有所不同。

模板存储库模板入门

遵循AEM最佳实践的最快速和最简单入门方法是使用Boilerplate GitHub存储库作为模板创建存储库。

https://github.com/adobe/aem-boilerplate

单击Use this template按钮并选择Create a new repository，然后选择拥有存储库的用户组织

我们建议将存储库设置为public。

GitHub中剩余的唯一步骤是，通过访问此链接https://github.com/apps/aem-code-sync/installations/new在您的存储库中安装AEM代码同步GitHub应用程序

在AEM代码同步应用程序的Repository access设置中，确保选择Only select Repositories （而不是All Repositories）。 然后选择新创建的存储库，并单击Save。

注意：如果您正在使用带有IP过滤的Github Enterprise，可以将以下IP添加到允许列表中： 3.227.118.73

恭喜！您在https://<branch>--<repo>--<owner>.aem.page/上运行了一个新网站，在上面的示例中为https://main–mysite–aemtutorial.aem.page/

使用Google Drive链接您自己的内容源

在您创建样板GitHub存储库的分支中，网站指向Google Drive中的现有内容源。 有关示例内容，请参阅此文件夹。

此内容是只读的，但可以将其复制到您的Google Drive文件夹中作为起点。

要创作自己的内容，请在自己的Google驱动器中创建一个文件夹，并与Adobe Experience Manager用户(helix@adobe.com)共享该文件夹。

开始创作您自己的内容的一个好方法是从示例内容中复制index、nav和footer，并熟悉内容结构。 nav和footer在项目中不是经常更改，并且具有特殊结构。 项目中的大多数文件看起来更类似于index。

打开文件，并将整个内容复制/粘贴到您自己的Google驱动器中的相应文件中。 您还可以通过Download All下载文件或下载单个文件。 但是，当您将下载的.docx文件上传到Google驱动器中的文件夹时，请记得将它们转换回本机Google Docs。

现在您已拥有内容，需要将该内容连接到GitHub存储库。 为此，您可以将GitHub存储库中fstab.yaml的引用更改为您刚刚共享的文件夹。
将文件夹URL从Google驱动器复制/粘贴到fstab.yaml。

请注意，进行该更改后，您将看到404 not found 个错误，因为您的内容尚未预览。 请参阅下一部分，了解如何开始创作和预览您的内容。 如果您复制了index、nav和footer以上三个文档，则它们都是单独的文档，具有各自的预览和发布周期，因此请确保根据需要预览（和发布）所有这些文档。

提交更改并将您自己的内容源关联到您的网站。

预览和发布内容

完成最后一个步骤后，您的新内容源不是空的，但是没有内容被提升到preview或live 阶段，这意味着您的网站提供了404个内容。

要预览内容，作者必须安装Sidekick Chrome扩展。 在Chrome网上应用商店🔗中找到Chrome扩展。

将扩展添加到Chrome后，请别忘了固定它，这样可以更轻松地找到它。

要设置Chrome扩展，请转到您之前共享的Google驱动器文件夹，然后单击浏览器工具栏中的扩展图标，然后选择Add this project。

安装扩展并添加项目后，您便可以从Google Drive预览和发布内容。

选择所有三个文档，并通过单击固定扩展激活AEM Sidekick。 此时将显示一个新工具栏。 单击preview或publish按钮将触发相应的操作。

打开index文档并进行一些更改。 通过单击固定扩展激活Sidekick，然后单击Preview按钮（这将触发预览操作）并打开一个新的选项卡，其中包含内容的预览演绎版。

开始开发样式和功能

要开始开发，最简单的做法是安装AEM命令行界面(CLI)，然后使用以下内容在本地克隆存储库。

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

从那里更改到您的项目文件夹，然后使用以下内容启动本地开发环境。

cd <repo>
aem up

这将打开http://localhost:3000/，您可以进行更改。
一个很好的起点位于blocks文件夹中，该文件夹是项目的大部分样式和代码所在的位置。 只需在.css或.js 中进行更改，您应会立即在浏览器中看到这些更改。

准备好推送更改后，只需使用Git添加、提交和推送您的代码并将其推送到预览(https://<branch>--<repo>--<owner>.aem.page/)和生产(https://<branch>--<repo>--<owner>.aem.live/)站点即可。

就这样，你做到了！ 恭喜，您的第一个站点已启动并正在运行。 如果您在本教程中需要帮助，请 加入我们的Discord频道 或 与我们联系。