使用新的 Gatsby Source WordPress 插件

在我之前的文章 中，我讨论了如何学习使用 Gatsby Source WPGraphQL 插件创建解耦的 WordPress 支持的 Gatsby 网站。该项目是按照 WPGraphQL 的正在进行的开发版本和 由 Henrik Wirth 提供的出色教程 完成的。虽然 WPGraphQL 在当时的一些生产网站中使用，但仍有很多迭代引入了破坏性变更。自去年 11 月 WPGraphQL v1.0 发布 以来，该插件已稳定并 可通过 WordPress 插件目录获得。

WPGraphQL 插件可用于创建使用 WordPress 进行内容管理的网站，但前端由 Gatsby 驱动。我们称之为“解耦”或“无头”CMS，因为网站的后端和前端是通过 API 相互通信的独立实体，其中前端上的组件会从 CMS 消费数据。

WPGraphQL 插件网站提供了完善的 逐步文档，供您入门，并且 发布公告文章 列出了九个使用该插件的生产级网站示例。

在真正意义上的“解耦”或“无头”网站中，WPGraphQL 可用于将 WordPress 数据移植到其他框架，例如 Next.js、Vue.js 等。对于 Gatsby 框架，建议使用 Gatsby Source WordPress 插件，它利用 WPGraphQL 从 WordPress 获取数据。

让我们一起设置所有内容并浏览插件。

先决条件

在我之前的文章 中，我们介绍了设置 WordPress 和 Gatsby 网站以及将后端 WordPress 数据移植到由 Gatsby 支持的前端网站（含网站部署）所需的先决条件。由于本文的基本概念相同，因此我将跳过很多细节，只是这次 WordPress 数据将由 Gatsby Source WordPress 插件提取。

如果您是 Gatsby 的新手，现在才加入 Gatsby 生成的静态网站生成器潮流，建议您阅读 React 专家 David Cramer 的 “对 Gatsby 的诚实评价” 和 Jared Palmer 的 “Gatsby 与 Next.js”。我们将要介绍的内容并不适合所有人，这些文章可能有助于您自行评估这是否适合您和您的项目。

WPGraphQL 或 GraphQL 是 Gatsby 框架中使用的主要查询语言 API。GraphQL 经常更新，这通常需要专家知识并注意破坏性变更。毕竟，GraphQL 是由 React 专家为其他 React 专家设计的。也就是说，有一些 故障排除说明 和一个 WPGraphQL Slack，WPGraphQL 和 Gatsby Source WordPress 插件 作者都在积极参与并帮助解答问题。

本文不是关于如何使用 Gatsby Source WordPress 插件的逐步指南。再次强调，这些内容已 在 Gatsby 的文档中提供。相反，如果您碰巧是 React、JavaScript、Node.js 或 GraphQL 方面的专家，那么我们这里介绍的内容可能是您已经知道的。本文是一篇基于我个人经验的观点文章，我希望它对具有基础工作知识的普通 WordPress 用户有用。

并且，在我们开始之前，值得一提的是，Gatsby Source WordPress 插件在版本 4 中进行了完全重写，并使用 WPGraphQL 作为其数据源。之前的版本 3 使用 REST API 作为其数据源构建。由于该插件的稳定版本最近发布，因此支持它的入门主题和演示数量有限。

首先，我们需要 WordPress

对于这个项目，我使用 Local by Flywheel 设置了一个使用默认 Twenty Twenty 主题 的全新 WordPress 网站。我导入了 主题单元测试数据（用于页面和帖子），如 WordPress Codex 中所述。虽然这是我使用的基线，但它也可以是现有的 WordPress 网站，该网站位于远程服务器或本地安装上。

现在我们已经有了既定的基线，我们可以登录 WordPress 管理员并安装所需的 WPGraphQL 和 WPGatsby 插件并激活它们。

