Gatsby GraphQL 数据页

目标

展示 Gatsby 核心模式：通过 GraphQL 查询 siteMetadata 和文件数据，在页面中渲染。这是 Gatsby 最典型的开发模式。

完整代码

1. gatsby-config.js

module.exports = {
  siteMetadata: {
    title: '毕设作品集',
    description: '展示我的毕业设计项目',
    author: '张三',
  },
  plugins: [
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: { name: 'projects', path: `${__dirname}/src/data/` },
    },
    'gatsby-transformer-json',
  ],
};

2. src/data/projects.json

[
  {
    "name": "校园3D导览",
    "tech": "Three.js + Vue",
    "description": "基于WebGL的校园建筑3D展示与导航系统",
    "stars": 5
  },
  {
    "name": "智能课表助手",
    "tech": "React + Node.js",
    "description": "自动排课冲突检测与可视化课程表",
    "stars": 4
  },
  {
    "name": "宿舍报修平台",
    "tech": "Angular + Spring Boot",
    "description": "在线报修工单管理与进度跟踪系统",
    "stars": 4
  }
]

3. src/pages/index.js

import * as React from 'react';
import { graphql } from 'gatsby';

const IndexPage = ({ data }) => {
  const { title, description, author } = data.site.siteMetadata;
  const projects = data.allProjectsJson.nodes;

  return (
    <main style={{ fontFamily: 'system-ui', maxWidth: 700, margin: '0 auto', padding: 20 }}>
      <header style={{ textAlign: 'center', padding: '40px 0' }}>
        <h1>{title}</h1>
        <p style={{ color: '#666' }}>{description}</p>
        <small>by {author}</small>
      </header>

      <h2>📂 项目列表 ({projects.length})</h2>
      <div style={{ display: 'grid', gap: 16 }}>
        {projects.map((p, i) => (
          <div
            key={i}
            style={{
              background: 'white',
              padding: 20,
              borderRadius: 12,
              boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
              borderLeft: `4px solid ${p.stars >= 5 ? '#f59e0b' : '#3b82f6'}`,
            }}
          >
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <h3 style={{ margin: 0 }}>{p.name}</h3>
              <span>{'⭐'.repeat(p.stars)}</span>
            </div>
            <p style={{ color: '#666', fontSize: '0.9em' }}>{p.tech}</p>
            <p>{p.description}</p>
          </div>
        ))}
      </div>
    </main>
  );
};

// GraphQL 页面查询
export const query = graphql`
  query IndexPageQuery {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
    allProjectsJson {
      nodes {
        name
        tech
        description
        stars
      }
    }
  }
`;

export default IndexPage;

export const Head = () => <title>毕设作品集</title>;

运行步骤

npm install -g gatsby-cli
gatsby new gatsby-demo
cd gatsby-demo
npm install gatsby-transformer-json gatsby-source-filesystem
# 替换上面文件
gatsby develop

预期输出

• 页面通过 GraphQL 查询 siteMetadata 获取标题
• 从 projects.json 读取项目列表渲染
• 5 星项目左边框为金色
• 访问 http://localhost:8000/___graphql 可交互式调试 GraphQL 查询