如何在Gatsby.js应用程序中使用WordPress内容

作为 Write for DOnations 计划的一部分，作者选择了 Internet Archive 来接收捐赠。

介绍

WordPress 是一个流行的 CMS（C 内容 M 管理 S 系统）。 它允许您在可视化编辑器中编辑帖子，而不是使用原始 HTML 手动编码您的网站页面，并提供其他功能，例如协作编辑和修订历史记录。

传统上，WordPress 既充当网站的后端，又充当网站的前端。 帖子在管理员编辑器中进行编辑，当访问者通过 PHP 主题访问站点时，后端会动态生成站点的每个公共页面。

WordPress 中的一个新范例是仅将它用于站点的内容部分（也称为运行 headless），并使用 Gatsby 静态生成前端。 通过同时利用用户界面 (UI) 并将内容与用户界面 (UI) 分离，您可以保留 WordPress 的内容编辑器和协作功能，同时还可以享受 Gatsby 更快的加载时间和基于 React 的 UI 生态系统。

在本教程中，您将配置 WordPress 以与 Gatsby 对话，基于入门模板设置一个新的 Gatsby 项目，在 Gatsby 配置中定义与 WordPress 的连接，然后将它们放在一起以基于实时发布的帖子静态生成一些页面在您的 WordPress 安装中。

先决条件

在开始阅读本指南之前，您需要做以下几件事：

• 具有足够资源来支持构建和服务您的站点的环境。 如果您使用同一台服务器来托管 WordPress 并构建您的 Gatsby 站点，则建议的最小 RAM 量为 2GB。 如果您想使用 DigitalOcean Droplet，请查看我们的 如何从 DigitalOcean 控制面板文章 创建 Droplet。
• 可以从运行 Gatsby 的位置访问的有效 WordPress 安装。 如果您是 WordPress 的新手，您可能想先从 什么是 WordPress 的指南开始，但对于一般设置，还有多个环境的指南，例如 Docker . 本教程已按照 How To Install WordPress on Ubuntu 20.04 with a LAMP Stack 设置的 LAMP 堆栈进行了测试。
• Node.js，安装在本地，用于运行 Gatsby 和构建您的站点。 安装过程因操作系统而异，但有在Ubuntu上安装Node.js和在Mac上安装Node.js的指南，你总是可以在[X204X上找到最新版本]NodeJS官方下载页面。
• Gatsby CLI 工具，安装在本地。 关于如何安装它以及学习 Gatsby 的一些基础知识，您可以按照 如何设置您的第一个 Gatsby 网站 教程的 Step 1。
• 对 JavaScript 有一定的了解，以便在 Gatsby 中工作。 JavaScript 有很多深度，但一个很好的起点是我们的 如何在 JavaScript 中编码 系列。 此外，了解一些 HTML 知识会有所帮助，例如 理解 HTML 元素 ，如果您想自定义帖子的 UI 超出本教程的范围，了解一些知识也会有所帮助React 和 JSX。

本教程在 WordPress v5.7.1、Gatsby v3.3.0 和 Node.js v14.17.0 上进行了测试。 此外，WordPress 设置在 Windows 10 和 Ubuntu 20.04 上使用 Apache v2.4.41 和 PHP v7.4.3 进行了测试。

第 1 步 — 安装和配置所需的 WordPress 插件

在第一步中，您将通过安装一些插件和调整设置让 WordPress 能够与 Gatsby 对话。 您还将验证您的本地或托管 WordPress 实例是否支持这些更改，并记录有关您的特定设置的一些详细信息，以供以后需要。

首先通过在浏览器中导航到 https://your_domain_name/wp-admin 并输入您的凭据来登录 WordPress 实例的管理仪表板。 然后点击左侧边栏中的Plugins进入插件页面。 接下来，通过单击页面顶部或同一侧边栏中的 Add New 导航到插件安装页面。 如果您的 WordPress 安装使用标准路径，您还可以在 https://your_domain/wp-admin/plugin-install.php 找到此页面。 这将带您进入插件页面，如下图所示：

需要的两个插件如下，依次安装：

