装饰双螺旋

如何在 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 是什么的文章。