React 静态站点生成器: Gatsby

React 静态站点生成器: Gatsby文章出处: 拉 勾 大前端 高薪训练营练习代码地址Gatsby 是一个静态站点生成器,官网地址是:https://www.gatsbyjs.cn/一、静态应用的优势访问速度快更利于 SEO 搜索引擎的内容抓取部署简单二、Gatsby 总览基于 React 和 GraphQL, 结合了 webpack, babel, react-router 等前端领域中最先进工具,开发人员开发体验好;采用数据层和UI层分离而不失 SEO 的现代前端开发
摘要由CSDN通过智能技术生成

React 静态站点生成器: Gatsby

文章出处: 拉 勾 大前端 高薪训练营

练习代码地址

Gatsby 是一个静态站点生成器,官网地址是:https://www.gatsbyjs.cn/

一、静态应用的优势

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

二、Gatsby 总览

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

三、创建 Gatsby 项目

  1. 全局安装脚手架工具
npm install gatsby-cli -g
  1. 创建项目

创建: gatsby new project-name https://github.com/gatsbyjs/gatsby-starter-hello-world
启动: gatsby developnpm 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
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值