• WPGraphQL：这使 WordPress 数据能够通过 GraphQL 标准 查询，作为 WordPress 标准 REST 端点的替代方案。 这很重要，因为 Gatsby 默认使用 GraphQL。 本教程将使用此插件的 v1.3.5。 有关此插件的更多信息，请查看 WPGraphQL GitHub 存储库 或 WordPress WPGraphQL 插件目录。

• WPGatsby：此插件使 WordPress 与 Gatsby 保持同步，启用丰富的预览，并在同步系统中公开挂钩。 本教程将使用此插件的 v1.0.8。 有关此插件的更多信息，请查看 WPGatsby GitHub 存储库 或 WordPress WPGatsby 插件目录 。

安装并激活这两个插件，方法是搜索它们，然后按相关的 Install Now 按钮。 安装后，选择 Activate 按钮。 安装并激活两个插件后，您将在 WordPress 管理仪表板中看到一些新的设置面板。 下图显示了这些新设置面板。

要验证 GraphQL 连接是否可用于连接到 Gatsby，请打开管理侧边栏中 GraphQL 子部分下的 Settings 面板。

请特别注意 GraphQL 端点。 您可以在文本输入框下方标记为 GraphQL Endpoint 的部分中找到它。 它也在屏幕截图中以黄色突出显示。 您稍后将需要它，因此为了节省一些时间，您可以将其复制到剪贴板和/或将其粘贴到临时文本文档中。

为了使用 WPGraphQL 获得最佳结果，建议使用 plain 以外的 WordPress 永久链接 设置，特别是如果这是一个新的 WordPress 安装，其中更改 URL 结构不会影响实时网站。 要导航到您的永久链接设置，请单击 WordPress 管理仪表板左侧栏中的 Settings，然后单击该展开部分中的 Permalinks。 在永久链接设置页面中，将您的设置更改为普通以外的任何选项，然后按 保存更改 以更新您的站点。

将您的永久链接设置为非普通链接会带来一些特定的技术要求； 使用 Apache Web 服务器，您需要启用 mod_rewrite 模块并将 AllowOverride 指令设置为 all。 这些将使 WordPress 能够动态路由新路径。 Ubuntu 20.04 教程 上的 WordPress 的第 3 步涵盖了这一点，并附有分步说明。 如果您运行 Let's Encrypt 为您的站点提供 SSL 证书，如 如何在 Ubuntu 20.04 上使用 Let's Encrypt 教程 保护 Apache，您将必须完成这些步骤用于 /etc/apache2/sites-available/your_domain-le-ssl.conf 处的新虚拟主机。

现在您已经配置了 GraphQL 端点，您将测试此连接。 您可以立即这样做； 还不需要安装 Gatsby。 您可以将 GraphiQL IDE 用于可视化查询构建器工具（可通过侧边栏访问），或者您甚至可以使用您选择的最喜欢的网络请求工具直接查询端点。

如果您更喜欢命令行并安装了 cURL，则可以使用以下命令检索所有帖子标题：

curl --location --request POST 'https://your_domain/graphql' \
--header 'Content-Type: application/json' \
--data-raw '{
    "query": "query { posts { nodes { title } } }"
}'

此命令向您的 GraphQL 端点发出请求，请求包含您的 WordPress 帖子的 JSON 响应，但仅包含其标题。 使用 GraphQL，这也称为 查询 ； 教程理解 GraphQL 中的查询 更深入地解释了它们。

对您的查询的响应 JSON 将是这样的：

Output{"data":{"posts":{"nodes":[{"title":"Hello world!"}]}},"extensions":{"debug":[{"type":"DEBUG_LOGS_INACTIVE","message":"GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."}]}}

现在您已成功安装并配置了与 Gatsby 通信所需的 WordPress 插件，您可以继续设置新的 Gatsby 项目。

第 2 步 — 建立一个新的 Gatsby 项目

在此步骤中，您将基于专门为从 WordPress 获取数据而设计的入门模板设置一个新的 Gatsby 项目。 它将需要使用 Gatsby CLI 来下载和安装 starter 及其依赖项。

为了加快您的开发过程并减少所需的设置量，您将从使用 Gatsby CLI 和 Gatsby WordPress Blog Starter 模板开始。

