Experience Manager Guides和Edge Delivery Services (Beta)

Adobe Experience Manager Guides允许您通过基于GitHub的专用发布配置文件,直接将DITA内容发布到Edge Delivery Services (EDS)(当前在​ Beta ​中提供)。 此功能使组织能够提供高性能、响应式文档体验,同时在Experience Manager Guides中维护基于DITA的创作工作流。

有关在Adobe Experience Manager中使用EDS的详细信息,请查看Edge Delivery Services概述

要支持从Experience Manager Guides发布到EDS (Beta),您必须在GitHub和Experience Manager Guides中完成一系列配置步骤。 以下各节将依次概述每个步骤,并解释它们如何在整个发布工作流程中协同工作。

若要快速视频演练,请查看AEM Guides中的发布

设置和配置适用于EDS的GitHub (Beta)

本节介绍如何设置和配置GitHub以与EDS (Beta)一起使用。 它介绍如何使用Adobe样板创建存储库,通过AEM代码同步将GitHub连接到Adobe Experience Manager,配置所需的GitHub和OAuth应用程序,以及定义用于发布内容的存储库装入点。

创建适用于EDS (Beta)的GitHub存储库

EDS (Beta)需要一个具有预定义结构的GitHub存储库。 Adobe提供了专为Experience Manager Guides用户设计的官方模板存储库。

执行以下步骤可创建存储库:

  1. 打开Experience Manager Guides模板存储库aem-guides-boilerplate

  2. 使用此模板创建新存储库。 了解从模板创建存储库。 确保将存储库可见性设置为​Public,以便EDS可以访问该存储库。

存储库现已创建并与样板模板结构保持一致。

通过AEM代码同步将GitHub连接到Adobe

Adobe Experience Manager使用名为​ AEM Code Sync ​的GitHub应用程序将内容从Experience Manager Guides推送到GitHub。

执行以下步骤以安装和配置​ AEM代码同步 ​应用程序:

  1. 导航到AEM代码同步页面,然后选择​安装

  2. AEM代码同步​监视存储库更改并确保将更新正确推送到GitHub。

    note note
    NOTE
    安装应用程序时,请确保您使用的是拥有存储库的同一GitHub帐户。

  3. 在下一页上,授予对您创建的存储库的访问权限。 为此,请选择​ 仅选择存储库 ​选项,然后从下拉列表中选择您的存储库。

    {width="350"}

  4. 选择​安装并授权

您将被重定向到GitHub设置页面,同时确认已成功注册​ AEM代码同步 ​应用程序。 您还可以从此页面保存您网站的预览和实时URL。

创建新的GitHub应用程序

  1. 在GitHub上,导航到左侧边栏并选择​开发人员设置

  2. 在左侧边栏中,选择​GitHub应用程序

  3. 选择​新GitHub应用程序

    {width="650"}

  4. 在​ 注册新的GitHub应用程序 ​页面上,提供以下详细信息:

    • GitHub应用名称:输入应用名称。 例如,USERNAME-eds-app,其中USERNAME是您的GitHub用户名。

    • 主页URL:输入Experience Manager Guides实例的URL。

      示例URL(格式): https://<aem-author-url>/libs/fmdita/clientlibs/xmleditor/page.html

      示例URL: https://author-p16602-e335172-cmstg.adobeaemcloud.com/libs/fmdita/clientlibs/xmleditor/page.html

    • 回调URL:与主页URL相同。

    • Webhook URL:禁用此选项。

    • 存储库权限:为​ 操作、管理和证明 ​设置​ 读取和写入 ​权限。

  5. 选择​创建GitHub应用程序

您的应用程序现已准备就绪。 您将被重定向到GitHub应用程序的​ 设置 ​页面。

创建新的OAuth应用程序

在Experience Manager Guides中创建EDS (Beta)发布配置文件时,需要使用OAuth应用程序对用户进行身份验证。 它使用​ 客户端ID ​和​ 客户端密钥 ​启用安全登录流程。

执行以下步骤可创建新的OAuth应用程序:

  1. 在GitHub上,导航到左侧边栏并选择​开发人员设置

  2. 在左侧边栏中,选择​OAuth应用程序

  3. 选择​新建OAuth应用程序

    {width="650"}

  4. 通过提供以下强制性详细信息注册您的应用程序:

    • 应用程序名称:输入EDS存储库的名称
    • 主页URL:输入Experience Manager Guides实例的URL。 (有关示例URL格式,请参阅创建新的GitHub应用程序部分的步骤4)。
    • 授权回调URL:与主页URL相同
  5. 选择​ 启用设备流 ​选项,然后选择​ 注册应用程序 ​以完成注册。

    {width="650"}

您的应用程序现已准备就绪。 记下​客户端ID。 在Experience Manager Guides中配置发布配置文件时,您现在或以后最多可以生成五个​客户端密钥

在EDS (Beta)存储库中配置装载点URL

EDS (Beta)从​ 文件中定义为 ​装入点fstab.yaml URL的GitHub存储库路径中读取内容。

