如何使用 ACF + WPGraphQL 构建您的第一个无头 WordPress 项目

在 WordPress 开发方面，每个人都有自己喜欢的工具，而在没有这些工具的情况下构建无头网站的想法可能令人望而生畏。 幸运的是，WordPress 开发人员最喜欢的两个工具——ACF 和 WPGraphQL——可以帮助您涉足无头开发。

在本次会议中，WP Engine 高级开发倡导者 Jeff Everhart 通过使用 Atlas 在短短几分钟内构建一个演示站点来展示基础设施的来龙去脉！

会议幻灯片：

成绩单：

JEFF EVERHART： 大家好吗？ 我叫 Jeff Everhart，是 WP Engine 的高级开发倡导者。 非常感谢您今天参加我关于使用 ACF 和 WP GraphQL 构建您的第一个无头 WordPress 项目的演讲。 在开始构建之前，我总是喜欢提供一些关于无头 WordPress 是什么的背景信息。 似乎 headless 不再是一个小众术语，而是越来越主流，所以我会尽量保持简短的解释。

Headless WordPress 的核心是通过 API 使用 WordPress CMS 来支持其他类型的应用程序。 如果我们查看这张幻灯片中的图表，当用户请求 site.com/page 时，不是让 WordPress 处理该请求，而是 JavaScript 应用程序响应该路由。 它会查看路径，确定需要从 WordPress 或其他来源获取哪些数据，调用这些 API，并生成对用户的响应。

请务必注意，Node.js 运行时槽中的内容实际上可以是任意数量的不同类型的应用程序或客户端。 我们已经看到使用所有最流行的框架构建的移动应用程序或网站的各种示例都使用了这种模式并取得了巨大成功。 现在您已经很好地了解什么是无头 WordPress，让我们来看看我们将在今天的项目中使用的技术堆栈。

在我们的最底层，我们将使用 WP GraphQL 作为我们的 API。 WP GraphQL 将您的 WordPress 后端变成一个强大的 GraphQL API。 它执行与原生 WordPress 和核心 REST API 执行的所有相同的角色和功能安全检查。 WP GraphQL 是开发无头应用程序的绝佳选择，因为使用其声明式查询语言，我们可以跨该内容工艺查询不同的内容类型。 因此，在同一个请求中获取帖子、页面及其类别。

现在，让我们看看如何使用 WordPress CMS 构建和建模一些更复杂的数据。 许多处理无头项目的开发人员需要建模和存储不同的数据，对吗？ 扩展到 WordPress 的典型帖子或页面之外。 ACF 或高级自定义字段是为这些自定义字段建模的好工具。 在即将发布的版本中，它将变得更加强大，允许您直接在该插件的免费版本的 UI 中注册帖子类型和分类法。

它使所有数据都可以通过 REST API 轻松获得，但需要安装 WP GraphQL 扩展才能将一些字段数据添加到我们的 GraphQL 架构中。 就个人而言，我真的很高兴看到这个插件的发展，因为它对无头开发人员来说变得更加强大。

现在，我们可以对复杂数据进行建模并通过 WP GraphQL 对其进行查询，我们需要一些方法来为我们的用户创建这些现代 Web 体验，同时还支持已经了解并喜爱 WordPress 的内容编辑器。 这就是 Faust 的用武之地。Faust 是一个由两部分组成的框架，包括一个 WordPress 插件和一个基于 Next.js 的 JavaScript 框架。 他们共同努力，使构建无头 WordPress 网站变得简单而直观。

它增加了对帖子预览和开箱即用身份验证等功能的支持，您可以在现代 JavaScript 中体验重新想象的 WP 模板层次结构体验。 Faust.js 旨在成为一个高度可扩展的平台，并附带一个插件系统和一个管理栏，您可以使用它们来自定义和创建支持您的特定用例的体验。

