使用 Edge Delivery Services 进行所见即所得创作的开发人员快速入门指南 edge-dev-getting-started

Last update: Fri Feb 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：
Edge Delivery Services

创建对象：

管理员
开发人员

本指南将帮助您使用 Edge Delivery Services 和用于所见即所得内容创作的通用编辑器，启动并运行新的 Adobe Experience Manager Site。

前提条件 prerequisites

在开始阅读本指南之前，您应已熟悉 Edge Delivery Services 的基础知识并有权访问这些服务，其中包括：

Edge Delivery Services 开发的核心概念 core-concepts

Edge Delivery Services 基于块的概念。AEM 附带一个全面的预定义的块库，可扩展它以满足您的项目需求。在 GitHub 中管理 Edge Delivery Services 项目的代码。

块 blocks

块是 Edge Delivery Services 传递页面最基本的部分。块封装了用于驱动内容页的逻辑组件的样式和代码。

AEM 提供标准块，作为项目样板中产品的一部分。这些块包括标题、文本、图像、链接、列表等。

TIP

请参阅 Edge Delivery Services 文档中的构建部分，了解有关块以及如何开发 Edge Delivery Services 的更多详细信息。

Edge Delivery Services 和 GitHub github-edge

Edge Delivery 利用 GitHub，因此您可直接从您的 GitHub 存储库管理和部署代码。

您的作者可以使用基于文档的创作或使用 Universal Editor 在 AEM 中创建内容。无论作者如何创建其内容，开发人员都可以使用 GitHub 中的 CSS 和 JavaScript 自定义 Site 的功能。

从内容预览到生产，将自动为您的每个分支创建网站。您放入 GitHub 存储库中的每个资产都在您的网站上可供使用，无需构建过程。

TIP

请参阅 Edge Delivery Services 文档中的构建部分，了解有关块以及如何开发 Edge Delivery Services 的更多详细信息。

所见即所得创作和 Edge Delivery Services 快速入门 getting-started

一旦满足前提条件并选择使用通用编辑器，即可开始您自己的项目。

创建您的 GitHub 项目 create-github-project

首先，需要在 GitHub 上基于 Adobe 模板创建新项目。

导航到 https://github.com/adobe-rnd/aem-boilerplate-xwalk 并单击 使用此模板，然后选择 创建新存储库。
- 需要登录到 GitHub 才能看到此选项。
默认情况下，将为您分配该存储库。按需更改此项并提供存储库名称和描述，然后单击 创建存储库。
在同一浏览器上的新标签页中，导航到 https://github.com/apps/aem-code-sync 并单击配置。
对于您在上一步从中创建了新存储库的组织单击配置。
在 AEM Code Sync GitHub 页面上的 存储库访问权限 下，选择 仅某些存储库，选择在上一步创建的存储库，然后单击保存。
安装 AEM Code Sync 后，即看到确认屏幕。返回新存储库的浏览器标签页。
单击 fstab.yaml 文件以打开它，然后单击 编辑此文件 图标以编辑它。
编辑 fstab.yaml 文件以更新您的项目的挂载点。将默认的 Google 文档 URL 替换为您的 AEM as a Cloud Service 创作实例的 URL，然后单击 提交更改…。
- https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main
- 更改挂载点将告知 Edge Delivery Services 在哪里可找到该 Site 的内容。
按需添加一条提交消息，然后单击 提交更改，将其直接提交到 main 分支。
返回您存储库的根目录，然后依次单击 paths.json、编辑此文件 图标。
默认映射将使用存储库的名称。根据项目的需要使用 /content/<site-name>/:/ 更新默认映射，然后单击 提交更改……。
- 提供您自己的<site-name>。您将在稍后的步骤中用到它。
- 映射告知 Edge Delivery Services 如何将您 AEM 存储库中的内容映射到 Site URL。
按需添加一条提交消息，然后单击 提交更改，将其直接提交到 main 分支。

TIP

有关路径映射的更多信息，请参阅文档 Edge Delivery Services 的路径映射。

创建并编辑新 AEM Site create-aem-site

既然已有 GitHub 项目，那就必须创建该项目可使用的新 AEM Site。

NOTE

要使用 Universal Editor 编辑您的 Site，您必须使用基于 Chromium 的浏览器。

在 https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases 从 GitHub 下载最新的所见即所得创作和 Edge Delivery Services Site 模板。
登录到您的 AEM as a Cloud Service 创作实例，导航到 Site 控制台，然后单击创建 > 从模板创建 Site。
在“创建 Site”向导的 选择 Site 模板 选项卡上，单击导入按钮以导入新模板。
上传您从 GitHub 下载的带有 Edge Delivery Services Site 模板的所见即所得创作。
- 该模板只能上传一次。上传后，即可重复使用，以创建其他 Site。
导入该模板后，它即出现在向导中。单击以选择它，然后单击 下一步。
为以下字段提供内容，然后点击或单击创建。
- Site 标题 - 添加该 Site 的描述性标题。
- Site 标题 - 使用在上一步定义的 <site-name>。
- GitHub URL - 使用在上一步创建的 GitHub 项目的 URL。
AEM 用一个对话框确认创建了该 Site。单击确定以关闭。
在 Site 控制台上，导航到新创建 Site 的 index.html，然后在工具栏中单击编辑。
Universal Editor 在新标签页中打开。您可能需要点击或单击 使用 Adobe 登录 以进行身份验证才能编辑您的页面。

您现在可以使用 Universal Editor 编辑您的 Site。有关更多信息，请参阅 Universal Editor 文档。

发布您的新 Site publishing

使用 Universal Editor 编辑完您的新 Site 后，即可发布您的内容。

在 “Site” 控制台上，选择为您的新 Site 创建的所有页面，然后在工具栏中点击或单击 快速发布。
在确认对话框中点击或单击发布以开始该过程。
在同一浏览器中打开新标签页，然后导航到您新 Site 的 URL。
- https://main--<repository-name>--<owner>.aem.page
查看您发布的内容。