DE{CODE}：Atlas 的新功能

WP Engine 的 Atlas 无头开发工具的更新将帮助您满足客户最苛刻的要求。 使用免费的 Sandbox 帐户，此演示将向您展示如何将这些新功能添加到您的无头站点。 观看下面的视频，开始构建您迄今为止性能最高、最安全的网站！

会议幻灯片

全文抄本

凯伦·梅斯：嗨。 我是 WP Engine 开发者关系团队的 Kellen。 在本次演讲中，我们将探讨 Atlas 生态系统中一些令人兴奋的新功能。 我们将看到如何在 WP Engine 用户门户中创建一个新的 Atlas 应用程序并选择此组合蓝图。 通过这样做，我们可以在几分钟内在互联网上获得一个成熟的无头 WordPress 网站。

然后我们将了解如何将该项目克隆到我们的本地机器并为本地开发进行设置，以便我们可以对我们的新站点进行自定义。 然后我们将注意力转向 Atlas Content Modeler，看看我们如何使用它来创建一个名为 Photos 的新自定义内容模型。

这个照片内容模型将有一些自己的自定义字段，包括一个可重复的字段，这是 Atlas Content Modeler 最近推出的一项新功能。 最后，我们将了解如何在我们的前端 JavaScript 应用程序中进行一些自定义开发并查询该自定义照片数据，然后将其呈现到页面。

创建 WP Engine 帐户并登录到用户门户的 Atlas 页面后，我可以继续并单击按钮创建新应用程序。 从这里开始，我们可以从一个蓝图开始，这是一个预建站点，或者从现有的 repo 中提取。 让我们从蓝图开始。 现在我们可以选择我们喜欢使用的蓝图。 因此，我们将选择 Portfolio 蓝图，然后单击 Continue。

下一步是将此应用程序连接到 GitHub。 因此，我们将单击此按钮，然后登录 GitHub。 之后，我们将看到此屏幕，表明我们的应用程序已获得授权。 所以接下来，我们需要实际克隆这个 repo。 因此，我们将单击克隆蓝图，然后为我们的新存储库命名。 然后单击按钮使用此蓝图模板创建一个新的存储库。

所以在这里你可以看到这个新的应用程序仓库已经在我的 GitHub 帐户上创建了。 现在我们需要将这个 repo 链接到我们的 Atlas 应用程序。 所以回到用户门户，我们将向下滚动到“选定存储库”部分。 如果您允许访问所有存储库，您可能会在列表中看到它。 如果没有，您可以单击“管理存储库”。

在此页面上，您将能够选择 Atlas 应该能够访问的存储库。 因此，我们将在列表中选择我们的回购协议。 单击保存，现在当我们返回到用户面板时，我们会看到我们添加的存储库弹出在列表中。 所以继续选择它。 对于我们应用程序的区域，我们将坚持使用美国中部。 最后，单击按钮创建此 Atlas 应用程序。

在这里，我们将看到一条通知，表明我们的应用程序正在构建中。 因此，我们将稍等片刻。 现在我们的 Atlas 应用程序已经完成构建，我们可以继续并单击此 Atlas URL 链接以查看我们在 Internet 上实时运行的新 Atlas 应用程序。 所以在主页上，我们会看到我们的最新帖子列表。 我们会看到我们的推荐。

我们可以前往投资组合页面并在此处查看我们的投资组合项目列表。 我将点击进入一个单独的项目。 接下来，我们将查看博客。 因此，请转到博客页面并在此处查看我们的帖子网格。 我们也可以点击查看单个博客文章页面。 然后准备好，设置，点击，返回到我们的主页。

所以您可能会注意到这些页面转换非常快。 我们立即从一页切换到另一页。 这是使用无头 WordPress 架构的好处之一。 接下来，让我们看看幕后支持这种体验的 WordPress 网站。 因此，让我们回到 WP Engine 用户门户，从这里我们可以单击此链接到链接的 WordPress 环境。