最后但同样重要的是，我们需要一些方法在本地和生产环境中使用这些工具。 使用 local 和 WP migrate，我将这个项目所需的所有 WordPress 资源提取到一个 zip 文件中，您可以将其拖放到本地以开始使用。 完成站点构建后，我们可以将工作推送到 Atlas 平台。 Atlas WP Engine 的多合一无头托管解决方案结合了您的 WordPress 后端和 Node.js 容器，所有这些都经过调整以通过一个无缝仪表板协同工作。

现在您已经很好地理解了我们将在今天的演示中使用的所有工具，让我们直接开始构建吧。 打开此幻灯片中的 URL 以在浏览器中访问演示代码。 我已尝试让这种体验尽可能简单，但我们将在接下来的 25 分钟内介绍很多内容，所以请随时观看并回头参考这个 GitHub 存储库和稍后记录本次会议，以便在会议结束后继续工作。 如果解码的其余部分是一场车展，那么本次会议就是关于构建引擎。 双关语完全是故意的。

现在我们已经打开了 GitHub 存储库，让我们开始吧。 我建议您做的第一件事是在您自己的帐户中创建此存储库的分支。 如果您查看此存储库中包含的内容，您将在自述文件中看到一堆示例代码以及一些分步说明，了解我们将在本演示文稿中执行的所有操作。 事实上，我们会直接从这个存储库复制和粘贴到您的项目中。 要在本地克隆它，让我们继续在终端内运行 Git clone 命令。

下载只需一秒钟，然后一旦我们下载了项目，让我们继续并将我们的目录更改为该项目目录。 从那里，我将运行一个命令在 VS Code 中打开这个项目，但你应该随意使用你想要的任何代码编辑器。 由于 VS Code 已经有一个集成终端，我可以清理它，然后继续关闭 iTerm。 现在，我们可以过渡到定位我们的 WordPress 本地站点。 为此，我们将在 Finder 中打开该项目，然后找到我为您准备的无头 WP 演示 zip 文件。

我们将该 zip 文件直接拖放到本地开发环境中，本地将开始为您解压缩和引导演示 WordPress 站点的过程。 我们几乎可以坚持使用默认设置，然后本地只需几分钟即可为您创建一个新的 WordPress 站点。 现在，这是 WP migrate pro 的一个很棒的功能，它允许我将任何站点导出为 zip 并将其直接拖放到本地，这样我就可以非常快速地将生产站点带到我的本地机器上，而不管平台是什么。

安装完成后，您可能想要继续并信任此 SSL 证书，然后我们将继续并在 WP Admin 中打开此项目。 从那里开始，我们将继续并最小化本地，因为它已经在运行，我们真的不需要对它做任何其他事情。 因此，从那里，我们将打开我们的存储库，您将在其中找到我已经为该演示站点创建的管理员用户名和密码。 您应该能够使用这些凭据继续并登录到 WP 管理仪表板。 从那里开始，我们将花费一秒钟的时间来了解这个本地 WordPress 安装。

我们要做的第一件事是查看随此 WordPress 站点安装的插件。 我们看到了诸如用于数据建模的高级自定义字段之类的东西。 我们有犯规来启用我们的一些无头功能，WP GraphQL 充当我们网站的 API，然后 WP GraphQL 用于 ACF 扩展以显示一些 ACF 字段组。 现在，让我们也看看这些帖子。 如果您查看我在这个项目中预先填充的所有不同的演示帖子，我们可以看到我们有许多不同的帖子，有很多不同的类别。

如果我们查看每个帖子的内容，我们会发现我们有一堆正文内容、一些图像、特色图像和一些我们已经创建并预填充的 ACF 字段组。 因此，让我们更详细地了解一下字段组。 如果我们打开 ACF 菜单，您会看到我们创建了两个现场组——食物资源和甜蜜混音带。 我们先来看看食物资源。

这只是一个非常基本的字段组，有两个单独的字段——文本和 URL。 对于其中的每一项，我都选中了 Show in GraphQL 选项，以便它们出现在 GraphQL 中。 然后我还在现场组级别检查了该选项。 此外，我有一些条件逻辑来确定何时呈现这些帖子——如果帖子类别等于食物。 让我们看看甜蜜的混音带是什么样子的。