正如我们在上一篇文章 中 讨论过的，这样做会在 WordPress 管理员中公开 GraphQL 和 WPGraphiQL API，从而允许 GraphiQL API 创建一个“游乐场”，用于测试基于 WordPress 数据的 GraphQL 查询。

现在我们需要一个 Gatsby 前端

Gatsby 以其 出色的文档 和强大的 入门模板 而闻名。要创建一个新的 WordPress 支持的网站，Gatsby 教程建议 使用入门模板 或 从头开始 都可以。

Gatsby 还提供了一个 示例网站 库，用于围绕特定技术构建的基本用例。目前恰好有一个 使用 WordPress 的示例，还有一个 使用 WordPress 与 Advanced Custom Fields 插件 的示例。请注意，库中的示例网站仍然使用 gatsby-source-wordpress 插件 3，截至撰写本文时，尚未更新到版本 4。

根据 Gatsby 教程，有三种方法可以创建 WordPress 支持的 Gatsby 网站。让我们看看每种方法。

选项 1：使用 Gatsby 入门模板

文档 中有关于如何设置 WordPress-Gatsby 网站的逐步指南，但这里是大致步骤。

在命令行中运行以下命令以从 GitHub 存储库中获取入门模板 并将其克隆到 my-wpstarter 项目文件夹中

#! clone starter repo
gatsby new my-wpstarter https://github.com/gatsbyjs/gatsby-starter-wordpress-blog 

然后，安装 npm 包

#! npm
npm install

#! or yarn
yarn install 

现在入门模板已克隆，让我们在代码编辑器中打开 gatsby-config.js 文件，并将其 URL 选项更新为从我们的 WordPress 端点提取数据（见上文）。

// gatsby-config.js
{
  resolve: gatsby-source-wordpress,
    options: {
     // WordPress is the GraphQL url.
     url: process.env.WPGRAPHQL_URL || https://wpgatsbydemo.wpengine.com/graphql,
  },
},

现在，我们将使用自己的 WordPress 网站 URL 替换入门模板的数据源端点 URL

// gatsby-config.js file
{
  resolve: `gatsby-source-wordpress`,
  options: {
    url: `http://gatsbywpv4.local/graphql`,
  },
},

让我们确保我们在 my-wpstarter 项目目录中。从项目文件夹中，我们将运行 gatsby develop 命令，从 WordPress 数据源端点构建我们的新 Gatsby 网站。在终端中，我们应该可以看到 gatsby-source-wordpress 插件正在提取数据，包括错误和成功的网站进程。

如果最后看到 success Building development bundle 消息，则表示 Gatsby 网站构建过程已完成，并且可以在 https://#:8000 上查看该网站。

这是一个基础的博客入门项目，包含基本文件和一些组件。它的文件结构与 gatsby-starter-blog 非常相似，但它包含一个 templates 文件夹，其中包含 blog-post.js 和 blog-post-achive.js 模板文件。

当我们在 https://#:8000/___graphql 查看 GraphiQL API 浏览器时，我们可以看到 WPGraphQL 公开的 WordPress 中的所有数据，以及直接从 UI 查询和检索特定数据。

没错！Gatsby 假设剩下的部分由我们自己构建，使用 Gatsby 组件从 WordPress 中提取数据进行展示。

选项 2：从头开始构建

Gatsby 的文档提供了一个详细的 分步指南，说明如何使用 Gatsby 的默认入门主题 从头开始创建一个新的 WordPress-Gatsby 网站。

我们将在命令行中创建一个新项目

#! create a new Gatsby site
gatsby new wpgatsby-from-scratch-demo

这将为我们提供一个 wpgatsby-from-scratch-demo 文件夹，其中包含入门主题。从这里，我们将 cd 到该文件夹并开始开发

cd wpgatsby-from-scratch-demo
gatsby develop

现在我们可以在浏览器中打开 https://#:8000 并获得欢迎页面。

现在我们可以开始从我们的 WordPress 网站获取数据了。让我们安装 Gatsby Source 插件