导航到将包含您的 Gatsby 项目的本地父目录，然后运行以下命令以下载 Gatsby CLI 并预安装开始构建站点所需的大部分内容：

gatsby new  my-wordpress-gatsby-site https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

您可以将 my-wordpress-gatsby-site 替换为您希望本地 Gatsby 文件的目录名称。

Gatsby 需要一段时间才能下载并安装所有必要的依赖项和资产。 完成后，您将收到与此类似的消息：

Output...
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd my-wordpress-gatsby-site
  gatsby develop

通常对于 Gatsby 站点，您可以在此处手动编辑 gatsby-config.js 文件，其中包含有关您的站点的详细信息，称为 元数据 。 但是，除了从 WordPress 中提取帖子外，此启动器还会自动为您提取元数据； 无需手动编码网站标题或描述。

搭建了一个新的 Gatsby 项目后，您现在可以修改其配置以告诉它从 WordPress 中提取数据。

第 3 步 — 配置 Gatsby 以使用 WordPress 数据

现在您有一个工作的 Gatsby 项目，下一步是配置它以从 WordPress 中提取数据。 您将通过编辑 Gatsby 主配置文件并使用 gatsby-source-wordpress 插件来完成此操作。

感谢您使用的入门模板，gatsby-source-wordpress 插件将作为依赖项安装，并且在 Gatsby 配置文件中有一个设置条目； 你只需要稍微调整一下。

移动到在上一步中创建的本地 Gatsby 目录：

cd my-wordpress-gatsby-site

然后，在您选择的文本编辑器中打开名为 ./gatsby-config.js 的文件。 这是所有 Gatsby 项目的 主配置文件 。

在配置文件中，您将在 plugins 数组中找到 gatsby-source-wordpress 的现有设置条目。 您现在可以使用您从上一步复制的特定 GraphQL 端点，并将默认演示端点 https://wpgatsbydemo.wpengine.com/graphql 替换为您的值，如以下代码中突出显示的那样：

盖茨比-config.js

module.exports = {
    plugins: [
        {
            resolve: `gatsby-source-wordpress`,
            options: {
                url:
                    process.env.WPGRAPHQL_URL ||
                    `https://your_domain/graphql`,
            },
        },
        ...
    ],
    ...
}

保存并关闭此文件，以便站点的未来构建将使用更新的值。

注：url是唯一需要的设置选项，但有很多可用的； 查看 Gatsby GitHub 存储库 了解更多信息。 例如，有 选项用于启用调试输出 、 连接到 HTACCESS、受密码保护的站点 ，以及与性能相关的选项，例如 schema.requestConcurrency，如果您的 WordPress 站点在资源有限的服务器上运行，这一点尤其重要。

在继续自定义 Gatsby 如何使用您的 WordPress 数据构建页面之前，请按原样构建和预览您的网站，以确保一切正常。 您可以通过运行以下命令来执行此操作：

npm run develop

或者，如果您使用的是 yarn 包管理器：

yarn develop

警告： 如果您在这一步收到错误，尤其是有关缺少依赖项或 can't resolve '...' in '...\.cache 的错误，则可能是依赖项安装过程的一部分失败。 这是 Gatsby 项目中的一个已知问题。 尝试再次运行 npm i（如果使用 yarn，则运行 yarn install）来检查并安装任何缺失的依赖项。 如果这无法解决问题，请通过删除 node_modules 文件夹、删除 package-lock.json 或 yarn.lock，然后运行 npm i 或 yarn install。

此命令将运行 gatsby develop 进程，该进程将从 WordPress 中提取数据，将其与启动模板的预构建 UI 文件结合起来，并启动本地开发服务器，以便您可以查看实际生成的网站的预览在浏览器中。 此命令还以支持 热重载 的模式运行 Gatsby，因此，如果您对本地文件进行编辑，您将立即在 Web 浏览器中看到这些更改。

在浏览器中导航到 localhost:8000，您将找到包含 WordPress 内容的 Gatsby 站点：

随着您的 Gatsby 项目现在从 WordPress 中提取数据，下一步将是自定义实际的模板文件，以便您可以使您的 Gatsby 网站看起来和按照您的意愿行事。