我们会看到这看起来与我们的食物资源非常相似，而且我们有几个不同的字段。 每个选项都选中了 Show in GraphQL 选项，此外还选中了字段组级别的选项。 我们可以看到 WP GraphQL 扩展为我们提供了一些我们可能不需要的不同设置。 此外，我们可以看到我们也根据帖子类别有条件地显示它。

那么现在，让我们来看看 WP GraphQL 以及它在工具方面给我们带来了什么。 如果我们打开 GraphQL 菜单，我们将进入图形化 IDE。 现在，这是一个交互式开发环境，允许您使用 WP GraphQL 创建查询。 我们可以指定我们想要，比如说，前 10 个带有类别的帖子，并在此处也包括我们的附加 ACF 字段。 当我们单击“运行”按钮时，我们会从我们的 WordPress 站点取回与该查询中的数据相匹配的实时数据。

如果需要，我们可以打开 Query Composer 窗口并可视化地组合查询的各个方面。 因此，如果您不确定特定 WordPress 对象上可能包含哪些特定字段或数据，这将是一个非常方便的工具。 您可以使用查询编辑器实时探索和运行这些查询。 现在，让我们通过打开 Faust 设置菜单来配置 Faust。 正如我在介绍中所说，Faust 实际上是一个由两部分组成的框架，由一个 WordPress 插件和您的前端代码库组成。

所以如果我们回到 WordPress 插件设置菜单，我们可以看到我们已经为前端站点 URL 设置了这个选项，它将指向我们的前端站点的地址。 在密钥选项的正下方，我们将继续并单击重新生成以生成可用于演示项目的唯一密钥。 从那里，让我们真正跳回 JavaScript 代码库，我们将运行此命令将示例环境变量文件复制到我们可以在我们的站点中使用的文件中。

一旦我们运行它，命令打开 .env.local 文件，我们将进行一些更改。 第一件事是将下一个公共 WordPress URL 选项替换为您本地站点的位置。 所以 ACF.WPEngine.local。 然后我们还将获取该密钥值并将其用于我们的 Faust 密钥。 确保我们也想取消注释，然后最后一个环境变量实际上只对测试和本地开发有用，这样您就可以解决在连接到本地开发环境时可能遇到的任何 SSL 问题。

从那里，我们将要运行 NPM Install 来安装我们项目的所有依赖项，然后一旦完成，我们就可以启动它并运行 NPM Run Dev 来启动我们的项目。 编译只需要一秒钟，但一旦完成，我们就可以在浏览器中打开 localhost:3000，我们应该可以看到我们的 Faust 站点正在运行。

渲染完成后，您可以看到 Faust 已经在为我们处理一些魔法。 如果我们查看右上角的菜单，我们可以看到它已经从我们在 WordPress 后端定义的菜单中提取页面和内容，如果我们跳回 WordPress 管理，我们可以查看此连接如何更详细地工作。

因为Faust插件知道我们前端URL的地址，所以它重写了很多链接，比如那些预览链接，这样当你在浏览器中打开它们时，它们在前端站点URL中打开，这样你'获得您的内容在前端的外观的真实实时预览。

现在，让我们更深入地研究 Faust JavaScript 项目的结构。 如果您熟悉在 Next.js 中工作，您可能已经使用页面的目录来创建实现路由的页面组件。 您仍然可以在 Faust 中执行此操作，但它建立在这个概念之上，提供了一个名为 WordPress 节点的包罗万象的路由，该路由允许您获取 WordPress 管理的任何 URI 并将其解析为特定的内容片段。

然后，我们获取有关该内容项的一些额外数据，并将其向下传递到我们的组件，以便我们可以将那一段单独的内容解析为 WP 模板文件夹中的特定模板。 这与模板层次结构概念和传统的 WordPress 主题以及许多命名约定非常相似。 比方说，frontpage.js是我们网站的首页，而page.js负责渲染页面内容类型的东西。 single.js 用于呈现单个帖子。

