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

不羁岁月 提交于 2019-12-13 09:55:46

问题


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

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?

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


回答1:


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
        }
      }
    }
  }
`



回答2:


If you want the contents of one page to be embedded into another page without having to copy the entire content you would need to use shortcodes. You can try a plugin for that such as this one: https://wordpress.org/plugins/insert-pages/



来源:https://stackoverflow.com/questions/58052881/how-to-render-all-wordpress-pages-as-a-section-in-a-single-page-gatsby-site

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!