#! install with rpm
npm install gatsby-source-wordpress

#! install with yarn
yarn add Gatsby-source-wordpress

如果我们现在检查我们的浏览器，您会注意到没有任何变化——我们仍然看到相同的 Gatsby 欢迎页面。要获取我们的 WordPress 网站数据，我们需要将插件添加到 gatsby-config.js 文件中。打开该文件并插入以下内容

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // ...
  },
  plugins: [
  // Add Gatsby-source-wordpress plugin
  {
      resolve: `gatsby-source-wordpress`,
      options: {
        /*
         * The full URL of the WordPress site's GraphQL API.
         * Example : 'https://www.example-site.com/graphql'
         */
        url: `http://gatsbywpv4.local/graphql`,
       },
     },
    // The following plugins are not required for gatsby-source-wordpress ....
  ],
}

就像上次一样，我们需要将 WordPress 数据端点的来源更改为我们 WordPress 网站的 URL。让我们在我们的终端中运行 gatsby develop 来启动一切。

但是，当我们在浏览器中打开 https://#:8000 时，似乎没有任何变化。我们仍然看到相同的欢迎屏幕。但是，如果我们在浏览器中检查 GraphiQL（在 https://#:8000/___graphql 处），那么我们可以看到所有公开给我们 Gatsby 网站的 WordPress 数据，我们可以根据需要进行查询和显示。

让我们在 GraphiQL 浏览器中测试以下直接从 Gatsby 教程中提取的查询

query {
  allWpPost {
    nodes {
      id
      title
      excerpt
      slug
      date(formatString: "MMMM DD, YYYY")
    }
  }
}

当我们运行上面的查询时，我们将看到 allWpPost.nodes 属性值，其中包含 id、title、excerpt 等子属性。

现在，让我们打开我们的 src/components/pages/index.js 组件文件，并将代码替换为以下内容