在这里，我们可以单击 WP Admin 以发送到我们网站的 WordPress 管理员。 所以这是我们支持这种体验的后端。 让我们转到帖子，我们可以在这里看到它已经预先填充了许多虚拟博客帖子。 所以这就是我们新站点的所有数据的来源。 我们也来看看插件。 在这里您可以看到已经安装并激活了几个插件以启用无头 WordPress 开发。

让我们特别注意 Atlas Content Modeler。 因此，在边栏中，我们单击 Content Modeler。 您可以在这里看到已经为我们创建了两个自定义内容，项目和推荐。 我们可以在侧边栏中看到这些。 所以我们有项目，这些项目的列表，以及推荐书和这些项目的列表。 所以这就是我们在前端站点中看到的项目和推荐数据的来源。

所以我们取得了一些很大的进步。 我们已经了解了如何从用户门户创建新的 Atlas 应用程序。 当我们这样做时，它不仅会创建一个前端 JavaScript 应用程序来为您的网站页面提供服务，还会创建 WordPress 后端来增强这种体验并为您省去将两者链接起来的麻烦。 它将这两者连接起来，以便前端应用程序能够从 WordPress 后端获取数据。

从那里我们能够查看前端应用程序并看到它在线实时运行，以及在 WordPress 管理员中四处浏览并查看一些自定义数据类型或数据模型以及一些虚拟数据是为我们创造的。 所以在很短的时间内，您可以看到我们现在有一个功能完备的 headless WordPress 应用程序正在运行。

但是，如果此时我们想要进行更改怎么办？ 如果您正在构建一个实际的投资组合网站，并且您自己认为这真的很酷，该怎么办？ 这是一个很好的开端。 但现在我想做一些改变。 我想做一些代码更改，可能会换掉一些颜色或向我的站点添加其他页面。 我怎么做？ 我如何开始本地开发？ 接下来我们一探究竟。

首先，我们将复制链接到我们的 GitHub 存储库，然后继续在命令行上运行 git clone 来克隆我们的项目。 从这里，我们可以 CD 进入该项目目录，然后运行 ​​NPM install 来安装我们项目的依赖项。 完成后，我们将继续在代码编辑器中打开项目。

接下来，我们需要设置一些环境变量。 所以你会看到这里已经为我们创建了一个示例文件。 现在我们只需要确保它具有正确的值。 所以回到用户门户，我们将单击“管理变量”，然后查看生产应用程序使用的环境变量。 继续将它们复制并粘贴到我们的应用程序中，以便我们的本地应用程序将使用与生产相同的环境变量。

这里的最后一步是重命名这个文件，从它的末尾删除 .sample 以便它生效。 现在，我们在这里使用的前端应用程序构建在 Faust.js 之上。 而 Faust，为了完成它所做的数据获取魔法，需要能够运行所谓的 GraphQL 自省查询。

所以这基本上是 Faust 询问 WordPress 后端，嘿，GraphQL 模式中有哪些数据可供我查询？ 因此，我们需要启用内省才能使其正常工作。 我们将在这里回到 WordPress 管理员并转到 GraphQL，然后在侧边栏中进行设置。

在“设置”页面上，我们将向下滚动到我们看到“启用公共内省”的位置，然后继续并单击该框。 当我们在这里时，我建议还启用图形调试模式。 这将为您提供更具描述性的调试消息。 完成后，我们可以继续并单击按钮以保存我们的更改。 现在终于可以打开终端并运行 NPM run generate 了。 一旦完成，最后，NPM run dev 使我们的应用程序在本地启动并运行。

现在，我将单击这个 localhost 3,000 链接，我们可以看到我们的网站确实在本地运行。 所以我们说我们想在其中添加一些内容来定制我们的网站。 现在我们已经为本地开发做好了准备，我们可以做到这一点。 因此，假设对于这个项目，我们不仅希望拥有博客文章，还希望拥有我们拥有的一些自定义内容，例如我们看到的投资组合项目以及这些推荐。

