首先先調整 gatsby-node.js
在 gatsby-source-wordpress plugin 有建議寫法
以下是調整過的
gatsby-node.js
const _ = require(`lodash`)
const Promise = require(`bluebird`)
const path = require(`path`)
const slash = require(`slash`)
// Implement the Gatsby API “createPages”. This is
// called after the Gatsby bootstrap is finished so you have
// access to any information necessary to programmatically
// create pages.
// Will create pages for WordPress pages (route : /{slug})
// Will create pages for WordPress posts (route : /post/{slug})
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
return new Promise((resolve, reject) => {
// The “graphql” function allows us to run arbitrary
// queries against the local WordPress graphql schema. Think of
// it like the site has a built-in database constructed
// from the fetched data that you can run queries against.
// ==== PAGES (WORDPRESS NATIVE) ====
graphql(
`
{
allWordpressPage {
edges {
node {
id
slug
status
template
title
content
template
}
}
}
}
`
)
.then(result => {
if (result.errors) {
console.log(result.errors)
reject(result.errors)
}
// Create Page pages.
const pageTemplate = path.resolve("./src/templates/page.js")
// We want to create a detailed page for each
// page node. We'll just use the WordPress Slug for the slug.
// The Page ID is prefixed with 'PAGE_'
_.each(result.data.allWordpressPage.edges, edge => {
// Gatsby uses Redux to manage its internal state.
// Plugins and sites can use functions like "createPage"
// to interact with Gatsby.
createPage({
// Each page is required to have a `path` as well
// as a template component. The `context` is
// optional but is often necessary so the template
// can query data specific to each page.
path: `/${edge.node.slug}/`,
component: slash(pageTemplate),
context: edge.node,
})
})
})
// ==== END PAGES ====
// ==== POSTS (WORDPRESS NATIVE AND ACF) ====
.then(() => {
graphql(
`
{
allWordpressPost {
edges {
node {
id
title
slug
excerpt
content
}
}
}
}
`
).then(result => {
if (result.errors) {
console.log(result.errors)
reject(result.errors)
}
const postTemplate = path.resolve("./src/templates/post.js")
// We want to create a detailed page for each
// post node. We'll just use the WordPress Slug for the slug.
// The Post ID is prefixed with 'POST_'
_.each(result.data.allWordpressPost.edges, edge => {
createPage({
path: `/post/${edge.node.slug}/`,
component: slash(postTemplate),
context: edge.node,
})
})
resolve()
})
})
// ==== END POSTS ====
})
}
再把 pages folder 刪到剩 404.js,並新增一個名為 template 資料夾,裏頭有 page.js 和 post.js
新增檔案的內容皆為
import React from "react"
export default ({ pageContext }) => (
<div>
<h1>{pageContext.title}</h1>
<div dangerouslySetInnerHTML={{ __html: pageContext.content }} />
</div>
)
訪問 {{domain}}/sample-page
至於訪問根目錄會出現錯誤,跟我們404 page 還沒調整有關,明日再修改