如何在 AEM Edge Delivery Services 中添加页面
如果您刚刚完成 Edge Deliver Services(以下简称 EDS)官方入门教程,您可能想知道如何扩展刚刚创建的网站。本文将向您展示如何构建新页面并将其发布到您的 AEM 网站。本文假设您已完成原始教程,并且您的浏览器上安装了 AEM Sidekick 扩展程序并正在运行网站。
首先,在您的 Google Drive 中创建一个新文件
当您创建新文件时,系统将提示您“创建并共享”,因为您已经在官方教程中与 [email protected] 共享了您的文件夹。共享文件夹及其中的文档,允许 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 Doc 添加更多内容。
就目前而言,我们的页面相当简单。让我们用图像给它添加一些颜色。为了简单起见,我们将使用样本页面中的蓝色 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 峰会上的经历。我们回顾峰会的公告及更多内容!