问题
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