// src/components/pages/index.js
import  React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default function Home({ data }) {
  return (
    <Layout>
      <SEO title="home" />
      <h1>My WordPress Blog</h1>
      <h4>Posts</h4>
      {data.allWpPost.nodes.map(node => (
        <div>
          <p>{node.title}</p>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}

export const pageQuery = graphql`
  query {
    allWpPost(sort: { fields: [date] }) {
      nodes {
        title
        excerpt
        slug
      }
    }
  }
`

保存它，使用 gatsby develop 重新启动服务器，并刷新页面。如果构建成功，那么我们网站的主页应该会显示一个来自 WordPress 的排序博客文章列表！

按照 教程，让我们为每个博客文章创建页面，并将列表中的文章标题链接到文章页面。使用 Markdown 数据创建页面的过程在 Gatsby 基础教程的第 7 部分中进行了详细描述，我们也将在本文中遵循该指南。

如教程中所述，Gatsby 使用 createPages API（或称为其“主力”API）根据数据（来自 Markdown 或 WordPress）以编程方式创建页面。与 Markdown 数据不同，我们不需要在这里创建一个 slug，因为每个 WordPress 文章都有自己的唯一 slug，可以从 WordPress 数据端点获取。

为每个文章创建页面

Gatsby 使用 gatsby-node.js 文件（位于我们项目的根目录）以编程方式创建博客文章。让我们在我们的文本编辑器中打开 gatsby-node.js 文件，并从 教程 中添加以下代码。

// gatsby-node.js 
const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return graphql(`
    {
      allWpPost(sort: { fields: [date] }) {
        nodes {
          title
          excerpt
          content
          slug
        }
      }
    }
  `).then(result => {
    console.log(JSON.stringify(result, null, 4))
    process.exit()
  })
}

如 Gatsby 第 7 部分教程 中所述，上面的代码是根据 WordPress 数据源创建文章页面的第一步。按照指南，让我们重新启动我们的服务器，并使用 gatsby develop 开发我们的网站。

我们应该在我们的终端中看到 console.log 输出，因为页面正在构建。但是，我们的主页仍然看起来相同。为了创建单个文章，Gatsby 需要模板来构建页面，我们将在下一步中创建它们。这就是我们接下来要做的事情。

创建博客文章模板

让我们在 src/ 目录中创建一个 src/components/templates 文件夹，并通过粘贴教程中的以下代码片段来创建一个 blog-post.js 文件

// src/templates/blog-post.js
import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"

export default function BlogPost({ data }) {
  const post = data.allWpPost.nodes[0]
  console.log(post)
  return (
    <Layout>
      <div>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </div>
    </Layout>
  )
}
export const query = graphql`
  query($slug: String!) {
    allWpPost(filter: { slug: { eq: $slug } }) {
      nodes {
        title
        content
      }
    }
  }
`

如教程中所述，上面的代码片段使用 React JSX 创建一个单篇文章，并将 post.title 和 post.content（第 12-13 行）包装在 src/components/layout.js 组件周围。在文件底部部分，添加了一个 GraphQL 查询，并根据文章 slug 变量 $slug 调用特定文章。当页面在 gatsby-node.js 中创建时，此变量将传递给 blog-post.js 模板。

接下来，我们还应该使用教程中的以下代码更新 gatsby-node.js 文件的第 12-13 行。

// gatsby-node.js
const path = require(`path`)

 exports.createPages = ({ graphql, actions }) => {
   const { createPage } = actions
   return graphql(`
     {
       allWpPost(sort: { fields: [date], order:DEC }) {
         nodes {
           title
           excerpt
           content
           slug
         }
       }
     }
   `).then(result => {
    result.data.allWpPost.nodes.forEach(node => {
        createPage({
          path: node.slug,
          component: path.resolve(`./src/templates/blog-post.js`),
          context: {
            // This is the $slug variable passed to blog-post.js
            slug: node.slug,
          },
        })
      })
   })
 }

让我们停止并使用 gatsby develop 重新启动我们的本地服务器，并查看网站。我们不会看到我们的主页上有博客文章链接列表。但是，如果我们使用 https://#:8000/abcdf 进行检查，我们应该会看到以下带有单个页面和文章链接列表的 404 页面。

如果我们检查 https://#:8000/hello-gatsby-world，我们应该看到我们完整的“Hello Gatsby WordPress World”文章。

下一步是将主页中的文章标题链接到实际的文章。

从主页链接到文章

将主页中的工作链接到文章页面是通过将 index.js 文件中的文章标题包装在 Gatsby 的 Link 组件中来完成的。让我们打开之前创建的 index.js 文件，并添加 Link 组件

// src/components/pages/index.js
import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default function Home({ data }) {
  return (
    <Layout>
      <SEO title="home" />
     {/* <h1>My WordPress Blog</h1>
      <h4>Posts</h4> */}
      {data.allWpPost.nodes.map(node => (
        <div key={node.slug}>
          <Link to={node.slug}>
            <h2>{node.title}</h2>
          </Link>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}

export const pageQuery = graphql`
  query {
    allWpPost(sort: { fields: [date], order: DEC  }) {
      nodes {
        title
        excerpt
        slug
      }
    }
  }
`

我们从 Gatsby 中导入了 Link 组件，然后使用 Link 组件将文章标题包装起来，并引用文章的 slug。让我们通过注释掉页面标题、将标题元素更改为 <h2> 以及在我们的 graphql 查询和 gatsby-node.js 文件中将排序后的文章顺序添加到 DEC 来清理代码。

就像我们之前做的那样，让我们停止并使用 gatsby develop 重新启动开发服务器，并在 https://#:8000 查看我们的主页。文章标题应该链接到单个文章页面。

我们将在第二种方法中进行到这里。我们接下来将介绍如何 获取菜单项 并查询其他数据类型（例如 自定义文章类型）以及配置 增量构建和预览 等。

您可以将相同的过程应用于调用和创建页面、自定义文章类型、自定义字段、分类以及 WordPress 众所周知的灵活内容。这可以像您想要的那样简单或复杂，所以尽情探索和享受乐趣吧！

—Gatsby 教程文档 

选项 3：使用 Gatsby 的 WordPress Twenty Twenty 入门项目

Gatsby 的入门模板 用于默认的 WordPress Twenty Twenty 主题，由 Henrik Wirth 创建和维护，他还有一个非常详细的 分步指南，您可能还记得我之前的一篇文章。这个入门项目与其他项目不同，它实际上更新到了 Gatsby Source 插件的第 4 版，并且在完成初始 WordPress 设置后，就可以立即使用，如文档中所述。它在 Gatsby 前端网站中保持相同的 Twenty Twenty 样式，但有一些 限制，包括不支持评论、月度归档页面和标签。

首先让我们在我们的 twenty-twenty-starter 文件夹中克隆入门项目。

#! clone gatsby-starter-wordpress-twenty-twenty 
gatsby new twenty-twenty-starter https://github.com/henrikwirth/gatsby-starter-wordpress-twenty-twenty

让我们 cd 到该文件夹，然后运行 gatsby develop 来启动网站。它第一次不会正常工作，因为我们还没有在 env.example 文件中更改 WPGRAPHQL_URL 值。我们需要将文件名从 .env.example 重命名为 .env，如文档中建议的那样。

之后，使用 gatsby develop 重新启动开发服务器。它应该成功构建网站。

菜单的显示与否取决于 WordPress 菜单的名称。在 Menu.js（第 8 行）中，查询菜单项的启动器菜单 slug 为 primary。由于我将我的 WordPress 网站设置为使用 main-menu，因此我必须相应地更新 Menu.js 文件。

由于启动器是在我们工具的较旧版本上测试的，我决定将插件升级到最新版本——WPGraphQL 1.2.6、WPGatsby 1.0.6 和 Gatsby Source WordPress 4.0.1——它运行良好，没有任何错误。

Twenty Twenty 启动器遵循 Twenty Nineteen Gatsby 主题 的文件结构，以及 Gatsby Starter WordPress Advanced。Henrik Wirth 在他的 分步指南 中描述了 WordPress 数据是如何移植到 Gatsby 的，Muhammad Muhsin 在他的 教程 中也描述了这一过程。除此之外，创建页面、页面模板、移植菜单项的方式完全相同。

此启动器使用与默认 WordPress Twenty Twenty 主题相同的 CSS，以及相同的资产文件夹，包括字体、图像、SVG 文件以及默认主题中包含的其他文件。

如果您对 WordPress Twenty Twenty 的样式感到满意，那么就这些了。享受您新的解耦 Gatsby 网站吧！

但假设我们要使用自定义样式。CSS 文件通过 gatsby-browser.js 文件从 assets 文件夹导入。

让我们修改网站的页眉、页脚、帖子和页面的样式。Gatsby 提供了不同的 样式选项 来为其组件设置样式，在本项目中，我遵循了 CSS 模块 来设置样式，并相应地修改了 Twenty Twenty 启动器组件的 CSS 标记。

我们可以从在 src/components/styles 中创建一个样式文件夹开始，并在其中创建一个 base 文件夹。以下是我们想要达成的通用文件结构

#! partial structure of /style folder
src
 |--/components
   |--/styles
     |--main.css          
     |--/base
       |--reset.css
       |--variables.css
     |--/scss
       |--header.module.css
       |--mainNav.module.css
       |--footer.module.css
       |--elements.module.css
       // and so on...

我们想要为网站的页眉和页脚设置样式，所以让我们打开启动器中的 Header.js 和 Footer.js 组件，并将代码替换为以下代码

// src/components/Header.js
import React from "react"
import { graphql, Link, useStaticQuery } from "gatsby"
import Menu from "./menu"
import style from "../styles/scss/header.module.css"
import logo from '../images/gatsby-icon.png'

const Header = ( ) => {
  const { wp } = useStaticQuery(graphql`
    {
      wp {
        generalSettings {
          title
          description
        }
      }
    }
  `)
  return (
    <header className={style.masthead}>
      <div className={style.masthead_info}>

      <Link to="/">
        <img src={logo} alt="logo" width="100" height="100" display="inline-block" marginBottom= "0"  className={style.site_logo} />
      </Link>
      <div className={style.site_header} >
        <div className={style.site_title}>
          <Link
            to="/"
            dangerouslySetInnerHTML={{ __html: wp.generalSettings.title }} />
        </div>
        <div className={style.site_description} dangerouslySetInnerHTML={{ __html: wp.generalSettings.description }} /></div>

      </div>
      <Menu />
    </header>
  )
}

export default Header

类似地，Footer.js 组件被修改如下

// src/components/Footer.js
import React from "react"

import style from "../styles/scss/footer.module.css"

export default () => (
  <footer className={style.colophon}>
    <p>© {new Date().getFullYear()} | This site is Powered by {'   ' } <a href="https://www.gatsbyjs.org">GatsbyJS</a> {'   and  '} <a href="https://www.wordpress.org">WordPress</a></p>
  </footer>
)

现在，让我们重启我们的开发服务器。我们应该看到以下内容，包括一个新的自定义页眉和页脚。我使用了与 Learning Gatsby（我是 Morten Rand-Hendriksen 的粉丝！）相同的样式，该课程是 Morten Rand-Hendriksen 的在线课程。

您可以从 GitHub 获取我使用的所有代码。

这对 WordPress 爱好者意味着什么

有很多文章比较了解耦合 WordPress 和 Jamstack 网站（如我们已经介绍的 Gatsby 示例）的优缺点。在我的研究中，我意识到，它们都没有 Chris 在 ”WordPress and Jamstack” 中写的那样详尽，他在其中比较了一切，从性能和功能到开发人员体验和构建流程等等。

我发现以下文章对各种主题得出了一些有益的结论，包括

成本如何

人们普遍认为 Jamstack 托管很便宜，比传统的 LAMP 堆栈托管更便宜。但实际上需要考虑很多因素，实际成本可能会有所不同。

• “如何在本地、Gatsby 和 Netlify 上免费运行您的 WordPress 网站！”（Nate Fitch）：Nate 认为，如果项目是静态博客或不需要任何交互的网站，这种无头 WordPress 设置可能是一个不错的选择。例如，将图像托管在 Cloudinary 或其他 CDN 上不会太难，但对于大型的交互式网站来说，这将非常困难。
• “WordPress and Jamstack”（Chris Coyier）：这里有一节专门介绍 Jamstack 网站不同类型托管的定价，以及为什么像“Jamstack 更便宜”这样的笼统说法行不通，因为实际成本取决于网站及其使用情况。
• “在 Netlify、Vercel 和 Digital Ocean 之间进行选择”（Zell Liew）：Zell 分享了自己选择托管计划的经验。他的观点：如果您有一个小型项目，请使用 Netlify；如果您有一个大型项目，请使用 Digital Ocean。

为什么要选择静态网站

考虑到您在 WordPress 中免费获得的所有功能——比如评论、插件、集成等等——您可能会想知道，将服务器端设置换成客户端解决方案是否值得。Chris 在他的 “Static or Not?” 文章中解释了为什么要选择其中一种而不是另一种。

我们如何获得评论功能

WordPress 为我们提供了原生评论功能。但是，静态网站上的评论支持有点像一个庞然大物。在 CSS-Tricks 上的 “JAMstack Comments” 文章中，作者解释了如何使用 Netlify 服务 在静态网站（如 Gatsby）中实现动态评论。我在之前的文章中 简要提到了这一点。

SEO 如何

• “WPGraphQL 和 Yoast 的 Gatsby SEO”（Gatsby 社区插件）：广泛使用的 Yoast SEO WordPress 插件可以使用此插件集成到 Gatsby 前端。
• “WordPress 的 JavaScript SEO 入门指南”（Jono Alderson）：本详尽指南 包含一个部分，介绍了如何将 Yoast SEO 集成到无头架构中，以及依赖 JavaScript 进行 SEO 的影响。最重要的是，主题和插件开发人员不必太担心 JavaScript 和 SEO 的不断变化，只要他们继续遵循最佳实践即可。同时，他们应该了解正在发生的变化并相应地做出调整。

它们是如何协同工作的

• “Gutenberg 和解耦应用程序”（Jason Bahl）：Jason 是 WPGraphQL 的创建者和维护者，他深入探讨了在解耦应用程序中使用更新的 WordPress 块编辑器。
• “WPGraphQL 的 Jason Bahl 在 Web 操作系统中的作用”（YouTube）：Jason 又来了，这次他讨论了模板。他介绍了 WPGraphQL 在 WordPress 生态系统和无头 Gatsby 网站中的作用，强调 WPGraphQL 与 WordPress REST API 一样，都是关于数据暴露的。WPGraphQL 如何在 Gatsby 中暴露 WordPress 数据，并在前端 React 组件中显示它，取决于开发人员。

目前没有针对非开发人员的 Gatsby React 模板，但一些机构，如 Gatsby WP Themes 和 Themeforest 市场 开始填补这一空白。例如，Gatsby WP Themes 提供了用于动态内容的插件，如 MailChimp 集成，使用 Contact Form 7 插件创建表单，Yoast SEO 等等。Themeforest 列出了 30 多个 Gatsby 模板，包括 Gatsby – WordPress + 电子商务主题，它可以让您了解这种设置的潜力。请记住：这些是商业网站，您会发现很多东西都是收费的。

我不断变化的个人观点

如果您还记得，我在上一篇文章的结尾对创建使用 Gatsby 作为前端的无头 WordPress 网站的过程进行了 个人反思。我最初的评价并不算太好

基于我非常有限的经验，我认为目前可用的 Gatsby WordPress 主题对于像我这样的用户来说还无法投入实际使用。是的，尝试一些明显在许多 WordPress 用户和开发人员脑海中的尖端技术很令人兴奋。与此同时，WordPress 块编辑器、WPGraphQL 和 Gatsby Source WordPress 插件不断发展的工作使得很难预测事情的发展方向以及何时会稳定到可以在其他情况下安全使用。

所以，经过我漫长的无头 WordPress 网站之旅后，我现在有什么看法呢？作为一个思想开放的学习者，我的想法仍在不断发展。但我完全赞同 Chris 在他的 “静态还是动态？” 文章中所说。

运行一个 WordPress 网站是一个完全可以接受的选择，而且很多时候也是明智之举。我认为这与稳健性和功能的成熟度有关。需要电子商务？没问题。需要表单？有很多很棒的插件。需要增强 CMS 的工作方式？你可以控制内容类型以及内容中包含的内容。需要身份验证？这是核心功能。希望拥有很棒的编辑体验？Gutenberg 太棒了。

我是一个 WordPress 爱好者，我喜欢 WordPress 作为 CMS。但是，作为一个技术学习挑战，我还没有放弃将分离式 WordPress 网站作为个人项目的目标。

我必须承认，学习使用 WordPress 创建一个分离式 Gatsby 网站一直很让人沮丧。我承认，任何现代技术栈对许多 WordPress 用户来说都不是“一杯茶”。Gatsby 的学习曲线很陡峭，因为这些技术栈是针对有经验的 React 和 JavaScript 开发人员的。

自学一项新技术可能会让人沮丧。如果我们（包括我自己）恰好缺乏对 Node、React、JavaScript 以及最重要的是 GraphQL 的经验，学习 Gatsby 尤其令人沮丧。我的学习项目网站会因为某些依赖关系而崩溃，修复它可能需要我花几天时间进行研究。我有时会想知道这种麻烦是否值得结果。别误会我的意思，我的沮丧源于我自己缺乏经验，而不是框架本身（因为它们太棒了）。

即使是有经验的开发人员，如 David Cramer 和 Jared Palmer 也发现使用 Gatsby 和 GraphQL 令人沮丧，并且他们也表达了我们这些初学者在使用 GraphQL 时会遇到的类似感受。我完全赞同 David 的观点，他写道：

这是一个静态网站生成器。它真的不需要到处都是 GraphQL。虽然在现实世界中有一些情况需要用到它，但它不应该需要一个 GraphQL API 来读取内存中已经存在的对象。

GraphQL 是一种有主见性查询语言 API，它的规范经常变化。事实上，在 WPGraphQL Slack 中，大多数讨论都与查询有关。

在进行这个项目的时候，我读了 CSS-Tricks 上的一篇文章，遇到了 Frontity React 框架。它使用 REST API 获取所有 WordPress 数据，而无需编写任何查询。这似乎是一个更好的选择，至少对我来说是如此。此外，它似乎是一个更简单的选择。在我短暂的体验中，我根本没有遇到任何依赖关系或库问题。Frontity 的 主题 概念非常像 WordPress，并提供了优秀的 教程。

我目前正在探索 Frontity 框架是否将成为我的分离式项目网站的更好选择，并将在我未来的文章中分享我的体验。

资源

Gatsby 感觉像是针对有经验的 React 和 JavaScript 开发人员的，而不是像我这样的初学者！gatsby-source-wordpress 和 gatsby-source-wpgraphql 插件在将 WordPress 数据暴露给 Gatsby 网站方面做得非常出色，但其余的工作则取决于用户使用他们选择的框架来呈现前端数据：React、Vue、Next 等。

缺乏对 React 和 JavaScript 的扎实了解是初学者面临的主要障碍。Gatsby 社区弥补了许多这些差距，并且有很多资源可供学习和探索。

Gatsby 大会 2021 演讲

最近的 2021 Gatsby 大会 上有两场研讨会演讲与 Gatsby WordPress 网站相关。在一场中，Jason Bahl 主持了一个研讨会，指导如何创建一个由 WordPress 数据驱动的 Gatsby 博客，包括对 Yoast SEO 插件的支持，以及 如何将网站部署 到 Gatsby Cloud。

还有 另一个研讨会，由 WP Engine 的 Matt Landers 主持，他在 演示了如何设置 使用 高级自定义字段插件 来创建一个团队成员页面。

这两个演讲都很不错，尤其是如果你喜欢通过实践学习的话。我还发现 这一集 Matt Report 播客 中 Jason Bahl 回答了一些面向初学者的基本问题。

教程课程

Morten Rand-Hendriksen 在 LinkedIn 学习平台上有一个 很棒的课程，它使用 Gatsby Source WordPress 插件。如果你想更多地了解如何制作一个定制网站，扩展我们已经介绍过的两个 Gatsby 起始器，这个课程很不错，因为它教授如何创建一个完整的可运行网站，包括下拉式头部导航、页脚菜单、帖子、页面、类别、标签和页面导航。

该课程的练习文件可在 GitHub LinkedIn 学习 仓库中找到。

Gatsby 起始器

在我写这篇文章的时候，有十个 Gatsby 起始器 用于 WordPress。正如我们之前提到的，只有 Gatsby Starter WordPress Twenty Twenty 是基于最新版本的 Gatsby Source WordPress 插件的；其他都是版本 3。

---

感谢您的阅读。我一直都很想知道像我这样缺乏大量技术经验的 WordPress 用户是如何使用这个插件的。如果您有任何反馈，请随时在评论中发表。