第 4 步 — 自定义 Starter 模板文件

Gatsby WordPress 入门模板提供了许多默认功能，但在此步骤中，您将探索如何自定义模板文件以使项目在形式和功能上都成为您自己的。 通过编辑一些 Gatsby 源文件，您将在您的 Gatsby 站点中引入一段新的 WordPress 内容（文章摘录）并使用 CSS 对其进行样式设置。

对于大多数 Gatsby 网站（包括您的入门模板），在进行自定义时需要注意一些关键文件和文件夹：

• ./gatsby-node.js：这可以被认为是静态站点生成过程的中心。 它具有用于查询 WordPress 以获取所有内容的代码，然后将其通过模板文件传递以生成静态输出。 如果您想修改网站上的内容，这是主要的入口点。 在 WordPress 开发方面，这类似于使用 The Loop 和类似概念。
• ./src/templates：这包含单独的模板文件，每个模板文件都应该包含并导出一个 React 组件 负责渲染传入的内容。 如果您想更改内容的外观、集成第三方 UI 库或围绕内容构建骨架，这通常是这样做的地方。 在 WordPress 开发方面，这些类似于 Template Files。
• ./src/components：通常，此文件夹中的每个文件都是一个单一的 React 组件，专用于特定的 UI 任务，并且旨在被拉入模板文件中。 将这些视为 UI 构建块，而不是模板。 如果您想要在多个模板文件之间共享一个 UI 元素，那么这是放置它并避免一遍又一遍地复制和粘贴相同代码的好地方。 这方面的一些例子是菜单、作者简介显示、页眉和页脚元素等。 在 WordPress 开发方面，这些类似于 Template Partials。
• ./src/css：这包含跨站点共享的 CSS 文件，与内联样式或流行的 css-in-js 解决方案相反，例如 [ X157X]样式组件。 在本教程中，使用您的特定入门模板，此文件夹为您的新站点提供大部分样式。 在 WordPress 开发方面，这相当于 style.css，或者主题可以通过 WordPress 的 enqueue 系统注入到页面中的任意数量的样式表。

有关如何编辑现有模板文件的示例，请在文本编辑器中打开 ./src/templates/blog-post.js。

在 WordPress 中，每个帖子都有一个特殊的文本值，称为 摘录，它是帖子的简短描述性摘要。 默认情况下，这个 Gatsby 模板文件提取 WordPress 摘录，但仅将其用于 SEO 目的，将其放在 <meta name="description" /> 标记中。 您可以修改博客文章模板文件以直观地包含文章摘录，如下所示，将突出显示的代码添加到您的文件中：

/src/templates/blog-post.js

const BlogPostTemplate = ({ data: { previous, next, post } }) => {
    ...
    return (
        <Layout>
            ...
            <h1 itemProp="headline">{parse(post.title)}</h1>
      
            <p>{post.date}</p>

            {/* Checking for and adding the post excerpt if the current post has one*/}
            {post.excerpt && (
                <div className="post-excerpt">{parse(post.excerpt)}</div>
            )}

      {/* if we have a featured image for this post let's display it */}
        {featuredImage?.fluid && (
          <Image
            fluid={featuredImage.fluid}
              alt={featuredImage.alt}
              style={{ marginBottom: 50 }}
          />
        )}
      ...
        </Layout>
    )
}

在这段代码中，您正在检查帖子是否有摘录（很重要，因为它在 WordPress 中不是强制性的），如果有，则在 <div> 元素中显示摘录的文本内容。 parse() 函数来自 html-react-parser，并在此处用于确保将包含摘录的 <p> 标记解析为 HTML 而不是纯文本，因此您可以直接回显内容。 另一种方法是使用 dangerouslySetInnerHTML 和 <div className="post-excerpt" dangerouslySetInnerHTML=模板:Html: post.excerpt ></div>。

保存并关闭 blog-post.js 文件。

由于摘录是帖子的摘要，因此如果您在视觉上将其与帖子正文分开，在页面顶部突出显示它并使其易于查找，它可能会对您网站的访问者有所帮助。 您可以通过在 ./src/css/style.css 编辑主共享 CSS 文件来完成此操作：