要在fstab.yaml文件中配置挂载点URL,请执行以下操作:

  1. 在存储库中打开fstab.yaml文件并更新以下内容:

    • your-user-name
    • your-repo-name
    note note
    NOTE
    在装入点URL中,main表示要发布内容的分支,docs表示您正在处理的EDS (Beta)存储库的根文件夹。 如果您希望在GitHub上更改分支名称,则必须在​装入点 URL(在fstab.yaml文件中)以及Experience Manager Guides中的相应EDS发布配置文件中更新相同的分支名称。

    {width="650"}

  2. 选择​提交更改,输入提交详细信息,然后确认。

  3. 返回开发人员设置,找到您的应用程序,然后选择​编辑

    {width="650"}

  4. 导航到​ 安装应用程序 ​页面,然后选择​安装

    {width="650"}

  5. 重复步骤2和3,从通过AEM代码同步部分将GitHub连接到Adobe以授权存储库。

在Experience Manager中创建并配置EDS (Beta)的发布配置文件

以下部分将依次概述每个步骤,并解释如何在Experience Manager Guides中设置EDS (Beta)发布配置文件、配置输出预设以及使用EDS (Beta)生成输出。

创建EDS (Beta)发布配置文件

  1. 转到​Workspace设置 > 发布配置文件

  2. 选择​ + ​图标以创建新的发布配置文件并提供以下详细信息:

    • 服务器类型:从下拉列表中选择​GitHub Edge Delivery Services (Beta)
    • 名称:输入此配置文件的名称。
    • 存储库名称:使用从样板创建的GitHub存储库名称。
    • 用户名:输入您的GitHub用户名。
    • 分支main:设置为主要(默认)。
    • 根文件夹:设置为文档(默认)。
    • 客户端ID和客户端密钥:从GitHub应用程序获取它们(有关详细信息,请参阅创建新的OAuth应用程序部分)。
  3. 选择​ 登录 ​以进行身份验证。

    {width="650"}

  4. 成功验证后,选择​保存

您的EDS (Beta)发布配置文件现已配置完成。

创建EDS (Beta)的输出预设并生成输出

  1. 在地图控制台中打开您的地图。

  2. 在​ 输出预设 ​选项卡中,选择​ + ​以创建新的输出预设。

  3. 在​ 新建输出预设 ​对话框中,提供以下详细信息:

    • 类型:选择​Edge Delivery服务(Beta)
    • 名称:提供此预设的名称
  4. 选择​添加

    {width="650"}

  5. 打开新创建的EDS (Beta)输出预设,并导航到​ 配置 ​选项卡。

    • 选择在上一步中创建的发布配置文件。
    • 启用​推送至

    启用​ 实时推送 ​后,生成的输出将提交到GitHub,并且相应的更新将立即传播到实时网站。

    {width="650"}

  6. 选择​保存,然后选择​生成输出

NOTE
生成的输出存储在EDS (Beta)存储库的​ 文档 ​文件夹中。

现在会生成EDS (Beta)输出。 内容以简洁的响应布局显示。 它包括常规元素,例如页面标题、痕迹导航、正文内容以及主题中使用的任何块。 左侧的目录(从地图生成)可帮助您跨主题导航,而右侧的迷你目录会突出显示当前页面中的部分。 整个输出完全响应,确保跨设备优化、一致的读取体验。

使用EDS块自定义输出

EDS使用blocks来控制内容的不同部分的样式和显示方式。 您可以修改现有块或创建自定义块。

以下列出的示例将指导您逐步自定义现有块并创建新块以设置Experience Manager Guides中最终EDS (Beta)输出的样式。

自定义痕迹导航块以更新其文本颜色

跨页面使用痕迹导航,以帮助用户了解它们在文档中的位置。 由于此块在整个网站中始终显示,因此更新其样式可以统一更新设计。

执行以下步骤可自定义痕迹导航块以更新其文本颜色:

  1. 转到您的GitHub存储库并打开blocks文件夹。

  2. 选择​ 痕迹导航 ​块。

    {width="650"}

  3. 打开css文件并更新文本颜色。

  4. 将更改提交到GitHub。

  5. 刷新实时网站以查看更新。

更新EDS (Beta)脚本以在发布的输出中创建自定义元素

在某些情况下,您可能希望仅设置内容特定部分的样式。 请使用自定义块执行以下步骤来实现这一点。

  1. 打开主题文件并选择标记元素中的文本。

    在以下屏幕截图中,选择了example标记中的内容。
    {width="650"}

  2. 要配置example标记中的文本,请执行以下操作:

    • 导航到​内容属性
    • 添加outputclass属性。
    • 将其值设置为example eds-force-block
    • 选择​添加
      {width="650"}
  3. 保存并重新生成输出。

  4. outputclass目录中创建一个与blocks同名的新文件夹。 了解将文件添加到存储库

    {width="650"}

  5. 添加必需的css和可选的js文件。

    {width="650"}

  6. 提交更改并重新生成输出。

所选内容现在显示块中定义的自定义样式。

{width="650"}

recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178