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

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

介绍

WordPress的是一种流行的CMS（ç ontent中号anagement小号ystem）。它允许您在可视化编辑器中编辑帖子，而不是使用原始 HTML 对网站的页面进行手动编码，并提供其他功能，例如协作编辑和修订历史记录。

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

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

在本教程中，您将配置 WordPress 以与 Gatsby 对话，基于入门模板设置一个新的 Gatsby 项目，在 Gatsby 配置中定义与 WordPress 的连接，并将所有这些组合在一起以根据实时发布的帖子静态生成一些页面在您的 WordPress 安装中。

先决条件

在您开始本指南之前，您需要准备以下几样东西：

本教程在 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 实例是否支持这些更改，并记录一些稍后需要的有关您的特定设置的详细信息。

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

显示在 WordPress Admin 的插件侧栏中选择的添加新链接的屏幕截图

需要的两个插件如下，安装顺序如下：

WPGraphQL 的 WordPress 插件列表的屏幕截图

WPGatsby 的 WordPress 插件列表的屏幕截图

通过搜索这些插件，然后按其关联的“立即安装”按钮来安装和激活这两个插件。安装后，选择“激活”按钮。安装并激活这两个插件后，您将在 WordPress 管理仪表板中看到一些新的设置面板。下图显示了这些新的设置面板。

显示所需插件 WPGraphQL 和 WPGatsby 已安装、激活并在管理仪表板周围添加设置面板的屏幕截图

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

WPGraphQL 设置页面的屏幕截图，其中突出显示了 GraphQL 端点 URL。 在这个例子中，它是“http://wp-do.test/graphql”

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

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

将您的永久链接设置为非普通内容会带来一些特定的技术要求；对于 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 博客入门模板。

导航到将保存 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 项目的主要配置文件。

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

gatsby-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 develop

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

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

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

Gatsby 网站名为“Gatsby Test”，其中包含一篇“Hello World”博客文章

现在您的 Gatsby 项目从 WordPress 中提取数据，下一步将是自定义实际的模板文件，以便您可以让 Gatsby 站点的外观和行为符合您的要求。

第 4 步 – 自定义入门模板文件

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

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

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

有关如何编辑现有模板文件的示例，请./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, with <div className="post-excerpt" dangerouslySetInnerHTML={{__html: post.excerpt}} ></div>。

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

由于摘录是帖子的摘要，如果您在视觉上将其与帖子正文分开，在页面顶部突出显示并使其易于查找，它可能会对您网站的访问者有所帮助。您可以通过编辑位于以下位置的主要共享 CSS 文件来执行此操作./src/css/style.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 帖子编辑器视图。在较新的基于块的编辑器中，摘录字段显示在右侧边栏中靠近底部的“发布”选项卡下。在旧版编辑器中，摘录字段的位置是可自定义的，因此它可能会出现在不同的位置，具体取决于您的主题和自定义设置。

添加摘录，然后选择屏幕顶部的“更新”按钮。然后，转到您的 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 网址：

/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找到 a，您的代码将返回一个自定义的、隐私增强的 YouTube 嵌入，通过iframe 提供，设置为自动播放。否则，它将返回未找到视频的消息。它还在视频嵌入和帖子的页脚之间添加了一个水平分隔符。

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

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

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

gatsby-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
}

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

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

gatsby-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,
        },
      })}
    )
  )

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

gatsby-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`),

        ...
      });
    })
  )

为了保持简洁，这个代码语句使用了一个三元运算符，这是一种方法，如果另一个值是真（类似真），则返回一个值，如果它是假的，则返回不同的值，所有这些都没有if/else语句。该代码使用isVideo您之前的帖子格式检查，如果为真，则返回新视频模板的路径。如果为 false，它会告诉 Gatsby 使用常规的博客帖子模板。Node.jspath.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 管理仪表板中，单击左侧边栏中的帖子，然后单击添加新帖子以开始构建新帖子。为您的帖子命名，然后确保它符合以下两个标准：

  • 该帖子格式将被设置为视频。您可以在右侧边栏中找到格式下拉列表
  • 帖子正文将包含一个 YouTube 网址（而不是作为嵌入内容）。要对此进行测试，您可以使用此指向 DigitalOcean 宣传视频的短链接：youtu.be/iom_nhYQIYk。

显示 WordPress 帖子编辑器的屏幕截图，帖子正文中有一个 YouTube URL，帖子格式类型设置为视频

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

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

页面上带有渲染的 DigitalOcean 宣传视频的视频博客文章

结论

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

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

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