/src/css/style.css

.post-list-item header {
  margin-bottom: var(--spacing-4);
}

/* CSS targeting your new post excerpt element */
.post-excerpt {
  box-shadow: 0px 1px 9px 1px rgb(0 0 0 / 50%);
  padding: 6px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.post-excerpt p {
  margin-bottom: 0px;
}

在您的 CSS 中，您现在已经使用 box-shadow 在摘录容器周围添加阴影效果，使其与帖子的实际正文形成对比，并添加了填充、圆边以及自身和相邻元素之间的间距. 此外，您从摘录的文本中删除了默认的底部边距，因为间距现在由容器 .post-excerpt 元素提供。

保存 style.css 文件。 要对此进行测试，请在 WordPress 中添加一个摘录以利用这一新的视觉功能。 在 WordPress 管理视图的侧边栏中，导航到 Posts 选项卡，然后选择示例 Hello world! 帖子。 这将带您进入 WordPress 帖子编辑器视图。 在较新的基于块的编辑器中，摘录字段显示在右侧边栏中的 Post 选项卡下，靠近底部。 在旧版编辑器中，摘录字段的位置是可自定义的，因此它可能会根据您的主题和自定义设置出现在不同的位置。

添加摘录，然后选择屏幕顶部的 Update 按钮。 然后，访问您的 Gatsby 站点 localhost:8000，然后选择 Hello world! 博客文章。 你会发现你写的摘录呈现在页面上：

注意： 如果您正在寻找不需要任何额外编码或配置的预构建主题，类似于 WordPress 主题的工作方式，有越来越多的 官方和社区主题用于使用 WordPress 和 Gatsby。

您刚刚将来自 WordPress 的帖子摘录嵌入并设置样式到自定义 Gatsby 静态站点中。 这使用了已配置供您的入门模板使用的数据。 下一步将探索如何通过 GraphQL 引入新数据并将它们集成到您的 Gatsby 站点中。

第 5 步 — 在 Gatsby 中使用带有自定义模板的 WordPress 数据

在前面的步骤中，您编辑了一个现有模板并使用了一些标准的 WordPress 数据（帖子标题和帖子内容）来使用 Gatsby 的静态输出呈现您的博客帖子。 对于许多站点而言，仅此一项可能就足够了。 但是，为了展示将 UI 与 WordPress 分离如何为您提供更大的灵活性，在此步骤中，您将探索如何在 Gatsby 中添加对特殊视频帖子类型的支持，超越现有的博客帖子模板。

在这种情况下，您将添加对每个展示单个视频的帖子的支持，这些视频来自 YouTube。 您将这样做，以便您或您的内容合作者可以将 YouTube URL 复制并粘贴到 WordPress 帖子编辑器中，并且 Gatsby 网站本身将在自定义的 YouTube 嵌入小部件中显示视频。

对于帖子模板，在 /src/templates 下创建一个新文件，并将其命名为 video-post.js。 在构建将要生成的页面的 UI 之前，您可以编写一个 GraphQL 查询来为其检索数据。 在 Gatsby 中，这称为 Page Query，并使用 graphql 标签。

将以下代码添加到 video-post.js 文件中：

/src/templates/video-post.js

import React from "react"
import { graphql } from "gatsby"

export const pageQuery = graphql`
  query VideoPostById(
    # these variables are passed in via createPage.pageContext in gatsby-node.js
    $id: String!
  ) {
    # selecting the current post by id
    post: wpPost(id: { eq: $id }) {
      id
      content
      title
      date(formatString: "MMMM DD, YYYY")
    }
  }
`

在此代码段中，您使用帖子 ID 来查询属于该确切帖子的特定值，例如实际帖子内容、标题和日期。

接下来，您可以添加返回 JSX 的实际 React 组件，该组件将呈现为网页。 一个好的起点是从现有的 blog-post.js 模板文件中复制大部分结构并添加以下突出显示的行：

/src/templates/video-post.js

import React from "react"
import { graphql } from "gatsby"
import parse from "html-react-parser"

import Bio from "../components/bio"
import Layout from "../components/layout"
import Seo from "../components/seo"

const VideoPostTemplate = ({ data: { post } }) => {
  return (
    <Layout>
      <Seo title={post.title} description={post.excerpt} />

      <article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <h1 itemProp="headline">{parse(post.title)}</h1>
          <p>{post.date}</p>
        </header>

        <footer>
          <Bio />
        </footer>
      </article>
    </Layout>
  )
}

export default VideoPostTemplate;

export const pageQuery = graphql`
  query VideoPostById(
    # these variables are passed in via createPage.pageContext in gatsby-node.js
    $id: String!
  ) {
    # selecting the current post by id
    post: wpPost(id: { eq: $id }) {
      id
      content
      title
      date(formatString: "MMMM DD, YYYY")
    }
  }
`

除了创建 React 组件之外，您还使用 export default 来确保该组件是从文件中导出的默认项。 这很重要，因为 Gatsby 稍后在针对来自 WordPress 的数据编译模板时如何导入文件。

现在，您可以向 React 组件添加一些逻辑，以检查帖子正文中是否嵌入了原始 YouTube URL：

/src/templates/video-post.js

...

const VideoPostTemplate = ({ data: { post } }) => {
  // RegEx to find YouTube IDs
  const youtubeIdPattern = /watch\?v=([a-z_0-9-]+)|youtu\.be\/([a-z_0-9-]+)|youtube\.com\/embed\/([a-z_0-9-]+)/i;

  const matches = youtubeIdPattern.exec(post.content);
  let videoId;

  if (matches) {
    // Use first available match
    videoId = matches[1] || matches[2] || matches[3];
  }

  return (
    <Layout>
      <Seo title={post.title} description={post.excerpt} />

      <article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <h1 itemProp="headline">{parse(post.title)}</h1>
          <p>{post.date}</p>
        </header>

        <footer>
          <Bio />
        </footer>
      </article>
    </Layout>
  )
}
...

在此代码中，youtubeIdPattern 是 正则表达式（或 RegEx），这是您使用 youtubeIdPattern.exec(post.content) 对帖子正文执行的搜索模式，以尝试查找包含的任何 YouTube ID。 如果找到匹配项，则将变量 videoId 设置为第一个匹配项。

最后，您可以添加基于您提取的 videoId 呈现视频的 JSX：

/src/templates/video-post.js

...

  return (
    <Layout>
      <Seo title={post.title} description={post.excerpt} />

      <article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <h1 itemProp="headline">{parse(post.title)}</h1>
          <p>{post.date}</p>
        </header>

        {videoId ? (
          <div className="video-embed">
            <iframe width="512" height="288" src={`https://www.youtube-nocookie.com/embed/${videoId}?controls=0&autoplay=1`} title={post.title} frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
        ) : (
          <div className="no-video-found">
            <p>Sorry, could not find a video in this post!</p>
          </div>
        )}

        <hr />

        <footer>
          <Bio />
        </footer>
      </article>
    </Layout>
  )
}
...

