装饰双螺旋

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