现在，让我们开始让我们的 frontpage.js 更动态一点。 好的 。 因此，首先，我们将继续打开我们的 front page.js 文件，给我们自己多一点工作空间。 所以如果我们查看这个文件的内容，我们可以看到主要有三个部分。 这是我们渲染的组件本身，一个附加到组件的查询属性，每次我们渲染组件时都会运行它，然后是我们可以在底部传递的一些变量。

如您所见，有两种真正主要的使用方法。 在组件内部使用 use query hook，或者它可以作为 props 传递到组件本身，你将在稍后的示例中看到。 因此，让我们跳回存储库并开始执行步骤 2.1 以更新我们的 frontpage.js 的查询。 所以我们将复制它，然后返回到图形 IDE 并在那里玩一会。 所以我们在剪贴板上的这个查询应该获取前 10 个帖子，并获取与每个帖子相关的几条数据。

因此，如果我们单击并运行它，我们会发现一切正常。 因此，我们要继续将其添加到我们的组件查询属性中。 所以我们会找到一个好的地方来做这件事，然后把它粘贴在那里，然后做一些重新格式化。 所以它所做的就是将查询的这个单独部分添加到该查询本身。 所以我们仍然需要使该查询的结果对我们组件的其余部分可用，因此我们将继续添加这一行，该行仅将发布结果提取到我们可以使用的变量中。

现在，使这个主页动态化的下一步实际上是创建一个组件来呈现这些帖子摘录。 因此，我们将这样做并在 components 文件夹中创建几个文件，我会在这里提到 - 我将继续并在帖子摘录文件夹中创建一个 postexcerpt.js，然后我'我实际上只是复制了作为此 Faust.js 入门项目一部分的现有组件的结构。 你真的可以在这里做任何你想做的事，我只是遵循这个框架，因为它已经作为本入门的一部分为我安排好了。

因此，一旦我们拥有所有这三个文件，我们将开始向它们添加一些内容以呈现这些帖子。 因此，我们要做的第一件事就是将一些内容放入我们的帖子摘录组件中。 所以我们只需从我们的存储库中复制并粘贴它，我们可以看到我们正在导入那个 module.css 文件。 我们有一个名为 post excerpt 的函数，它是我们的组件，它品尝一个 prop 是帖子，然后我们呈现一个部分，有一个链接将直接转到该帖子 URI，呈现标题。 然后在那里，我们也有我们正在渲染的类别图块，然后在我们的 HTML 中使用 dangerously set 来设置帖子摘录的 HTML 内容。

现在，一旦一切都很好并保存下来，我们将把它保存下来，但我们也会进入这里并将这个额外的作用域样式添加到我们的组件中，为我们的类别设置这些 span 标签的样式，然后我们将在 index.js 文件中做一些导入导出，将其从默认导出导出到命名导出，我们将保存所有这些内容。 然后最后一步使它可用于其他事情是在我们的组件文件夹的 index.js 文件中添加一个导出行。 现在我们已经完成了，如果我们回到主页 frontpage.js，我们应该能够向现有的导入语句添加一个额外的导入以使用我们的文章摘录。

现在，我们要找到一个地方来实现它，如果我们下来查看我们的主要元素，就会看到我们在英雄下方有一些东西——我们要做的就是复制并粘贴存储库中的一些代码，并使用我们的帖子摘录覆盖 main 中的内容。 我们将做一些重新格式化以消除周围的一些东西，但你可以看到我们正在做的是在那个容器内部，我们将映射我们作为我们查询的结果然后返回一个帖子摘录组件，我们在其中传递帖子并给它一个键。

然后，如果我们继续保存所有这些并在浏览器中呈现并刷新，我们应该会看到我们有一个很棒的动态主页。 是的，这些标题中的每一个都有一个可点击的链接，各个类别的图块也是如此。 如果我们点击，我们可以看到，通过 Faust 中已经存在的模板的好处，我们所有的帖子内容都已经呈现，尽管我们缺少一些我们使用 ACF 创建的资源组。 因此，如果我们点击进入第二篇文章，我们可以看到其中一篇的渲染效果和所有预制的类别链接一样好——我们只是使用这些类别 URI 来借助 Faust 来呈现该类别 JS 模板.

