在考虑替代 Wordpress 时，我偶然发现了它，很高兴我不必放弃简单易用的拖放构建器。
我的第一次部署一直面临挑战，这变得令人沮丧。
下面是我的 gatsby-config.js
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
/**
* First up is the WordPress source plugin that connects Gatsby
* to your WordPress site.
*
* visit the plugin docs to learn more
* https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-wordpress/README.md
*
*/
resolve: `gatsby-source-wordpress`,
options: {
// This type will contain remote schema Query type
//typeName: `WPGraphQL`,
// This is field under which it's accessible
//fieldName: `wpgraphql`,
// Url to query from
// the only required plugin option for WordPress is the GraphQL url.
url:
process.env.WPGRAPHQL_URL || `https://decognizantconsult.com/graphql`,
verbose: true,
},
},
/*{
resolve: `gatsby-source-graphql`,
options: {
// This type will contain remote schema Query type
typeName: `WPGraphQL`,
// This is field under which it's accessible
fieldName: `wpgraphql`,
// Url to query from
url: process.env.WPGRAPHQL_URL ||
`https://www.decognizantconsult.com/graphql.`,
},
},*/
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}然后是我的 gatsby-node.js 下面：
/**
* Implement Gatsby's Node APIs in this file.
*
* See: https://www.gatsbyjs.com/docs/node-apis/
*/
// You can delete this file if you're not using it
// gatsby-node.js
const createPages = require("./create/createPages")
const createPosts = require("./create/createPosts")
//const createUsers = require("./utils/createUsers")
//const createCategories = require("./utils/createCategories")
//const createTags = require("./utils/createTags")
exports.createPagesStatefully = async ({ graphql, actions, reporter }, options) => {
await createPages({ actions, graphql, reporter }, options)
await createPosts({ actions, graphql, reporter }, options)
//await createUsers({ actions, graphql, reporter }, options)
//await createCategories({ actions, graphql, reporter }, options)
//await crateTags({ actions, graphql, reporter }, options)
}在 createPost.js 文件中，我有以下内容：
// create/createPosts.js
const {
PostTemplateFragment,
BlogPreviewFragment,
} = require("../src/templates/posts/data.js")
//const postTemplate = require.resolve(`../src/templates/posts/single.js`)
//const blogTemplate = require.resolve(`../src/templates/posts/archive.js`)
const { blogURI } = require("../globals")
const postTemplate = require.resolve("../src/templates/posts/index.js")
const blogTemplate = require.resolve("../src/templates/posts/blog.js")
const GET_POSTS = `
# Here we make use of the imported fragments which are referenced above
${PostTemplateFragment}
${BlogPreviewFragment}
query GET_POSTS($first:Int $after:String) {
wpgraphql {
posts(
first: $first
after: $after
# This will make sure to only get the parent nodes and no children
where: {
parent: null
}
) {
pageInfo {
hasNextPage
endCursor
}
nodes {
uri
# This is the fragment used for the Post Template
...PostTemplateFragment
#This is the fragment used for the blog preview on archive pages
...BlogPreviewFragment
}
}
}
}
`
const allPosts = []
const blogPages = [];
let pageNumber = 0;
const itemsPerPage = 10;
/**
* This is the export which Gatbsy will use to process.
*
* @param { actions, graphql }
* @returns {Promise<void>}
*/
module.exports = async ({ actions, graphql, reporter }, options) => {
/**
* This is the method from Gatsby that we're going
* to use to create posts in our static site.
*/
const { createPage } = actions
/**
* Fetch posts method. This accepts variables to alter
* the query. The variable `first` controls how many items to
* request per fetch and the `after` controls where to start in
* the dataset.
*
* @param variables
* @returns {Promise<*>}
*/
const fetchPosts = async (variables) =>
/**
* Fetch posts using the GET_POSTS query and the variables passed in.
*/
await graphql(GET_POSTS, variables).then(({ data }) => {
/**
* Extract the data from the GraphQL query results
*/
const {
wpgraphql: {
posts: {
nodes,
pageInfo: { hasNextPage, endCursor },
},
},
} = data
/**
* Define the path for the paginated blog page.
* This is the url the page will live at
* @type {string}
*/
const blogPagePath = !variables.after
? `${blogURI}/`
: `${blogURI}/page/${pageNumber + 1}`
/**
* Add config for the blogPage to the blogPage array
* for creating later
*
* @type {{
* path: string,
* component: string,
* context: {nodes: *, pageNumber: number, hasNextPage: *}
* }}
*/
blogPages[pageNumber] = {
path: blogPagePath,
component: blogTemplate,
context: {
nodes,
pageNumber: pageNumber + 1,
hasNextPage,
itemsPerPage,
allPosts,
},
}
/**
* Map over the posts for later creation
*/
nodes
&& nodes.map((posts) => {
allPosts.push(posts)
})
/**
* If there's another post, fetch more
* so we can have all the data we need.
*/
if (hasNextPage) {
pageNumber++
reporter.info(`fetch post ${pageNumber} of posts...`)
return fetchPosts({ first: itemsPerPage, after: endCursor })
}
/**
* Once we're done, return all the posts
* so we can create the necessary posts with
* all the data on hand.
*/
return allPosts
})
/**
* Kick off our `fetchPosts` method which will get us all
* the posts we need to create individual posts.
*/
await fetchPosts({ first: itemsPerPage, after: null }).then((wpPosts) => {
wpPosts && wpPosts.map((post) => {
/**
* Build post path based of theme blogURI setting.
*/
const path = `${blogURI}${post.uri}`
createPage({
path: path,
component: postTemplate,
context: {
post: post,
},
})
reporter.info(`post created: ${path}`)
})
reporter.info(`# -----> POSTS TOTAL: ${wpPosts.length}`)
/**
* Map over the `blogPages` array to create the
* paginated blog pages
*/
blogPages
&& blogPages.map((blogPage) => {
if (blogPage.context.pageNumber === 1) {
blogPage.context.publisher = true;
blogPage.context.label = blogPage.path.replace('/', '');
}
createPage(blogPage);
reporter.info(`created blog archive page ${blogPage.context.pageNumber}`);
});
})
}最初我在没有 gatsby-source-wordpress 插件的情况下运行我的部署，然后我将在 createPost.js 中的 const GET_POST 块处遇到错误，响应为“无法在类型“查询”上查询字段“wpgraphql”。
所以我将查询字段更改为 graphql 但这也不起作用，我求助于安装 gatsby-source-wordpress 插件，希望它能很好地解决问题，但现在我收到一个错误消息
“加载插件“gatsby-source-wordpress”时出现问题。也许你需要安装它的包？”
我不确定这是否是由于某些插件不兼容造成的，并且希望获得一些有关如何解决此问题的指导。
请参阅下面的 Deploy 操作的原始日志
请查看package-lock.json文件的链接：