如何在 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 播客!Raf 和 Tad 深入探讨如何确定您拥有正确的数字体验平台

自托管 Aem 仍然存在吗?
在 Adobe 之外托管 Adobe Experience Manager 是否仍有可能(或可取)?Tad Reeves 和 Joey Smith 对此进行了探讨!

Adobe 峰会 2023 – 新版本和会议回顾
Tad Reeves 和 Hank Thobe 回顾了他们参加 2023 年 Adobe 峰会的经历。我们回顾了峰会的公告及更多内容!