好的，现在我们有了一个动态主页，让我们继续让那些 ACF 字段呈现在我们的 single.js 模板上。 因此，继续清理我们的代码编辑器，然后我们可以打开 single.js 文件并查看其中的内容。 我们知道，在顶层，我们有这个组件函数，我们正在导出它实际上采用 props，并且 component.query 属性有一个动态 GraphQL 查询，它正在读取我们从种子查询返回的一些变量。

我们最终想要做的是在我们的帖子内容底部显示一些不同的帖子资源。 所以我回到存储库并向下滚动到步骤 3.1，我们在其中更新单个帖子查询，我们将查看它，因为它开始引入我们在较早的步骤。 如果我接受该查询并将其复制并粘贴到图形中，我将继续为帖子硬编码数据库 ID，并删除一些我们不需要的不同内容，例如 As Preview 和其他片段.

如果我继续运行它，我们将看到我取回了一些真正包含我所期望的数据。 内容，我找回了作者，重要的是，我找回了那些领域小组及其数据。 所以我将继续复制该查询并返回到 single.js。 从那里，我真的只是用我从剪贴板中得到的内容替换查​​询的那一部分。 我们可以继续并保存它。 如果你愿意，你可以重新格式化它，但这与空白无关，所以我认为在大多数情况下看起来还不错。

因此，从那里开始，我们将要执行与上一步相同的操作，我们已将其作为查询的一部分。 现在，我们要确保我们让这些变量在我们的组件内部可用。 因此，我们将把这些添加到该结构化声明中，此外，由于我们的帖子有几个不同的类别，我们想创建一些布尔值来帮助我们确定是否应该显示食物资源或甜蜜的混音带。 因为正如您在那里看到的那样，无论我们返回的是什么，如果没有找到甜美的混音带字段，那么返回的都是空的。 所以我想在那里做一些条件检查，所以我将这两行代码添加到我们的文件中。

这基本上是为我们创建了一些布尔变量，我们可以在下面使用这些变量来有条件地渲染模板。 在这件事上，我们正在查看每个类别的节点，然后基本上过滤它们以确定它们是否包含食物或音乐，然后检查长度。 可能有很多方法可以实现这种类型的布尔变量，所以如果您有更简洁的方法，请随意更改它，但就我们这里的目的而言，我认为这会很好地工作。

现在，下一步是我们实际上想要，就像在上一步中一样，创建一些额外的组件。 因此，我将继续在我的组件文件中创建一个食物资源组件。 所以我将创建一个文件夹，然后在其中创建一个 food resources.js 文件，与此同时，我将创建一个 index.js 文件和一个 CSS 模块文件。 现在 SCSS 模块文件真的很有用，因为它允许我们将样式范围限定到特定组件。 所以它感觉像是时髦的语法，但最终它是一个非常干净的结果，因为我们不必编写一堆类和东西。

因此，我将开始将存储库中的组件代码直接复制并粘贴到这些文件中。 我们可以看到我们有一个食物资源函数，它带有两个道具食谱名称和食谱链接，然后我们用墨西哥卷饼表情符号将它们呈现在我们美好的年龄之下。 我们还将一些 SCC 文件样式复制并粘贴到这个特定文件夹中，然后我们将确保从组件文件夹 index.js 中导出它。 就像在前面的示例中一样，我们希望继续将其导出到组件文件夹的 index.js 中，这样我们就可以拥有一个非常好的导入组，就像您直接从该组件中看到的那样这些不同文件中其他地方的文件夹。