除了自定义内容之外，假设我们还想添加更多内容。 除了创建博客文章和创建投资组合项目的人之外，假设该网站的客户也是一名摄影师，他们想要展示他们拍摄的照片。 我们如何向我们的站点添加自定义内容类型或自定义内容模型以支持这张照片的数据、查询该数据，然后在我们的前端应用程序中显示照片？ 让我们接下来这样做。

因此，我将返回这里的 WordPress 管理员，然后我们将转到 Content Modeler。 所以我们以前去过屏幕一次。 我们浏览了项目和推荐书。 我们可以看到，这些是作为此蓝图的一部分为我们创建的自定义内容模型。 我可以点击其中的每一个，看到每个模型都有自己的一组单独的字段。

因此，例如，项目将具有这些单独的字段。 项目和推荐都反映在侧边栏中。 然后是每个字段的字段。 如果我单击一个项目，然后单击一个现有项目或转到添加新项目，无论哪种方式，我们都会看到所有这些字段都反映在这里。 因此，我们的内容创建者将看到他们输入此数据所需的所有字段。 好的。

但是，对于我们的自定义内容，我们需要一个新模型。 因此，我将继续并通过单击此处的此按钮创建一个新模型。 所以我会称这张照片为。 对于复数名称，我们只在末尾加上一个 S 并将其称为照片。 这个自动生成的 API 标识符——在这里，这个 ID——我没问题。 照片对我来说很好看。 对于 API 可见性，我们希望确保单击 public，因为我们希望能够通过 GraphQL 查询此数据。 对于我们的模型图标，也许相机之类的东西适合用于照片。 现在我将单击“创建”。

就这样，我们的照片内容模型就创建好了。 所以在这一点上，它说为内容模型选择你的第一个字段。 截至本次录制，这些是 Atlas Content Modeler 支持的字段类型。 对于我们想要在此网站上展示的照片，让我们使用其中的一些。

假设我们要给每张照片一个标题。 所以我会说标题，然后将其称为照片标题作为 API 标识符。 这就是它在 GraphQL 模式中可用的方式。 这就是它的目的。 我们会说我们想用它作为条目标题。 单行文本很好。 因此，继续并单击“创建”。

对于我们的下一个字段，假设我们要为照片捕获该图像本身。 所以我会加号。 在这里，我们将创建一个新字段。 我们将称之为一个图像。 实际上，对于类型，我们需要选择媒体，因为它将是一张照片。 所以我将其命名为图像。 然后在这里，我将继续将其设置为每个帖子的特色图片。 所以我将单击它，我们也会将其设为必填项。 所以我们总是知道它会在那里。 然后点击创建。

给你。 这是我们的第二个领域。 对于第三个，让我们来描述一下。 所以我会加号。 对于这一个，这将是一个富文本字段。 所以我们会说描述，这将针对该字段进行描述。 然后我们想要的最后一个是主题。 所以我们将使用这个字段来捕捉照片中显示的内容。 因此，如果它是日落时的山脉照片，例如，就像我们的一张照片一样，照片中的某些主题可能是山脉、星星、天空等。 只是照片中出现的事物的列表。

将有不同的方式来存储这些数据。 例如，您可以创建自定义分类法，然后为其中的每一个分配术语。 所以这些照片中的每一张都可以有一个或多个术语。 那将是一种方法。 不过，就我们的目的而言，我们对能够根据类似标签或分类法将照片分组在一起不感兴趣。

相反，此列表实际上仅用于网站上的显示目的。 麻烦的是，如果我们在这里点击加号，我们把它变成一个文本字段，好吧，那么我们只会得到其中一个，对吧？ 如果还有更多呢？ 我们无法提前知道一张给定的照片可能有多少这样的主题，对吧？ 这就是 ACM 的可重复字段功能真正派上用场的地方。 那么让我们看看它是什么样的。

我将在此处将其设为文本字段，并将其命名为 subjects。 然后使该字段可重复。 所以这是关键。 我们将继续并单击它。 我们将把它保留为单行文本字段，然后点击创建。 就这样，我们的照片内容模型现在已经创建了。 我们可以在侧边栏中看到它。

