Create pages from other md files
This commit is contained in:
parent
c064850324
commit
139db50cfd
|
@ -23,7 +23,7 @@ module.exports = {
|
|||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `data`,
|
||||
name: `pages`,
|
||||
path: `${__dirname}/content/pages`,
|
||||
},
|
||||
},
|
||||
|
|
|
@ -22,7 +22,8 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
|
|||
exports.createPages = async ({ graphql, actions, reporter }) => {
|
||||
const { createPage } = actions
|
||||
|
||||
const result = await graphql(
|
||||
// Posts query
|
||||
const posts = await graphql(
|
||||
`
|
||||
{
|
||||
allMarkdownRemark(filter:{frontmatter: {draft: {ne: true}}, fields: {collection: {eq: "posts"}}}) {
|
||||
|
@ -39,19 +40,51 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
|
|||
)
|
||||
|
||||
// Handle errors
|
||||
if (result.errors) {
|
||||
if (posts.errors) {
|
||||
reporter.panicOnBuild(`Error while running GraphQL query.`)
|
||||
return
|
||||
}
|
||||
|
||||
// Create pages for each markdown file.
|
||||
const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
|
||||
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
|
||||
posts.data.allMarkdownRemark.edges.forEach(({ node }) => {
|
||||
createPage({
|
||||
path: `/posts${node.fields.slug}`,
|
||||
component: blogPostTemplate,
|
||||
// In your blog post template's graphql query, you can use pagePath
|
||||
// as a GraphQL variable to query for data from the markdown file.
|
||||
context: {
|
||||
slug: node.fields.slug,
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
const pages = await graphql(
|
||||
`
|
||||
{
|
||||
allMarkdownRemark(filter: {fields: {collection: {eq: "pages"}}}) {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
)
|
||||
|
||||
// Handle errors
|
||||
if (pages.errors) {
|
||||
reporter.panicOnBuild(`Error while running GraphQL query.`)
|
||||
return
|
||||
}
|
||||
|
||||
// Create pages for each markdown file.
|
||||
const pageTemplate = path.resolve(`src/templates/page.js`)
|
||||
pages.data.allMarkdownRemark.edges.forEach(({ node }) => {
|
||||
createPage({
|
||||
path: node.fields.slug,
|
||||
component: pageTemplate,
|
||||
context: {
|
||||
slug: node.fields.slug,
|
||||
},
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
@import "./variables.scss";
|
||||
|
||||
.pageWrapper {
|
||||
text-align: left;
|
||||
}
|
|
@ -0,0 +1,27 @@
|
|||
import React from "react"
|
||||
import { graphql } from "gatsby"
|
||||
import Layout from "../components/layout"
|
||||
import styles from "../styles/page.module.scss"
|
||||
|
||||
export default function Page({ data }) {
|
||||
const page = data.markdownRemark
|
||||
return (
|
||||
<Layout>
|
||||
<div className={styles.blogPostWrapper}>
|
||||
<h1>{page.frontmatter.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{ __html: page.html }} />
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
export const query = graphql`
|
||||
query($slug: String!) {
|
||||
markdownRemark(fields: { slug: { eq: $slug } }) {
|
||||
html
|
||||
frontmatter {
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
Loading…
Reference in New Issue