如何从单个JSON文件在Gatsby中生成多个页面？

嘿，作为刚接触Node.js和React的新手，能喜欢上Gatsby真的太赞了——它确实是个能让静态站点开发变得轻松的神器！针对你想用1000条JSON记录生成独立页面的需求，我给你整理了一套超适合新手的步骤和示例，完全不用怕复杂的概念，跟着做就能跑通：

第一步：准备你的JSON文件 #

首先把你的JSON文件放到项目里，比如放在src/data/records.json，先给个简单的示例结构（你可以替换成自己的）：

[
  {
    "id": "record-001",
    "title": "我的第一条记录",
    "description": "这是第一条记录的详细内容",
    "category": "教程"
  },
  {
    "id": "record-002",
    "title": "我的第二条记录",
    "description": "这是第二条记录的详细内容",
    "category": "笔记"
  }
]

第二步：创建页面模板 #

接下来要为每条记录创建一个模板页面，新建src/templates/record.js，这个模板会接收每条记录的数据并渲染成页面：

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

// 页面组件，接收props里的data
export default function RecordPage({ data }) {
  const record = data.recordJson // 这里的recordJson对应我们后面查询的节点类型
  return (
    <div className="record-page">
      <h1>{record.title}</h1>
      <p>分类：{record.category}</p>
      <div className="content">
        {record.description}
      </div>
    </div>
  )
}

// GraphQL查询，获取当前记录的详细数据
export const query = graphql`
  query($id: String!) {
    recordJson(id: { eq: $id }) {
      title
      description
      category
    }
  }
`

第三步：配置gatsby-node.js生成页面 #

这是核心步骤，我们要在gatsby-node.js里编写代码，读取JSON数据并为每条记录生成独立页面。这里分两种新手友好的方式：

方式一：直接读取JSON文件（无需GraphQL，更简单） #

如果你不想一开始就接触GraphQL，可以直接用Node.js的文件系统读取JSON：

const fs = require("fs")
const path = require("path")

// createPages是Gatsby的生命周期钩子，用来生成页面
exports.createPages = async ({ actions }) => {
  const { createPage } = actions

  // 读取JSON文件
  const records = JSON.parse(
    fs.readFileSync(path.join(__dirname, "src", "data", "records.json"), "utf-8")
  )

  // 遍历每条记录，生成页面
  records.forEach(record => {
    createPage({
      // 页面的路径，比如/records/record-001
      path: `/records/${record.id}`,
      // 用我们刚才创建的模板
      component: path.resolve("./src/templates/record.js"),
      // 传递给模板的上下文数据，模板里可以通过props.pageContext拿到
      context: {
        id: record.id,
      },
    })
  })
}

方式二：用Gatsby插件解析JSON（更符合Gatsby生态） #

如果你想学习Gatsby的标准流程，可以用官方插件来处理JSON，这样能通过GraphQL查询数据：

1. 先安装插件：

npm install gatsby-source-filesystem gatsby-transformer-json

2. 修改gatsby-config.js，添加插件配置：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
    `gatsby-transformer-json`,
  ],
}

3. 修改gatsby-node.js，用GraphQL查询数据来生成页面：

const path = require("path")

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

  // 查询所有JSON记录
  const result = await graphql(`
    query {
      allRecordJson {
        nodes {
          id
        }
      }
    }
  `)

  // 遍历查询结果，生成页面
  result.data.allRecordJson.nodes.forEach(node => {
    createPage({
      path: `/records/${node.id}`,
      component: path.resolve("./src/templates/record.js"),
      context: {
        id: node.id,
      },
    })
  })
}

第四步：测试运行 #

现在运行gatsby develop，等项目启动后，你就能访问http://localhost:8000/records/record-001这样的页面啦！

新手小贴士 #

• 如果你想让页面路径更友好（比如用标题代替id），可以用slugify包把标题转成合法的slug：先安装npm install slugify，然后在gatsby-node.js里导入const slugify = require("slugify")，然后把path改成/records/${slugify(record.title, { lower: true })}，记得同时在模板的查询里对应修改参数。
• 如果JSON文件很大（1000条记录），不用担心，Gatsby处理静态生成的效率很高，不会有性能问题。
• 开发模式下，修改gatsby-node.js后需要重启开发服务器才能生效哦！

内容的提问来源于stack exchange，提问作者Richard Petersen-Hall