因此，如果我单击此处的照片，我们将看到我在这里提前创建了一个虚拟照片。 但是如果我们创建 Add New，您会看到这反映了——这里的字段反映了我们在内容模型中添加的内容。 所以我们得到一个标题。 我们有机会附上一张图片。 我们有一个用于照片描述的富文本字段，以及一个可重复的字段，用于添加一个或多个主题。

那么让我们看看我们可以在这里做什么。 我将单击“添加精选图片”。 我将从我的机器中选择一个。 让我们来看看。 上传完成后，我们会给它一些替代文本。 我们会说，一朵白花，就像那样，完成了。 这就是我们的形象。 不过，现在让我们回过头来给它起一个标题。 我们会说带有散景的白花。 就这样。 对于描述，我们会说这是一些漂亮的白色花朵的精彩照片。 就这样。

现在对于我们的主题，我们可以问问自己，这里的照片中有什么？ 也许我们可以——花可以是其中之一。 单击添加项目。 背景虚化的散景效果也存在。 再举一个例子，我猜，树干或树枝会出现在镜头中。 因此，我们将在此处添加其中一些。 如果我们认为我们已经捕获了所有内容，您可以继续并点击发布。 所以我们开始了。

然后回到照片中，我之前创建了这个。 山上凉爽。 应该这样设置。 所以你得到一张山脉照片。 然后这是一张很棒的山脉照片，上面有山脉、星星和阴影。 它有几个主题。 这样我们至少可以在前端应用程序中使用一些帖子。

所以在这一点上，我们已经在 WordPress 后端创建了我们的内容模型来存储我们需要的这些照片的数据，并且我们已经创建了两个新的照片帖子供我们用来尝试在我们的前端应用程序上消费。 接下来，您可能想知道，我们如何将这些数据从 WordPress 中提取出来，以便我们可以在我们的前端应用程序中使用它？

Atlas Content Modeler 展示了一项非常酷的功能，可以让这一切变得非常简单。 因此，我将返回此处的 Content Modeler 并找到我们的照片模型，然后单击此处的小省略号点图标。 我将转到以图形方式打开。 所以只要我点击它，它就会为我编写一个查询，其中包括我们创建的这个内容模型，照片。

它获取其中的前 10 个，然后在下面包含这个 GraphQL 片段，其中包含我们创建的所有字段，包括自定义字段。 因此，如果您注意到的话，我们添加了照片标题、图像、描述，然后是主题。 所以这对于查看这些数据在 GraphQL 模式中的样子非常方便。 所以继续点击这个按钮来执行这个查询。

如果执行同样的 GraphQL 查询，您可以看到我们的前端 JavaScript 应用程序会返回什么。 它会取回照片。 然后在其中将是一个称为数组的对象，称为节点。 在该数组内部将是看起来像这样的对象。 这些照片中的每一张都有一个标题、一张图片，然后再往下是描述和主题。

所以这正是我们所需要的。 所以我们现在要使用其中的几个字段。 因此，就我们的 WordPress 后端以及存储和公开这些照片数据的能力而言，我们已经准备就绪了。 那么现在让我们看看如何在我们的前端 JavaScript 应用程序中使用它。

所以我们会回到那里。 我认为一个很好的起点是查看 Portfolio 页面，这是一个项目列表，对吧？ 由于这是自定义内容模型帖子的列表，照片也是如此，所以这两个页面有很多共同点。 所以我们可以以此为起点。

所以我会在这里点击投资组合，只是为了提醒自己它是什么样子的。 就像这样，我们在这里获得了投资组合项目列表。 因此，让我们现在破解代码并动手操作一下。 我们将追踪这个页面，也就是那个 slash 项目，看看它是如何构建的。

所以在 Source 中，我将转到 Pages。 然后我会找到项目。 就在那里。 然后打开其中的 index.js 文件。 所以向下滚动一点，我们会看到正在使用这个使用节点分页挂钩。 这是一个 React 钩子，来自这里的这个位置，在 Hooks 文件夹中。 在其中，我们调用 query.projects。