如果找到 videoId，您的代码会返回一个自定义的、增强隐私的 YouTube 嵌入，通过设置为自动播放的 iframe 提供。 否则，它会返回未找到视频的消息。 它还在视频嵌入和帖子的页脚之间添加了一个水平中断。

现在您的组件模板文件已构建，您将告诉 Gatsby 对在 WordPress 中设置为视频类型的帖子使用新模板，而不是使用常规博客帖子模板。

确保将更改保存在 video-post.js 中，然后在文本编辑器中打开 gatsby-node.js。

首先，修改 getPosts() 函数，starter 将其用作主要 GraphQL 查询到 WordPress 后端的帖子。 您将修改查询以提取给定帖子所属的 postFormats：

盖茨比-node.js

...
async function getPosts({ graphql, reporter }) {
  const graphqlResult = await graphql(/* GraphQL */ `
    query WpPosts {
      # Query all WordPress blog posts sorted by date
      allWpPost(sort: { fields: [date], order: DESC }) {
        edges {
          previous {
            id
          }

          ...

          post: node {
            id
            uri
            postFormats {
              formats: nodes {
                name
              }
            }
          }

          next {
            id
          }
        }
      }
    }
  `)

  ...

  return graphqlResult.data.allWpPost.edges
}

接下来，您需要实现分离视频帖子并将它们发送到其独特的模板文件进行渲染的逻辑。 为此，您可以挂接到 启动器中现有的 createIndividualBlogPostPages() 函数 。

