Gatsby 学习 - 01 Gatsby 介绍、创建页面

最新推荐文章于 2025-03-02 15:03:27 发布

皮蛋很白

最新推荐文章于 2025-03-02 15:03:27 发布

阅读量1.1k

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/u012961419/article/details/119041473

版权

react 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了Gatsby v3的使用，包括其工作流程、优势、创建项目步骤和关键组件如Link组件。通过数据源、构建过程和编程式创建页面的方法，展示了如何利用Gatsby快速生成SEO友好的静态网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文 Gatsby 版本为 v3。

Gatsby

介绍

Gatsby 是一个基于 React 的静态站点生成器。

Gatsby 通过 React 开发应用，当应用开发完成后，Gatsby 可以把这个 React 应用转化成静态的 HTML 应用。

静态应用的优势

访问速度快
更利于 SEO 搜索引擎的内容抓取
部署简单

工作流程

在 Gatsby 应用的工作流程中主要分为了三个部分：

DATA SOURCES - 数据源
- Gatsby 应用中的数据可以来自 Markdown JSON CMS数据 API 数据等
- 应用中可以同时存在多个数据源
BUILD - 开发与构建
- 当开启开发服务器的时候
  - Gatsby 首先会从外部数据源中获取所有的数据
  - 然后把获取到的数据，统一放到 GraphGL 这个数据层当中
  - 当进行页面开发的时候，需要从这个数据层中获取数据
- 当执行构建命令的时候
  - Gatsby 还是会先从外部数据源中获取数据
  - 然后把所有数据再次放到 GraphGL 数据层当中
  - Gatsby 会把数据层中的数据和页面进行组合生成静态的 HTML 页面
- 当静态的 HTML 页面生成后，就可以进行部署了
DEPLOY - 部署

在这里插入图片描述

框架特性

开发体验：基于 React 和 GraphQL，结合了 webpack，babel，react-router 等前端领域中最先进工具。
SEO 友好：采用数据层和 UI 层分离而不失 SEO 的现代前端开发模式。
用户体验：数据预读取，在浏览器空闲的时候预先读取链接对应的页面内容。使静态页面拥有 SPA 应用的用户体验。
数据来源多样化：Headless CMS，markdown，API 等
功能插件化：Gatsby 中提供了丰富且功能强大的各种类型的插件，可以按需安装。

创建 Gatsby 项目

gatsby-cli 要求 nodejs 版本至少是 v12.13.0。

全局安装脚手架工具：

npm install -g gatsby-cli

创建一个自定义站点：

gatsby new [<site-name>]

也可以从 gatsby 提供的模板（官方称为 Starter）克隆：

gatsby new [<site-name> [<starter-url>]]
# gatsby new gatsby-demo https://github.com/gatsbyjs/gatsby-starter-hello-world
# hello-world 只包含一些基本的依赖

启动：

# 切换到站点目录
cd <site-name>
# 启动开发服务器
gatsby develop
# 或 npm start 或 npm run develop 它们实际执行的都是 gatsby develop

# 访问：http://localhost:8000

创建页面

基于文件的路由系统创建页面

Gatsby 框架内置基于文件的路由系统，页面组件被放置在 src/pages 文件夹中。

与 Next.js 不同，组件文件中必须引入 React。

// src\pages\list.js
import React from "react"

export default function List() {
  return <div>List Page</div>
}

访问：http://localhost:8000/list

以编程的方式创建页面

基于同一个模板创建多个 HTML 页面，有多少数据就创建多少页面。

比如，商品详情页面，有多少商品就生成多少商品详情展示页面。

具体方式：

在项目根目录下创建 gatsby-node.js 文件
- gatsby-node.js 用于存放 Gatsby Node APIs，用于定制或扩展功能。
- 该文件中写的都是 Node.js 代码，所以要遵循 CommonJS 模块化规范。
文件导出对象中添加 createPages 函数
- 该函数在构建应用时被调用
- 该函数提供对 createPage 操作的访问，该操作是以编程方式创建页面的核心。
在 createPages 内部获取模板绝对路径，获取组件所需数据，最终根据模板和数据，调用 createPage 方法，创建页面路由

首先创建一个模板组件：

// src\templates\person.js
import React from "react"

export default function Person(props) {
  console.log(props)
  // pageContext 是传递给模板的数据
  const { pageContext } = props
  const { name, age } = pageContext
  return (
    <div>
      <span>{name}</span>
      <span>{age}</span>
    </div>
  )
}

然后创建 gatsby-node.js：

// gatsby-node.js

// 创建页面
function createPages({ actions }) {
  // 获取模板绝对路径
  const template = require.resolve("./src/templates/person.js")
  // 获取组件所需数据
  const persons = [
    {
      slug: "zhangsan",
      name: "张三",
      age: 20,
    },
    {
      slug: "lisi",
      name: "李四",
      age: 30,
    },
  ]
  // 根据模板和数据创建页面
  const { createPage } = actions
  persons.forEach(person => {
    createPage({
      path: `/person/${person.slug}`, // 页面访问地址
      component: template, // 模板绝对路径
      context: person, // 传递给模板的数据
    })
  })
}

module.exports = { createPages }

因为该方法是在构建应用的时候去执行，所以需要重新启动应用。

保存 gatsby-node.js 文件时浏览器也会弹出提示，帮助开发者重启构建：

The develop process needs to be restarted for the changes to gatsby-node.js to be applied.
Do you want to restarted the develop process now?

点击确定等待 Gatsby restart 后即可访问 http://localhost:8000/person/zhangsan

Link 组件

在 Gatsby 框架中页面跳转通过 Link 组件实现。

// src\pages\index.js
import React from "react"
import { Link } from "gatsby"

export default function Home() {
  return <div>
    <Link to="/person/zhangsan">张三</Link>
    <Link to="/person/lisi">李四</Link>
  </div>
}