query.projects 将允许我们访问有关项目自定义帖子类型的数据，也就是我们创建的项目内容模型。 所以我们要调用 query.projects 然后传入一些我们想要提前处理的字段，以便它们在页面加载后立即处理。 这就是这个数组在这里的内容。 所以这些字段在页面的第一次加载时就在那里。

然后，一旦我们真正准备好呈现此页面的内容，我们就会这样做。 我们有一个 SEO 组件、一个页眉，然后是底部的页脚。 然后这里页面的主要部分位于这个主要标记的内部，我们有标题，这是被拉入的蓝色部分。然后是一个包装 div，其中包含我们的项目列表。 然后还有这个 Load More 组件，它会在底部产生这个 Load More 按钮，我可以点击它。 然后获取更多项目并将它们弹出到 UI 中。

这就是该页面的构建方式。 就像我说的，我喜欢以此作为我们的起点。 所以让我们继续复制整个文件，我们将在这里模仿这个文件结构。 所以在页面内部，我们将创建照片。 然后在该文件夹内，我们将创建一个 index.js 文件。 好的。 在这个新文件中，我将粘贴内容。 但是我们会改变一些东西，因为我们对项目数据不感兴趣，我们想要我们的照片数据。 那么让我们看看我们如何做到这一点。

所以这个常量的名称是引用项目。 因此，让我们继续并将其重命名为第一步。 我们可以说照片节点预先通过字段。 这样就好了。 我们必须提供我们自己的字段列表。 也许我们现在只保留数据库 ID，稍后我们会添加一些。

再往下看。 照片预通过。 哦，名字搞砸了。 我们开始了。 所以现在他们再次匹配。 好的。 记住，我们需要 query.photos 作为我们的自定义内容类型，而不是 query.projects。 因此，继续将其更新为照片，就在那里。 向下滚动一点。

所以这个项目组件，这将不再适用，因为我们没有使用它。 所以我现在将删除它，这个怎么样？ 我们只会 - 我们只会 H1。 它说你好，只是为了在此处的页面上呈现一些东西。 也许我们也会注释掉 load more。

因此，我将搜索项目以查看是否有任何我忘记的内容。 是的，只是一些代码注释，然后这里的这个组件被拉进来了，我们不再使用了。 所以我会删除那个组件。 我认为我们应该很好。 所以我们现在没有使用其中的一些东西，但没关系。 我们会暂时的。

所以我会给它一个保存，我们会看看我们是否可以获得该渲染。 所以现在在我们的前端应用程序上，我应该能够导航到照片，就像这样。 我们开始了。 这是我们的新页面。 它打招呼，其中大部分看起来与我们的投资组合项目页面相同，例如顶部的页眉和页脚。

我注意到它仍然说投资组合，我们可能想换掉它。 所以我们可以简单地做一下。 所以这是投资组合。 我们会说照片。 然后也在这个地方，我们将把它改为照片。 保存。 我们开始了。 这样就更新了标题。

现在让我们深入探讨如何实际使用该数据，获取我们的照片数据并在此处显示一个列表。 那么我们从哪里开始呢？ 正如我们在 GraphQL 或此处的 WordPress 管理员中看到的那样，这就是我们的查询大致的样子。 它将具有这些字段。 所以让我们这样做吧。 所以照片标题是自定义字段。 但实际上，由于我们将此字段设置为帖子的标题，我们可以只使用标题，因为这将是——帖子的标题将与具有此名称的自定义字段相同。 所以我们可以使用它。

所以在这个数组中，我们不仅要获取数据库 ID，还要获取照片、图像、描述和主题的标题。 因此，让我们也添加这些。 图片、描述，然后是主题。 好的。 最后你需要逗号。 我们开始了。 所以我认为这是我们希望在页面结束时立即可用的所有字段。 所以这对我来说很好。

让我们测试一下我们是否真的可以在这里得到一些数据渲染。 因此，在我们拥有的 Hello H1 下，让我们这样做。 我们将执行 JSON.stringify，然后我们将传递给它一些东西。 所以我们将在这里做数据，看看我们是否可以将数据渲染到我们的页面。

