用于Edge Delivery Services的WYSIWYG创作的开发人员快速入门指南 edge-dev-getting-started

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

undefined
undefined

本指南将帮助您启动并运行一个新的Adobe Experience Manager站点，该站点使用Edge Delivery Services和通用编辑器进行WYSIWYG内容创作。

先决条件 prerequisites

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

选取适当的编辑器 editor-choice

AEM 提供两个不同的内容编辑器，您可根据自己的情况选择要使用哪个。

Universal Editor - 此编辑器应是新网站的默认选择。
AEM 页面编辑器 - 对于将现有 AEM Sites 迁移到 Edge Delivery Services 应选择此编辑器。

本指南重点介绍使用 Universal Editor 在 Edge Delivery Services 上创作 AEM 项目。有关选择适当的编辑器以及将现有 AEM Sites 迁移到 Edge Delivery Services 的更多详细信息，请参阅文档 Edge Delivery Services 与 AEM结合使用。

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 自定义网站的功能。

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

TIP

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

WYSIWYG创作和Edge Delivery Services快速入门 getting-started

一旦满足先决条件并选择使用 Universal Editor，即可开始您自己的项目。

创建您的 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 在哪里可找到该站点的内容。
按需添加一条提交消息，然后单击 提交更改，将其直接提交到 main 分支。
返回您存储库的根目录，然后依次单击 paths.json、编辑此文件 图标。
默认映射将使用存储库的名称。根据项目的需要使用 /content/<site-name>/:/ 更新默认映射，然后单击 提交更改……。
- 提供您自己的<site-name>。您将在稍后的步骤中用到它。
- 映射告知 Edge Delivery Services 如何将您 AEM 存储库中的内容映射到站点 URL。
按需添加一条提交消息，然后单击 提交更改，将其直接提交到 main 分支。

创建并编辑新 AEM 站点 create-aem-site

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

NOTE

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

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

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

发布您的新站点 publishing

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

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