Gatsby + DatoCMS，如何添加新页面？

Gatsby是一个基于React的静态网站生成器，而DatoCMS是一个内容管理系统。结合使用Gatsby和DatoCMS可以方便地创建和管理静态网站内容。

要添加新页面，可以按照以下步骤进行操作：

在DatoCMS中创建一个新的页面模型：登录到DatoCMS后台，创建一个新的页面模型，可以命名为"Page"或者其他适合的名称。在页面模型中，可以定义页面的各种字段，如标题、内容、图片等。
在Gatsby项目中安装并配置gatsby-source-datocms插件：在Gatsby项目的根目录下，使用命令行工具运行以下命令安装插件：

npm install gatsby-source-datocms

然后，在项目的gatsby-config.js文件中添加以下配置：

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-datocms",
      options: {
        apiToken: "YOUR_DATOCMS_API_TOKEN",
      },
    },
  ],
}

将"YOUR_DATOCMS_API_TOKEN"替换为你在DatoCMS中生成的API token。

创建一个新的页面模板组件：在Gatsby项目的src目录下，创建一个新的React组件，可以命名为"PageTemplate"或者其他适合的名称。在该组件中，可以使用GraphQL查询获取DatoCMS中的页面数据，并将其渲染到页面上。
创建一个新的页面：在Gatsby项目的src/pages目录下，创建一个新的JavaScript文件，可以命名为"newPage.js"或者其他适合的名称。在该文件中，导入之前创建的页面模板组件，并使用Gatsby的createPage函数创建一个新的页面，同时将DatoCMS中的页面数据传递给页面模板组件。

示例代码如下：

import React from "react"
import { graphql } from "gatsby"
import PageTemplate from "../path/to/PageTemplate"

const NewPage = ({ data }) => {
  const pageData = data.datoCmsPage // 根据页面模型的名称获取数据
  return <PageTemplate data={pageData} />
}

export const query = graphql`
  query($slug: String!) {
    datoCmsPage(slug: { eq: $slug }) {
      # 在这里定义需要获取的页面字段
      title
      content
      # ...
    }
  }
`

export default NewPage