所以我将保存它，然后我们将返回到我们的前端。 确实如此。 这就是数据的样子。 你可以看到我们成功地从我们的 WordPress 后端获取它。 我们有这个节点数组，然后在该对象内部代表我们的每张照片以及我们要求返回的数据，包括此处可重复主题字段的每个单独值。

所以这很棒。 这正是我们所需要的。 让我们把事情弄得更干净一点——好吧，我想，比像这样在页面上吐出数据要干净得多。 让我们映射我们的每条数据并为此在页面上呈现一张卡片，而不仅仅是这里的 pre 标记。

所以我喜欢做的一件事是，在我们假设我们有帖子要呈现之前，我们必须考虑可能没有帖子的情况，对吗？ 所以我喜欢做的一件事是在我的组件的顶部，我确实有照片，类似的东西。 然后我像那样做 data.nodes.length 。 我们将为可选链接做一个问号，因为我们不知道数据是否会存在。

然后我们将其转换为这样的布尔值。 所以这意味着如果我们在这一点上失败并且数据未定义，这将被转换为 false。 我们会说，我们没有要渲染的照片。 否则，如果我们能够一直向下钻取到该数组的长度，则它要么为零（如果没有帖子），要么为一个或多个。 因此，如果我们将该整数转换为布尔值，它会告诉我们是否有照片。 所以如果它是零，这将是错误的。 如果是一个或多个，则 havePhotos 为真。

因此，有了这些知识，我们就可以在我们的组件内部做一些决策。 因此，让我们弄清楚我们如何做到这一点。 所以我会说，如果我们有照片，那么我们想要渲染一件事。 我们会说——让我们看看。 我们想要做 data.photos 然后我们将映射这些。 所以对于每张照片，我们都会渲染一些东西。

所以让我们首先返回一些简单的东西。 我们将返回 - 让我们看看。 我们会做一个 H2，怎么样，因为这就像我们的一张卡片。 然后我们会这样说 photo.title 。 好的。 所以我们将映射我们的每张照片。 对于其中的每一个，我们将返回一个带有该照片标题的 H2。 好的。

所以如果我们真的有照片要渲染的话，所有这些都是我们想要的。 但是，如果我们不这样做，那么替代方案呢？ 所以我们将在这里有我们的 else 子句，让我们渲染其他东西。 段落呢。 我们会说，没有照片可以显示。 所以现在如果我们保存它，我们就可以了。 所以现在我们要在这里呈现我们的帖子标题。

因此，让我们在这里完成更多功能。 我们会说我们想要返回其他东西。 好的。 对于其中的每一个，我将只复制一些样式，一些我提前在这里编写的内联样式，只是为了节省我们输入这些样式的时间。 所以我将拥有那个包装 div。 然后在其中，我们可以恢复我们拥有的 H2。 因此，我将粘贴带有标题的 H2。

在标题之后，让我们展示一下描述。 我们可以做下一个。 所以这将是 photo.description，就像那样。 但是我们不能只渲染它本身，比如在容器内部，就像这样。 如果我们尝试这样做，这对我们来说不太有效，因为 HTML 不会被转义。 所以如果我保存它，你现在可以看到我们在页面上显示了转义的 HTML，这不是我们想要的。

所以 React 有一个用于处理 HTML 的实用程序，它是安全的，不需要像这样转义。 那就是使用 div，然后像那样危险地使用 SetInnerHTML。 您可以向它传递一个对象，其中一个属性是双下划线 HTML。

然后你传递给它的值就是你想要在不转义的情况下呈现的东西。 所以对我们来说，就是 photo.description，就像那样。 然后这个div就可以自己穿衣服了。 好的。 所以现在我给它一个保存。 我们会看到我们得到了什么。 凉爽的。 所以现在我们的 HTML 不再被转义了。 所以我觉得不错。

所以这很棒。 那张特色图片怎么样？ 我们能做的就是从头开始写这个。 我们可以抓取特色图像 URL 和图像标签并将其作为 URL 传递。 然后浏览器将呈现图像并将其指向该源。