所以一旦我们添加了它，我们就会把注意力转向音乐资源组件，我们会做同样的事情。 我们将继续创建相同的文件结构。 所以音乐资源文件夹和里面的 musicresources.js 文件。 然后我们将继续创建一个 index.js 文件来导出它，然后还有我们的 musicresources.module.scss 文件以及那些范围样式。

所以一旦我们得到了所有这些东西，我们就会做我们对食物资源所做的同样的事情，只是从存储库中复制和粘贴一些代码。 我们可以看到这个组件看起来几乎一模一样。 我们有音乐资源。 这实际上有三个道具而不是两个，但我们在这个字段组上有三个字段，但 styles.component 约定是相同的。 我们只是做了一些稍微不同的渲染，因为我们有不同的内容。

因此，从那里，我们还将添加我们的 SCSS 代码，并确保从组件文件夹 index.js 中导出它，然后将它导入到我们这里的文件夹中，我想我真的做到了——让我们快速重命名它并只要确保我们所有的命名看起来都不错，这样我们的 index.js 和组件就能找到我们的音乐资源，所有这些东西都很棒。 所以现在，我们将继续并关闭所有这些无关的选项卡，因为我们已准备好在我们的 single.js 文件中实际实现这些组件。

所以要做到这一点，我们只需将这两个组件添加到我们现有的 import 语句中，它已经自动识别它们，我们会找到一个好的地方来做这件事。 所以我们在这里得到了这个内容包装器组件。 所以现在，我们正在传递内容，但实际上也可以选择接受孩子。 所以我们可以传入内容，然后也可以将一些子组件直接传递给内容包装器，这样它就会显示在我们已经拥有的漂亮的水平空间中，并且所有内容都对齐。

所以这就是我们要做的，然后我们将复制并粘贴该代码并重新格式化它并讨论这个特定示例中发生的事情。 因此，就在该内容包装器组件内部，我们使用这些 is food 和 is music 布尔变量来有条件地呈现相应的资源组件。 所以如果 food 是真的并且这篇文章属于食物类别，我们将渲染它。 如果是音乐，我们也会做同样的事情。 在那里，您可以看到我们正在传递渲染它所需的所有不同道具。

如果我们返回并刷新我们的 single.js 模板页面之一，我们可以看到我们的食物资源正在按照我们期望的方式呈现，并且如果我们返回 WP Admin 或我们的家，该链接将正常工作页。 如果我们找到一个和食物类别或音乐，我们可以打开 Kinfolk Synth DIY 并查看我们的音乐资源组件是什么样的，所有这些看起来都很棒。 如果我们找到一个实际上属于这两个类别的组件，我们可以看到它实际上在底部以我们期望的方式呈现了这两个组件。

好的。 所以现在我们已经按照我们想要的方式得到了我们的网站，让我们继续讨论如何部署这个网站。 现在，我已经为我们创建了 GitHub 存储库的一部分，实际上，我已经在完成分支中创建了一个完全独立的已部署分支。 所以运行 Git check out 已经完成，我们会为您提供的。 您也可以将该分支直接部署到 Atlas，这是 WP Engine 的无头 WordPress 托管解决方案。

这为您提供了 WordPress 安装和 Node.js 容器，您只需单击 Atlas 登录页面上的此按钮即可注册免费沙箱帐户。 带你去一个非常快的论坛，正如你所看到的，价格为零。 您可能仍然需要存入我们仅用于防止欺诈目的的信用卡，但您可以拥有一个免费帐户来使用其中的任何一个来测试它，以随心所欲地学习。 因此，我将继续并打开 WP Engine 仪表板以开始将此站点部署到 Atlas。

我实际上要做的第一件事是打开我的站点列表，然后我将打开我的生产 WordPress 站点。 所以实际上，您在这里看到的这个 ACF 无头站点是你们在本地使用的 zip 文件的父站点，我将在新窗口中打开 WP Admin。 所以我使用 WP export 制作了一个 zip，这实际上是我要用于我的生产部署的东西。