您可以从您修改的 GraphQL 查询中提取数据，并使用它来确定当前帖子是否为视频帖子：

盖茨比-node.js

const createIndividualBlogPostPages = async ({ posts, gatsbyUtilities }) =>
  Promise.all(
    posts.map(({ previous, post, next }) => {
      const postFormats = post.postFormats.formats;
      const isVideo = postFormats.length && postFormats[0].name === 'Video';
...
          // We also use the next and previous id's to query them and add links!
          previousPostId: previous ? previous.id : null,
          nextPostId: next ? next.id : null,
        },
      })}
    )
  )

然后，更改 createPage 中的 component 属性以使用对应的模板文件：

盖茨比-node.js

const createIndividualBlogPostPages = async ({ posts, gatsbyUtilities }) =>
  Promise.all(
    posts.map(({ previous, post, next }) => {
      const postFormats = post.postFormats.formats;
      const isVideo = postFormats.length && postFormats[0].name === 'Video';

      return gatsbyUtilities.actions.createPage({
        // Use the WordPress uri as the Gatsby page path
        // This is a good idea so that internal links and menus work 👍
        path: post.uri,

        // Use special video template if post format === Video, else use blog post template
        component: isVideo ? path.resolve(`./src/templates/video-post.js`) : path.resolve(`./src/templates/blog-post.js`),

        ...
      });
    })
  )

为了简洁起见，此代码语句使用 三元运算符 ，如果另一个值是 truthy（类似真值），则返回一个值，如果是 [ X187X]falsy，都没有 if/else 语句。 该代码使用您之前发布的格式检查中的 isVideo，如果为真，则返回新视频模板的路径。 如果为 false，它会告诉 Gatsby 使用常规的博客文章模板。 Node.js path.resolve() 函数用于将相对路径（./src/...）转换为绝对路径（完整文件路径），这是 Gatsby 加载组件文件所需的。

保存并退出文件。

接下来，通过再次编辑 ./src/css/style.css 来设置视频嵌入的样式：

/src/css/style.css

.video-embed {
  /* Shadow effect around box to give it contrast */
  box-shadow: 0px 2px 12px 4px rgb(0 0 0 / 50%);
  /* All four declarations below help center our video and give it space */
  display: block;
  line-height: 0px;
  margin: 20px auto;
  max-width: 512px;
}

在添加此 CSS 时，您为视频嵌入了阴影效果，这也使其与页面形成对比，并使其居中并与其他元素保持一定距离。

要测试此新代码的功能，您可以在 WordPress 中创建符合模板要求的标准的新帖子。 在您的 WordPress 管理仪表板中，单击左侧边栏中的 Posts，然后单击 Add New 以开始构建新帖子。 为您的帖子命名，然后确保它符合以下两个标准：

• Post Format 将设置为 Video。 您可以在右侧边栏中找到格式下拉菜单
• 帖子正文将包含一个 YouTube URL（而不是嵌入）。 要对此进行测试，您可以使用此短链接指向 DigitalOcean 宣传视频：youtu.be/iom_nhYQIYk。

填写完帖子后，选择 Publish（如果这是现有帖子，则选择 Update）并单击以确认出现的提示，以便您的帖子上线并且 Gatsby 可以获取它通过 GraphQL 连接。

在浏览器中导航到 localhost:8000 并选择您的测试视频帖子。 YouTube 视频将在浏览器中呈现，如下图所示：

结论

通过完成本教程中的步骤，您现在拥有一个静态生成的 Gatsby 站点，该站点从 WordPress 后端获取其内容。 在将内容与 UI 分离时，您为加快网站速度开辟了新的可能性，减少了跨学科内容协作的障碍，并利用了 Gatsby 和 React 为 UI 开发提供的丰富生态系统。

如果您想阅读更多 Gatsby 教程，请尝试 如何使用 Gatsby.js 创建静态网站系列 中的其他教程。