然而，这个项目，如果你深入研究这个蓝图代码库，实际上有一个预构建的组件正是为了这个目的，称为特色图像。 所以对我们来说，这将是我们使用的完美选择。 因此，我将向上滚动一点到我们从组件目录中导入一堆不同组件的位置。 我将在此处的末尾标记一张名为特色图片，就像那样。 所以现在我们可以在任何我们想要的地方渲染我们的特色图像。

在这个 div 与我们的照片描述的正下方，我们将渲染我们的特色图片。 这需要一个图像道具。 而我们这里需要传入的是这张图片的整个节点。 所以对我们来说，就是 photo.feauredimage.node，就像那样。 我认为这应该对我们的形象有所帮助。 所以我会保存它，果然，我们开始了。 因此，一旦我们的页面在这里重新加载，现在我们就有了我们的标题、我们的描述，然后是照片本身。 同样，对于我们的下一张照片，该图像也会显示在列表中。

所以这很酷。 我们正在取得很大进展。 最后一件事是处理照片中出现的主题的可重复字段。 所以我要做的是在这里创建一个段落并将其关闭。 然后在这个段落标签内，我们可以弹出一些卷曲并做我们相同的 photo.subjects。 但现在我们将加入它的末尾。 我们会告诉 [听不清] 我们想用逗号、空格来加入它，就像这样。 我会给它一个保存。

当我们的热重载发生时，我应该能够向下滚动。 果然，我们开始了。 所以他们被显示在列表中。 用户可能不确定那些是什么。 所以也许在我们的应用程序中，我们可以弹出并添加某种标签，在前面加一个小东西，上面写着主题，就像那样。 主题花，散景，分支。 然后我们这里的另一张照片有主题山、星星、阴影，仅作为示例。

所以我们会在这里暂停，但您可以看到我将此页面放在一起的速度有多快。 我想我们应该摆脱我们的 hello, world on top 那里。 我们不太需要那个。 或者你好词。 所以我会删除它。 我们到了。 所以你可以看到，正如我所说，我们能够多快地把它放在一起。

只是将我们的代码基于投资组合列表页面，我们能够在这里创建我们的照片列表页面，然后映射每张照片并访问它的 Atlas Content Modeler 自定义字段——标题、描述、图像、然后是这里主题的可重复字段。 所以我希望你能在自己的项目中感受到这种力量。

如果您想将我们的蓝图之一作为一个巨大的开端，可以为您完成大部分项目，那么就可以完成大量的跑腿工作。 然后从那里，你可以做一些类似于我们在这次演讲中所做的事情。 您可以进一步定制它并添加您自己的定制和其他内容模型等等。

非常感谢收看。 我希望这次演讲真的很有用，让您对 Atlas 生态系统中已经出现并将继续出现的所有重要功能有一个很好的了解。

主持人：这就是 DE{CODE} 2022 的总结。我希望你觉得它鼓舞人心，并带着更多的 WordPress 专业知识和新的社区联系离开。 从周五开始留意网站上的录制内容，以了解您可能错过的任何内容或再次观看视频。

最后，我想对我们的赞助合作伙伴表示感谢：Amsive Digital、Box UK、Candyspace、Drewl、Elementary Digital、Illustrate Digital、Kanopi Studios、Springbox、Studio Malt、StrategiQ、WebDevStudios 和 10Up。 非常感谢您为我们的 DE{CODE} 筹款活动捐款。 我们非常感谢您的慷慨。

现在，对于在我们的与会者中心和我们的会议中与我们互动的每个人，我们将选出前三名获奖者，并让您知道如何在 DE{CODE} 结束时领取奖品。 我们期待在未来的活动中再次见到您，无论是面对面还是虚拟。 我们迫不及待地想为您带来更多有关 WordPress 最新发展趋势的信息，以及您如何实施这些趋势以更快地构建 WordPress 网站。

这都是我的。 非常感谢您加入我们，保重。