如何在单个页面gatsby站点中将所有wordpress页面呈现为一个部分 [英] How to render all wordpress pages as a section in a single page gatsby site

问题描述

我想构建一个单页组合，其结构如下: 介绍 专案 简历 联系

I am wanting to build a single page portfolio that is structured in sections like: intro projects CV contact

对于在wordpress中创建的每个部分，我都有单独的页面.如何使用gatsby将每个wordpress页面渲染为一个页面?

I have a separate page for each of those sections created in wordpress. How can I render each wordpress page to one single page with gatsby?

此处是我通过wordpress API创建gatsby页面的地方: https://github.com/joeymorello/port-site/blob/master/gatsby-node.js

Here is where im creating gatsby pages from wordpress API: https://github.com/joeymorello/port-site/blob/master/gatsby-node.js

推荐答案

一个非常简单的示例可能是在您的pages/index.js中添加类似的内容:

A very simple example might be adding something something like this to your 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
        }
      }
    }
  }
`

这篇关于如何在单个页面gatsby站点中将所有wordpress页面呈现为一个部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！