如何在Gatsby.js中动态设置静态html文件中的内容

import React from "react"
import { graphql } from "gatsby"

const MyPage = ({ data }) => {
  const content = data.myJson.content

  return (
    <div>
      <h1>动态设置的内容：</h1>
      <p>{content}</p>
    </div>
  )
}

export const query = graphql`
  query {
    myJson {
      content
    }
  }
`

export default MyPage

import React from "react"

const MyTemplate = ({ pageContext }) => {
  const { content } = pageContext

  return (
    <div>
      <h1>动态设置的内容：</h1>
      <p>{content}</p>
    </div>
  )
}

export default MyTemplate

module.exports = {
  // ...
  plugins: [
    // ...
  ],
  // ...
  createPages: async ({ graphql, actions }) => {
    const { createPage } = actions
    const result = await graphql(`
      query {
        allMyJson {
          edges {
            node {
              content
            }
          }
        }
      }
    `)

    result.data.allMyJson.edges.forEach(({ node }) => {
      createPage({
        path: `/my-page/${node.content}`,
        component: require.resolve("./src/templates/my-template.js"),
        context: {
          content: node.content,
        },
      })
    })
  },
}