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

Question

我想构建一个单页作品集，其结构如下：介绍项目简历联系人

对于在 wordpress 中创建的每个部分，我都有一个单独的页面。如何使用 gatsby 将每个 wordpress 页面呈现为一个页面？

这是我从 wordpress 创建 gatsby 页面的地方 API： https://github.com/joeymorello/port-site/blob/master/gatsby-node.js

Answer 1

如果您希望将一个页面的内容嵌入到另一个页面而无需复制全部内容，则需要使用短代码。你可以试试这个插件：https://wordpress.org/plugins/insert-pages/

Answer 2

一个非常简单的示例可能是将类似这样的内容添加到您的 pages/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
        }
      }
    }
  }
`

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

How to render all wordpress pages as a section in a single page gatsby site

wordpress

reactjs

gatsby

headless-cms