Reactjs 如何将所有wordpress页面呈现为单个页面gatsby站点中的一个部分

我想建立一个单页的投资组合，其结构如下： 简介 项目 个人简历 接触

我在wordpress中创建的每个部分都有一个单独的页面。如何使用盖茨比将每个wordpress页面呈现为一个页面

下面是我从wordpress API创建盖茨比页面的地方：

---

如果您希望将一个页面的内容嵌入到另一个页面中，而不必复制整个内容，则需要使用短代码。您可以尝试这样的插件：

一个非常简单的示例可能是在

页面/index.js中添加类似的内容：

import React from "react"
import { graphql } from "gatsby"

const IndexPage = ({ data }) => {
  const { allWordpressPage } = data
  return (
  <>
    {allWordpressPage.edges.node.map(node => {
      const { title, content, id } = node
      return (
        <section key={ id }>
          <h2>{{ title }}</h2>
          <div>{{ content }}</div>
        </section>
      )
    })}
  </>
}
)}

export default IndexPage



export const pageQuery = graphql`
  query {
    allWordpressPage {
      edges {
        node {
          id
          title
          content
        }
      }
    }
  }
`

从“React”导入React
从“盖茨比”导入{graphql}
常量IndexPage=（{data}）=>{
const{allWordpressPage}=数据
返回(
{allWordpressPage.edges.node.map（node=>{
const{title，content，id}=node
返回(
{{title}}
{{content}}
)
})}
}
)}
导出默认索引扩展
export const pageQuery=graphql`
质疑{
allWordpressPage{
边缘{
节点{
身份证件
标题
内容
}
}
}
}
`
将类似的查询（添加到
gatsby node.js
中的查询）添加到索引页组件中。循环浏览
allWordpressPage
的每个节点，并以某种方式显示它们。