从那里，我将单击进入 Atlas 选项卡，然后单击创建应用程序。 我看到了这个选项。 我将选择 Pull From Repo，然后单击 Continue。 如果我还没有通过 GitHub 进行身份验证，您可以在此处进行身份验证，但由于我已经通过身份验证，所以我可以继续并选择我的存储库。 因此，我们将继续并选择我们用于此项目的存储库，单击“继续”，然后我将在美国中部部署我的应用程序。

从这里，它允许我选择一个分支，就像我说的，我将使用 Finished。 如果您使用的是 monorepo，也有一些选项，我们不使用，我将保留选中我的 WordPress 安装，并搜索我的 ACF 无头站点。 现在，在这里，实际上，我想要从我的文件项目中复制两个环境变量，而不是使用 .env 文件。

所以第一个是下一个公共 WordPress URL。 这些是我们在本地项目中设置的相同环境变量，我将在其中复制到我的生产 WordPress 安装的链接。 然后我将添加另一个环境变量，这个变量将用于我们的 Faust 密钥。 因此，我将继续并从 Faust 设置菜单中复制它，然后将其弹出并将其设置为 Faust Secret Key。

完成后，我可以继续并单击“创建应用程序”，Atlas 将开始构建和部署我的应用程序的过程。 在 Atlas 构建过程中，它将运行 NPM install，以及您正在使用的任何框架的 NPM 构建命令。 然后，一旦构建了所有这些代码，它就会为您将该节点容器部署到我们的网络中。 因此，一旦所有这些都旋转了一秒钟，我们应该会收到一条成功消息，然后我们可以单击为我们提供的 URL，并实际查看我们的网站。

所以我们会收到成功消息，然后我们可以继续在另一个选项卡中打开此 URL。 在那里我们可以看到我们的网站看起来和在本地完全一样，它正在提取所有正确的数据、所有正确的图像，甚至吸收了我们所有的 ACF 内容。 我们的许多帖子看起来真的很棒，而且我们在 Atlas 上的表现非常出色——我实际上在这里使用了一些非常大的图像，所以如果你发现速度有些慢，那肯定是我的选择造成的。

Atlas 平台充满了现代 JavaScript 开发人员会喜欢的功能。 遗憾的是，本演示文稿中没有足够的时间来详细介绍它们。

但是 Atlas 在将无头生态系统的前端和后端部分的重要细节整合到一个方便的仪表板中确实做得非常好，您可以在其中查看单独的构建日志和构建输出，检查部署，您使用的环境变量一个特定的构建，以及访问您可以启用的其他设置或功能，例如预览环境，您可以在其中为针对 GitHub 存储库创建的每个 PR 创建一个额外的环境，或创建环境 webhooks 以重建特定部分当您对 WordPress 进行更改时，您的应用程序或 CDN。

所有这些都可以通过 Atlas 平台实现，它确实降低了开始使用无头 WordPress 进行构建的门槛。

哇。 恭喜，就像我说的那样，25 分钟内要讲的内容很多。 请在演示后继续练习，如果您对开始使用演示资源有任何疑问，请联系我。 如果您有兴趣了解有关 headless 的更多信息但需要空间来学习，请注册一个免费的 Atlas Sandbox 帐户。 除了像我们今天所做的那样部署您自己的代码存储库之外，您还可以开始使用我们的一些预制蓝图，这些蓝图是一键式项目堆栈，可以帮助您了解无头项目完成后的样子。

We have a basic scaffold example, a portfolio example with some custom post types, and a new ecommerce example that integrates with big commerce through some of their APIs. Our team and developer relations is really passionate about meeting you wherever you are on your journey towards learning headless. So check out our headless developer's roadmap for a step-by-step series of articles and videos that build on one another to help backfill some of the concepts we've just glossed over today.

The headless ecosystem is young, but it's growing quickly. If you need help on a project, want to talk to some people using headless WordPress in production, or just want to hang out where the magic happens, join the roughly 1,000 other developers in our Discord focused on headless, where we chat, help each other with projects, and help get you moving. Thank you so much for coming to this talk. I look forward to collaborating with you on all of your future headless projects.