使用WordPress数据创建盖茨比网站

本教程建立在上一篇文章的基础上，提供了整合盖茨比和WordPress的详细演练。盖茨比（Gatsby）的速度和安全利益吸引了WordPress用户，提供了一种利用这些优势的方法，同时保留熟悉的WordPress内容管理经验。

本指南侧重于实际实施，从各种资源中汲取利用并应对潜在的挑战。请注意，WPGRAPHQL和GATSBY CLI是积极开发的，这意味着版本的兼容性至关重要。该项目利用WPGRAPHQL 0.8.3， gatsby-source-wpgraphql 2.5.1和GATSBY CLI 2.12.21。始终请参阅官方文档以获取最新更新。

有几个出色的盖茨比起步剂，包括亚历山大·斯帕拉托（Alexandra Spalato）的gatsby-wordpress-theme-blog ，扎克·戈登（Zac Gordon）和穆罕默德·穆辛（Muhammad Muhsin）的twenty-nineteen-gatsby-theme 。

先决条件

跟随，您需要：

• 基本的反应和JavaScript知识。许多在线资源提供介绍性指南。
• 掌握了盖茨比动态页面创建机制。全面的教程很容易获得。
• 一个工作的WordPress安装。有很多指南可以协助设置。

利用现有资源

该项目受益于先前的盖茨比经验和可重复使用的组件（版式，布局等）。包括关键资源：

• 亨里克·沃思（Henrik Wirth）的综合盖茨比WordPress入门指南。
• 杰森·伦斯托夫（Jason Lenstorf）的jamstack迁移教程。
• 穆罕默德·穆辛（Muhammad Muhsin）的指南关于载入二十个主题的指南。

该教程反映了Henrik Wirth的结构，省略了诸如图像处理和ACF柔性内容之类的高级功能。

项目阶段：

1. WordPress和Gatsby设置
2. 内容迁移
3. 导航实施
4. 博客文章显示
5. 样式和部署

阶段1：设置WordPress和Gatsby

首先建立一个WordPress站点（现有或新的，甚至是本地安装）开始。该项目使用二十个主题。

安装必需插件

安装WPGRAPHQL（对于GraphQL API）和WPGRAPHIQL（可选，但有助于测试查询）。这些插件可能在WordPress插件目录中不可用；直接从github下载并手动安装。 WPGRAPHIQL在WordPress仪表板中提供了方便的测试接口。

盖茨比站点初始化

使用默认启动器创建本地盖茨比网站：

盖茨比新的wordpress-gatsby https://github.com/gatsbyjs/gatsby-starter-default

启动开发服务器（ gatsby develop ），然后访问localhost:8000的入门页面。

安装并配置gatsby-source-graphql插件插件：

纱线添加gatsby-source-graphql＃或npm安装-Save gatsby-source-raphql

配置gatsby-config.js ：

 Module.exports = {
  插件：[
    {
      决心：“盖茨比 - 苏格拉夫Ql”，
      选项： {
        键入：“ wpgraphql”，
        fieldname：“ wpcontent”，
        URL：“ https：//tinjurewp.com/wp-gatsby/graphql”，//或使用环境变量
      }，，
    }，，
  ]，，
};

考虑使用dotenv模块进行环境变量来管理敏感数据。

重新启动服务器后，可以通过https://localhost:8000/__graphql/访问WPGRAPHQL API。

阶段2：迁移WordPress内容

Gatsby通过使用GraphQl查询数据在构建过程中创建页面。这涉及使用Gatsby的onCreateNode和createPages API。

内容准备

将帖子和页面添加到您的WordPress网站。从Gatsby pages文件夹中删除index.js和page-2.js以避免冲突。

模板创建

为帖子（ /src/templates/post/index.js ）创建模板和页面（ /src/templates/page/index.js ）：

 // src/templates/post/index.js（示例）
从“反应”中导入反应；
从“ ../../../components/layout”导入布局;
从“ ../.././components/seo”导入SEO;

const post =（{pageContext}）=> {
  const post = pageContext.post;
  返回 （
    <layout>
      <seo title="{post.title}"></seo>
      <h1 id="post-title">{post.title}</h1>
      <div dangerouslysetinnerhtml="{{" __html: post.content></div>
    </layout>
  ）；
};

导出默认帖子；

createPages API实现

使用Gatsby的createPages API从WordPress数据中生成页面。这涉及GraphQl查询和数据映射。 （请参阅链接的GitHub存储库中的完整代码）。

第三阶段：实施导航

WordPress的导航管理允许创建菜单。本节重点是将主要菜单移植到Gatsby。

WordPress中的菜单创建

在WordPress中创建一个名为“主”的菜单，将链接添加到主页，示例页面和其他相关内容。

GraphQl查询

查询菜单项使用GraphiQl：

查询myquery {
  menuitems（其中：{位置：primary}）{
    节点{
      标签
      URL
      标题
      目标
    }
  }
}

组件创建

创建菜单项（ MenuItem.js ）和菜单本身（ Menu.js ）的组件，处理从绝对路径到相对路径的URL转换。 （请参阅链接的GitHub存储库中的完整代码）。

集成菜单

将Menu组件添加到Layout组件中。实施一个UniversalLink组件来处理内部和外部链接。

第4阶段：显示博客文章

该阶段着重于创建博客文章模板和分页的组件。

全局变量

创建一个globals.js文件以管理blogURI之类的设置。

博客模板

创建一个博客模板（ /src/templates/post/blog.js ）以显示帖子，利用PostEntry和Pagination组件。

发布输入组件

创建一个PostEntry部件以显示单个帖子，包括特色图像和摘录。

图像组件

创建一个Image组件来处理特色图像，包括后备图像。

分页部分

创建一个Pagination组件，用于通过分页的帖子导航。

重构createPages和createPosts

rebactor createPages.js和createPosts.js使用GraphQl片段来改善代码组织和可维护性。 （请参阅链接的GitHub存储库中的完整代码）。

第5阶段：样式和部署

本节涵盖了样式和部署策略。

造型

使用SASS或其他首选方法进行样式。考虑使用@wordpress/block-library合并WordPress块样式。

部署

利用NetLify或其他平台进行连续部署。考虑使用jamstack部署插件进行由WordPress更改触发的自动部署。

该综合指南为整合盖茨比和WordPress提供了坚实的基础。请记住，请咨询链接的GitHub存储库以获取完整的代码示例和更多详细信息。该过程涉及多个步骤，需要对Gatsby和WordPress有很好的了解。但是，结果是一个快速，安全且可维护的网站。

以上是使用WordPress数据创建盖茨比网站的详细内容。更多信息请关注PHP中文网其他相关文章！