gatsby new xxxx https://github.com/gatsbyjs/gatsby-starter-hello-world
npm install redux react-redux redux-saga- 详情见
gatsby-browser.js和gatsby-ssr.js saga: 干异步的活,vuex 中的 actionsreducer: 干同步的活,vuex 中的 mutations
npm run buildnpm run serve
npm install gatsby-plugin-create-client-paths- 然后在
gatsby-config.js中配置上面的插件 - 在
pages文件夹下新建app.js, 在这里配置客户端路由规则
- 在
components下新建PrivateRoute, 然后在app.js中引入这个组件
npm install @material-ui/corenpm install gatsby-plugin-material-ui或者
npm install sass gatsby-plugin-sass- 在
gatsby-config.js中的plugins中添加gatsby-plugin-sass
- 在
pages文件下创建不同的.js文件
- 基于同一个模板创建多个HTML页面, 有多少数据就创造多少页面
- 比如商品详情页面,有多少商品就生成多少商品详情展示页面
// createPages 方法用于创建页面
// Gatsby 在构建应用时会调用改方法
// 该方法需要在 gatsby-node.js 文件中定义
function createPages({actions}){
const { createPage } = actions
// 获取模板的绝对路径
// 获取组件所需数据
// 根据模板和数据创建页面
}
// nodejs 运行
module.exports = { createPages }- 在
Gatsby框架中提供了一个统一的存储数据的地方,叫做数据层 - 在应用构建时,
Gatsby会从外部获取数据并将数据放入数据层, 组件可以直接从数据层查询数据 - 数据层使用
GraphQL构建 - 调式工具:
localhost:8000/___graphql
- 在组件文件中导出查询命令, 框架执行查询并将结果传递给组件的
prop对象, 存储在prop对象的data属性中
import { graphql } from 'gatsby'
function PageComponent({ data }){
return <div>
{ data.site.siteMetadata.title}
</div>
}
export const query = graphql`
query {
site {
siteMetadat {
title
}
}
}
`- 通过钩子函数
useStaticQuery进行手动查询
import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
const Header = () => {
// query 后可以不加查询名称
const data = useStaticQuery(graphql`
query {
site {
siteMetadata {
title
author
}
}
}
`)
const { title, author } = data.site.siteMetadata
return (
<div>
<p>site title: {title}</p>
<p>site author: {author}</p>
</div>
)
}
export default HeaderGatsby框架内置插件系统,插件时为应用添加功能的最好的方式Gatsby有三种类型的插件:数据源插件(source),数据转换插件(transformer),功能插件(plugin)
- 数据源插件(source): 负责从应用外部获取数据, 将数据统一放在
Gatsby的数据层中 - 数据转换插件(transformer): 负责转换特定类型的数据格式, 比如将
markdown文件中的内容转换为对象形式 - 功能插件(plugin): 为应用提供功能, 比如通过插件让应用支持
less或者TypeScript
- 是静态资源文件夹, 在浏览中可以直接访问
http://localhost:8000/images/product-1.jpg
- 插件-1:
gatsby-source-filesystem: 将本地文件中的数据添加至数据层 - 插件-2:
gatsby-transformer-json: 将原始JSON字符串转换为JavaScript对象
- 安装
npm install gatsby-source-filesystem gatsby-transformer-json
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: "gatsby-source-filesystem",
// 将 json 文件夹中的 json 文件添加到数据层中
options:{
name: "json",
path: `${__dirname}/json/`
}
},
// 无需其他配置, 直接写插件名字即可.
"gatsby-transformer-json"
]
}- 配置完插件需要重新启动
- 会生成两类数据 以
all开头的数据(查询所有数据), 没有all的数据(查询单个数据) - 具体请参照
src/page/product.js效果:http://localhost:8000/products
gatsby-source-filesystem用于将本地文件信息添加到数据层gatsby-plugin-sharp提供本地图像的处理功能(调整图像尺寸,压缩图像体积等)gatsby-transformer-sharp: 将gatsby-plugin-sharp插件处理后的图像信息添加到数据层gatsby-image: React组件, 优化图像显示, 基于gatsby-tranformer-sharp插件转化后的数据
- 生成多个具有不同宽度的图像版本, 为图像设置
srcset和sizes属性, 因此无论使用的是什么设备都能加载到合适大小的图片 - 使用 模糊处理 技术, 其中将一个20px宽的小图像显示为占位符, 直到实际图像下载完成为止
- 命令
npm install gatsby-plugin-sharp gatsby-transformer-sharp gatsby-image - 命令
cnpm install gatsby-plugin-sharp gatsby-transformer-sharp gatsby-image - 为了保证
gatsby-plugin-sharp下载成功, 需要安装一个模块mirror-config-china
// 'gatsby-plugin-sharp', 还差这个没有下载成功gatsby-source-filesystem用于将本地文件信息添加到数据层gatsby-transformer-remark将数据层原始markdown文件转换为对象形式npm install gatsby-transformer-remark
# 重新构建查询数据, 添加 slug 作为请求标识, slug值作为文件名称
gatsby.md -> /posts/gatsby
react.md -> /posts/react// gatsby-node.js
// 重新构建查询数据, 添加 slug 作为请求标识, slug 值为文件名称
const onCreateNode = ({ node, actions }) => {
const { createNodeField } = actions
if (node.internal.type === 'MarkdownRemark') {
const slug = path.basename(node.fileAbsolutePath, '.md')
createNodeField({
node,
name: 'slug',
value: slug,
})
}
}query MyQuery {
allMarkdownRemark {
nodes {
html
id
fields { // 添加的属性在这里
slug
}
frontmatter {
title
}
}
}
}
// 查询语句
query ($slug: String) {
markdownRemark (fields:{slug:{eq:$slug}}){
html
frontmatter {
date
title
}
id
}
}
// QUERY VARIABLES 查询参数
{
"slug": "react"
}
// GET RESULT 查询结果
{
"data": {
"markdownRemark": {
"html": "<p>Hello React, this is a post</p>",
"frontmatter": {
"date": "2048-11-12",
"title": "Hello React"
},
"id": "2de9b3e3-e3f3-5d8f-b05b-31e12c898423"
}
},
"extensions": {}
}gatsby-remark-images: 处理markdown中的图片, 以便在生产环境使用
// gatsby-config.js
{
resolve: 'gatsby-transform-remark',
options: {
plugins:["gatsby-remark-images"]
}
}-
- 下载插件
gatsby-source-strapi
- 下载插件
- 1.
gatsby-config.js中配置strapi的 服务地址
// 在 gatsby-config.js 中配置 strapi 的 服务地址
{
"resolve": "gatsby-source-strapi",
"options":{
apiURL: 'http://47.114.105.120:1337',
contentTypes: ['Post'] // 哪张表
}
}- 在
gatsby-node.js中创建页面,有多少数据就创建多少页面
async function createPagesPost({ graphql, actions }) {
const { createPage } = actions
// 1. 获取模板的文件的绝对路径
const template = require.resolve('./src/templates/post.js')
// 2. 获取页面的访问标识, 只查询 id 就可, id 是作为 传递给模板的查询数据
const { data } = await graphql(`
query {
allStrapiPost {
nodes {
id
}
}
}
`)
// 3. 创建页面
data.allStrapiPost.nodes.forEach((node) => {
createPage({
// 模板的绝对路径
component: template,
// 访问地址
path: `/post/${node.id}`,
// 传递给模板的查询数据
context: {
id: node.id,
},
})
})
}- 在
templates文件夹下配置post页面的模板, 通过id使用graphql查询post详情
export default function Article({ data }) {
return (
<div>
<p>{data.strapiPost.title}</p>
<div dangerouslySetInnerHTML={{ __html: data.strapiPost.content }}></div>
</div>
)
}
// gatsby 会帮助我们自动执行,会根据 gatsby-node中的
// 的 id 匹配过来
export const query = graphql`
query($id: String) {
strapiPost(id: { eq: $id }) {
is_publish
content
id
title
strapiId
}
}
`- 数据源插件负责从
Gatsby应用外部获取数据, 创建数据查询节点供开发者使用
gatsby-clean清除上一次的构建内容- 在项目根目录下创建
plugins文件夹, 在此文件中继续创建具体的插件文件夹, 比如gatsby-source-mystrapi文件夹 - 在插件文件夹中创建
gatsby-node.js文件 - 插件实际上就是
npm包 - 导出
sourceNodes方法用于获取外部数据, 创建数据查询节点 - 在
gatsby-config.js文件中配置插件, 并传递插件所需要的配置参数 restart application
transformer插件将source插件提供的数据转换为新的数据.
- 在
plugins文件夹中创建gatsby-transformer-xml文件夹 - 在插件中文件夹中创建
gatsby-node.js文件 - 在文件中导出
onCreateNode方法用于构建Gatsby查询节点 - 根据节点类型筛选
xml节点node.internal.mediaType -> applicaiton/xml - 通过
loadNodeContent方法读取节点中的数据 - 通过
xml2js将xml数据转换为对象 - 将对象转换为
Gatsby查询节点
gatsby-plugin-react-helmetreact-helment是一个组件, 用于控制页面元素据, 这对 SEO 非常重要- 此插件将页面元数据添加到
Gatsby构建的静态HTML页面中 npm install gatsby-plugin-react-helmet react-helmet- 参考
components/SEO.js和src/pages/index.js或者src/pages/list.js下的使用SEO组件的代码.
- 在
gatsby应用中使用less - 下载插件
npm install --save gatsby-plugin-less - 配置插件:
plugins:['gatsby-plugin-less'] - 创建样式:
index.module.less - 引入样式:
import styles from './index.module.less'
Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
Have another more specific idea? You may want to check out our vibrant collection of official and community-created starters.
-
Create a Gatsby site.
Use the Gatsby CLI to create a new site, specifying the hello-world starter.
# create a new Gatsby site using the hello-world starter gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world -
Start developing.
Navigate into your new site’s directory and start it up.
cd my-hello-world-starter/ gatsby develop -
Open the source code and start editing!
Your site is now running at
http://localhost:8000!Note: You'll also see a second link:
http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.Open the
my-hello-world-starterdirectory in your code editor of choice and editsrc/pages/index.js. Save your changes and the browser will update in real time!
A quick look at the top-level files and directories you'll see in a Gatsby project.
.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
-
/node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. -
/src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template.srcis a convention for “source code”. -
.gitignore: This file tells git which files it should not track / not maintain a version history for. -
.prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent. -
gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser. -
gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail). -
gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. -
gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering. -
LICENSE: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license. -
package-lock.json(Seepackage.jsonbelow, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly). -
package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. -
README.md: A text file containing useful reference information about your project.
Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:
-
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
-
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.
