如何将包含Markdown的YAML转换为在Gatsby中显示

gatsby new my-gatsby-project

cd my-gatsby-project

npm install gatsby-transformer-remark gatsby-plugin-react-helmet react-helmet

module.exports = {
  plugins: [
    'gatsby-transformer-remark',
    'gatsby-plugin-react-helmet'
  ]
}

import React from 'react'
import { graphql } from 'gatsby'
import { Helmet } from 'react-helmet'

const MarkdownPage = ({ data }) => {
  const { markdownRemark } = data
  const { frontmatter, html } = markdownRemark

  return (
    <div>
      <Helmet>
        <title>{frontmatter.title}</title>
      </Helmet>
      <h1>{frontmatter.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  )
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`

export default MarkdownPage

import React from 'react'
import { graphql } from 'gatsby'
import MarkdownPage from '../pages/markdownPage'

const MarkdownTemplate = ({ data }) => {
  return (
    <MarkdownPage data={data} />
  )
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`

export default MarkdownTemplate

const path = require('path')

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  return new Promise((resolve, reject) => {
    const markdownTemplate = path.resolve('src/templates/markdownTemplate.js')

    resolve(
      graphql(`
        {
          allMarkdownRemark {
            edges {
              node {
                fields {
                  slug
                }
              }
            }
          }
        }
      `).then(result => {
        if (result.errors) {
          console.error(result.errors)
          reject(result.errors)
        }

        result.data.allMarkdownRemark.edges.forEach(({ node }) => {
          createPage({
            path: node.fields.slug,
            component: markdownTemplate,
            context: {
              slug: node.fields.slug
            }
          })
        })
      })
    )
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === 'MarkdownRemark') {
    const value = path.basename(node.fileAbsolutePath, '.md')

    createNodeField({
      name: 'slug',
      node,
      value: `/${value}`
    })
  }
}

gatsby develop