装饰双螺旋

如何在 AEM Edge Delivery Services 中添加页面

如果您刚刚完成了 Edge Deliver Services(以下简称 EDS)官方入门教程,您可能想知道如何扩展您刚刚创建的网站。本文将向您展示如何构建新页面并将其发布到您的 AEM 网站。本文假设您已完成原始教程,并且您的浏览器上安装了 AEM Sidekick 扩展,并且有一个正在运行的网站。

首先,在 Google Drive 中创建一个新文件

当您创建新文件时,系统会提示您“创建并共享”,因为您已经在官方教程中与 helix@adobe.com 共享了您的文件夹。共享文件夹及其中的文档,允许 EDS 查看您的 Google Drive 中的内容并将其提取到您的网站中。单击“创建并共享”并开始编辑您的新文档。

在 EDS 项目中编辑文档时,首先要注意的是文档的名称。此名称将用于创建页面所在的 URL。

例如,您在此博客的屏幕截图中看到的项目主 URL 是https://main--drews-franklin-demo--drew-cummings.hlx.live/

如果我创建一个名为“新页面”的新文档,那么该页面发布时的 URL 将为 https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page。值得注意的是,所有生成的 URL 都将是小写的,即使文档名称是大写的。为了便于阅读和导航,请确保您的文档名称简短且相关。

继续将文档标题更新为“新页面”

现在让我们在文档顶部添加一个标题。将文本设置为“标题 1”,然后输入标题。

让我们看看它在网站上是什么样子的。继续访问生成的 URL,在我的情况下是https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page ,看看它看起来如何-

哦不!如果您看到此信息,请不要惊慌。这是默认 EDS 演示中“页面未找到”错误的样子。我们的网站现在找不到我们的页面,因为我们尚未预览和发布它。导航回您的文档并单击 AEM Sidekick 扩展,即下面屏幕截图中最左边的图标

片刻之后,您的辅助工具栏就会出现。您应该注意到其左侧部分有一个带有红点的“预览”按钮。这个红点表示有新内容需要暂存并推送到网站。继续单击该按钮并查看它为您加载的页面。

这是新页面的 预览。发布后,页面在“实时”网站上的显示效果如下。需要注意的是,内容尚未发布时不会显示在实时页面上,而未发布的页面也不会显示在实时网站上。这样,您就可以试验内容并根据自己的喜好进行调整,而无需让网站用户看到,直到您准备好发布页面为止。现在,让我们先不要发布此页面,然后返回 Google 文档添加更多内容。

目前,我们的页面相当简单。让我们用图片给它添加一些颜色。为简单起见,我们将使用示例页面中的蓝色 DNA 图片。

点击预览并查看其外观。

看起来不错!如果您不想让文本覆盖在图片之上,只需将图片放在文档中的标题文本下方而不是上方,您就会得到如下所示的页面。

文本覆盖仅出现在文章中的第一个图像上,并且仅当格式化为最初显示时才会发生,并且标题或标题 1 样式的文本位于图像正下方。

现在让我们为这篇文章添加一些文本内容。我将使用 Lorem Ipsum,这是出版业传统上用于试验文本布局的拉丁文本。Lorum Ipsum 允许我们查看阿拉伯字母内容在页面上的显示效果,而不会因为意外阅读而分心。您可以随意添加任何您想要的文本内容。以下是它在我的 Google 文档中的样子:

以下是它在我的预览页面上的样子:

最后,让我们看看当图像与页面内容对齐时会是什么样子。我将在第一段之后添加演示页面中的一张图片,以演示它在以下网站上的外观:

值得注意的是,EDS 从 Google Doc 中提取内容,并用它来生成创建网站的 HTML 文件。因此,Google Doc 中的图像大小与预览/实时页面上的图像大小无关。如果您想调整网站上的图像大小,则需要调整图像的原始分辨率。

现在我们已经有了一个乐于向世界展示的页面,在发布之前,我们还有最后一步需要完成。我想在不更改文章标题的情况下,将元数据中此页面的标题从“我的新页面”更改为“演示页面”。我还想在元数据中添加描述,以便搜索引擎更容易找到该页面。为此,我们需要添加一个元数据块。

添加元数据块的最简单方法是从演示主页复制并粘贴元数据块,但如果您有兴趣从头开始制作一个,我将引导您完成该过程。

首先,在文档末尾插入一个 2X3 表格。突出显示第一行的单元格,右键单击,然后选择“合并单元格”。

在顶行中输入“元数据”,然后在接下来两行的左侧单元格中输入“标题”和“说明”。在“标题”单元格右侧输入您想要的标题,在“说明”单元格右侧输入您想要的说明。最终结果应如下所示:

现在继续预览页面。您会注意到页面内容根本没有改变,但是如果您查看 Chrome 中的标签,将列出我们的新标题,而不是我们之前的默认标题。

如果我们检查网页的 HTML 文件,我们可以看到标题和描述都作为网页的属性存在

您已准备好发布!单击预览页面上显示的 AEM Sidekick 扩展左侧的“发布”按钮,即可在您的网站上看到新的实时网页。

恭喜您为您的网站添加了一个页面!如果您在发布之前访问过此页面的 URL 并收到 404 页面未找到错误,则发布后您仍会看到该错误。这种情况可能由于多种原因而发生,但除非您收到来自 AEM Sidekick 扩展的错误消息,否则您的内容不太可能真正通过。只需等待一两分钟刷新页面,您就会看到已发布的页面。

如果您喜欢本教程并想了解有关 AEM 产品的更多信息,请查看我们关于 AEM 是什么文章。

关于作者

德鲁·奥利弗·卡明斯
Arbory Digital 的 AEM 开发人员

具有技术写作、Python 开发和 AEM 经验的作家和软件开发人员。

在 Linkedin 上联系 Drew

联系我们

播客节目

如何选择数字体验平台

Arbory Digital 现在有技术 AEM 播客!Raf 和 Tad 深入探讨如何确定您拥有正确的数字体验平台

自托管 Aem 仍然存在吗?

在 Adob​​e 之外托管 Adob​​e Experience Manager 是否仍有可能(或可取)?Tad Reeves 和 Joey Smith 对此进行了探讨!

Adobe 峰会 2023 – 新版本和会议回顾

Tad Reeves 和 Hank Thobe 回顾了他们参加 2023 年 Adob​​e 峰会的经历。我们回顾了峰会的公告及更多内容!