React 静态站点生成器: Gatsby
文章出处: 拉 勾 大前端 高薪训练营
Gatsby 是一个静态站点生成器,官网地址是:https://www.gatsbyjs.cn/
一、静态应用的优势
- 访问速度快
- 更利于 SEO 搜索引擎的内容抓取
- 部署简单
二、Gatsby 总览
- 基于 React 和 GraphQL, 结合了 webpack, babel, react-router 等前端领域中最先进工具,开发人员开发体验好;
- 采用数据层和UI层分离而不失 SEO 的现代前端开发模式.对SEO非常友好;
- 数据预读取,在浏览器空闲的时候预先读取链接对应的页面内容.使静态页面拥有 SPA 应用的用户体验,用户体验好;
- 数据来源多样化: Headless CMS, markdown, API;
- 功能插件化, Gatsby 中提供了丰富且功能强大的各种类型的插件,用什么装什么。
三、创建 Gatsby 项目
- 全局安装脚手架工具
npm install gatsby-cli -g
- 创建项目
创建: gatsby new project-name https://github.com/gatsbyjs/gatsby-starter-hello-world
启动: gatsby develop
或 npm start
访问: localhost:8000
四、基于文件的路由系统
Gatsby 框架内置基于文件的路由系统,页面组件被放置在 src/pages/ 文件夹中
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
function createPages ({
actions}) {
const {
createPage } = actions
// 获取模板的绝对路径
const template = require.resolve('./src/templates/person.js')
// 获取模板所需要的数据
const persons = [{
slug: "zhangsan", name: '张三', age: 20}, {
slug: 'lisi', name: '李四', age: 30}]
// 根据模板和数据创建页面
persons.forEach(person => {
createPage({
// 模板绝对路径
component: template,
// 访问地址
path: `/person/${
person.slug}`,
// 传递给模板的数据
context: person
})
})
}
module.exports = {
createPages
}
src/templates/person.js
import React from 'react'
export default function Person({
pageContext}) {
const {
name, age } = pageContext
return (
<div>
Person {
name} {
age}
</div>
)
}
六、 Link 组件
在 Gatsby 框架中页面跳转通过 Link 组件实现
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>
}
七、 GraphQL 数据层
在 Gatsby 框架中提供了一个统的存储数据的地方,叫做数据层。
在应用构建时,Gatsby 会从外部获取数据并将数据放入数据层,组件可以直接从数据层查询数据。
数据层使用GraphQL构建。
调试工具: http://localhost:8000/___graphql
八、 GraphQL 数据查询
1. 页面组件
在组件文件中导出查询命令,框架执行查询并将结果传递给组件的 prop 对象.存储在 props 对象的 data 属性中。
import React from "react"
import {
Link, graphql} from 'gatsby'
export default function Home({
data}) {
console.log(data)
return <div>
<p>{
data.site.siteMetadata.title}</p>
<p>{
data.site