我已经完成了Gatsby的官方教程
我一直很好奇Gatsby，于是试了一下！
几乎是官方的翻译，但仅作为备忘记录整理。由于官方的说明相当友好，因此会省略过于友好的部分（如节点设置和关于React的内容）进行整理。
1. Gatsby教程的基本基础
Gatsby有一个命令行界面（CLI），所以我们要进行安装。
$ npm install -g gatsby-cli
请在终端重新启动后，使用以下命令确认是否安装成功。
如果出现命令的说明，则表示成功！
$ gatsby --help
由于开始，官方为了让我们能够立即尝试Gatsby而准备了一个专用的启动器。
所谓的启动器是指在创建项目时指定网站的根本部分。我们将使用官方提供的gatsby-starter-hello-world启动器来创建网站。
$ gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
您可以使用 Gatsby new 命令来创建 Gatsby 项目。
hello-world 是一个任意的网站名称，它将成为文件夹的名称。
https://github.com/gatsbyjs/gatsby-starter-hello-world 是一个带有起始模板的 GitHub URL。
如果忽略这个 URL，将会分配默认的起始模板。
下一步是使用以下命令切换到文件夹，并启动开发模式。
$ cd hello-world
$ gatsby develop
如果出现错误，请删除 node modules 和 package-lock.json，然后执行 npm install。
node_module和public已经下载完成，localhost:8000已经启动！让我们打开http://localhost:8000/ 看看吧。
这太扫兴了！从这里开始的成功故事的感觉。
顺便说一下，Gatsby已经默认集成了热加载功能?。
2. 可以轻松使用React并尝试部署
Link组件也包含在标准库中。
import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"
export default () => (
<div style={{ color: `purple` }}>
<Link to="/contact/">Contact</Link>
<Header headerText="Hello Gatsby!" />
<p>What a world.</p>
<img src="https://source.unsplash.com/random/400x200" alt="" />
</div>
)
import React from "react"
export default props => <h1>{props.headerText}</h1>
import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"
export default () => (
<div style={{ color: `teal` }}>
<Link to="/">Home</Link>
<Header headerText="Contact" />
<p>Send us a message!</p>
</div>
)
请准备上述三个文件。组件也可以使用，而且可以看到链接正常工作。而且它还自动进行路由…真厉害。
让我们来部署一下吧
我尝试使用Surge进行部署。
这是我第一次使用Surge，但它非常方便易用。
$ npm i -g surge
在终端重新启动后，
$ gatsby build // buildファイル生成
$ surge public/ // デプロイ
在完成搜索public（surge public）之后，系统会要求您输入电子邮件地址和密码进行设置。如果设置成功，您即可访问由http://surge生成的字符串。该字符串的末尾通常类似于surge.sh。
3. 关于造型
###全局CSS
全局样式是不可或缺的。
作为简单的解决方案，在教程中建议准备样式表。
├── package.json
├── src
│ └── pages
│ └── index.js
│ └── styles
│ └── global.css
├── gatsby-browser.js
我们会按照这样的文件结构进行设置。
要添加的是style文件夹、global.css和gatsby-browser.js。
需要注意的是gatsby-browser.js必须是这个文件名。
html {
background-color: lavenderblush;
}
import "./src/styles/global.css"
// または:
// require('./src/styles/global.css')
当使用gatsby develop进行启动时，我认为背景样式被正确应用了。
这就像之前在React中苦苦挣扎的困难一下子消失了，感觉很不错。
根据官方说法，这是为了更快地开始并寻找更好的方式（共享布局组件），如果您有兴趣，可以稍微离题地查看这个链接。
### CSS模块
接下来我们将实现组件特定的CSS。
我们将创建以下组件。
import React from "react"
import containerStyles from "./container.module.css"
export default ({ children }) => (
<div className={containerStyles.container}>{children}</div>
)
然后创建主要的 container.module.css 文件。
.container {
margin: 3rem auto;
max-width: 600px;
}
.user {
display: flex;
align-items: center;
margin: 0 auto 12px auto;
}
.user:last-child {
margin-bottom: 0;
}
.avatar {
flex: 0 0 96px;
width: 96px;
height: 96px;
margin: 0;
}
.description {
flex: 1;
margin-left: 18px;
padding: 12px;
}
.username {
margin: 0 0 12px 0;
padding: 0;
}
.excerpt {
margin: 0;
}
通过将文件扩展名更改为 .module.css 而非 .css，Gatsby会将该文件解读为CSS模块而非全局CSS！
我们创建一个名为 http://localhost:8000/about-css-modules 的文件，并尝试查看它。
import React from "react"
import Container from "../components/container"
export default () => (
<Container>
<h1>About CSS Modules</h1>
<p>CSS Modules are cool</p>
</Container>
)
我相信您可以看到containerStyles.container正常生效。
实际上，在开发者模式中查看样式时，我想您会发现类名是一串非常长的字符串。
这是为了确保它们总是唯一生成的。
请尝试将以下代码复制粘贴到about-css-modules.js中。
我相信您会看到样式已经正确生效。
import React from "react"
import styles from "./about-css-modules.module.css"
import Container from "../components/container"
console.log(styles)
const User = props => (
<div className={styles.user}>
<img src={props.avatar} className={styles.avatar} alt="" />
<div className={styles.description}>
<h2 className={styles.username}>{props.username}</h2>
<p className={styles.excerpt}>{props.excerpt}</p>
</div>
</div>
)
export default () => (
<Container>
<h1>About CSS Modules</h1>
<p>CSS Modules are cool</p>
<User
username="Jane Doe"
avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
/>
<User
username="Bob Smith"
avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
excerpt="I'm Bob Smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
/>
</Container>
)
关于CSS-in-JS的内容在教程中没有提到，但是大多数CSS库似乎都有针对gatsby的插件存在（太好了…）
据说Emotion和Styled Component有单独的教程，如果方便的话可以看一下。
在Gatsby中也支持Sass和Stylus等样式语言。
3. 关于Gatsby的扩展功能。
我們將學習如何使用Gatsby的插件，因為Gatsby被設計成可擴展的。
插件由社区成员创建，并且看起来有很多插件已经发布。
在公式教程中，我们使用Gatsby插件来学习Typography.js。Typography.js是一个可以轻松设置字体样式的API。
因为对文件夹进行了许多操作，所以我会创建一个新的文件夹。
$ gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-three
首先，需要安装必要的软件包。
应该安装的软件包在插件的安装页面中有介绍。
$ npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates
然后，将gatsby-config.js文件更改如下。
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}
请参考官方文档以了解详细的写作方法。
接下来，我们将写配置文件来使用typography.js。
请创建util文件夹，并将typography.js文件按照以下方式进行描述。
import Typography from "typography"
import fairyGateTheme from "typography-theme-fairy-gates"
const typography = new Typography(fairyGateTheme)
export const { scale, rhythm, options } = typography
export default typography
请将所有文件准备好后，关闭当前正在运行的服务器，再次使用gatsby develop命令启动服务器，并访问网站。
typography.js的样式已经加载完成了！太棒了！
复制并粘贴以下代码查看网站，相信您会体会到它变得更加漂亮的字体。
import React from "react"
export default () => (
<div style={{ margin: `3rem auto`, maxWidth: 600 }}>
<h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
<p>
What do I like to do? Lots of course but definitely enjoy building
websites.
</p>
</div>
)
4. 在《了不起的盖茨比》中对数据的处理方式
听说盖茨比开始使用GraphQL了。这感觉非常方便！
https://www.howtographql.com/
据说这里的教程非常推荐关于GraphQL。
初步浏览了一下，虽然是英文但是很易懂。
在Gatsby中，你可以直接导入非结构化数据（适用于小规模），也可以使用GraphQL插件（适用于大规模）。
我们先尝试使用GraphQL的方法吧！首先准备一个新项目。
$ gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world
$ cd tutorial-part-four
然后安装typography.js的Kirkham主题和CSS-in-JS库Emotion。
$ npm install --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion @emotion/core
您可以在此网站的”pick theme”页面上查看Typography的主题外观。
需要准备以下4个文件：2个页面组件、1个布局组件和1个字体设置文件。
import React from "react"
import { css } from "@emotion/core"
import { Link } from "gatsby"
import { rhythm } from "../utils/typography"
export default ({ children }) => (
<div
css={css`
margin: 0 auto;
max-width: 700px;
padding: ${rhythm(2)};
padding-top: ${rhythm(1.5)};
`}
>
<Link to={`/`}>
<h3
css={css`
margin-bottom: ${rhythm(2)};
display: inline-block;
font-style: normal;
`}
>
Pandas Eating Lots
</h3>
</Link>
<Link
to={`/about/`}
css={css`
float: right;
`}
>
About
</Link>
{children}
</div>
)
import React from "react"
import Layout from "../components/layout"
export default () => (
<Layout>
<h1>Amazing Pandas Eating Things</h1>
<div>
<img
src="https://2.bp.blogspot.com/-BMP2l6Hwvp4/TiAxeGx4CTI/AAAAAAAAD_M/XlC_mY3SoEw/s1600/panda-group-eating-bamboo.jpg"
alt="Group of pandas eating bamboo"
/>
</div>
</Layout>
)
import React from "react"
import Layout from "../components/layout"
export default () => (
<Layout>
<h1>About Pandas Eating Lots</h1>
<p>
We're the only site running on your computer dedicated to showing the best
photos and videos of pandas eating lots of food.
</p>
</Layout>
)
import Typography from "typography"
import kirkhamTheme from "typography-theme-kirkham"
const typography = new Typography(kirkhamTheme)
export default typography
export const rhythm = typography.rhythm
然后，按照以下方式编辑gatsby-config.js文件，并设置插件。
module.exports = {
plugins: [
`gatsby-plugin-emotion`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}
当执行 `gatsby develop` 之后，我想会出现一个页面上有熊猫图片的内容。?
我会从这个页面开始尝试执行查询！
请查看以下链接：http://localhost:8000/about/。
显示了标题为“关于熊猫大吃特吃”的页面。
如果要更改该页面名称，将需要调整此部分。
但是，如果将来网站变得更大规模，并且该标题在各个地方都被使用，我们就必须找到并修正所有相关的地方。这是非常麻烦且容易出错的。
因此，将这些数据整合在一起并从那里提取数据的方式更高效。
在Gatsby中，通过将其记录在gatsby-config.js的siteMetadata对象中，可以实现数据的集中管理。
module.exports = {
siteMetadata: {
title: `Title from siteMetadata`,
},
plugins: [
`gatsby-plugin-emotion`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}
在上述文件中定义数据后，按照以下方式设置使用数据的组件。
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default function About({ data }) {
return (
<Layout>
<h1>About {data.site.siteMetadata.title}</h1>
<p>
We're the only site running on your computer dedicated to showing the
best photos and videos of pandas eating lots of food.
</p>
</Layout>
)
}
export const query = graphql`
query {
site {
siteMetadata {
title
}
}
}
`
从gatsby中导入了graphql，并根据它创建了一个常量查询(query)。
请注意，这只能在页面组件中使用。
graphql的数据被传递到了使用该组件的props中。
请重新加载网站并访问about页面来进行确认，可以使用gatsby develop命令。
静态查询
在Gatsby的v2版本中引入的page组件之外，staticQuery是一个可在其他组件中使用的API。
使用useStaticQuery。
请将layout.js重新编写如下。
import React from "react"
import { css } from "@emotion/core"
import { useStaticQuery, Link, graphql } from "gatsby"
import { rhythm } from "../utils/typography"
export default function Layout({ children }) {
const data = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
}
}
}
`
)
return (
<div
css={css`
margin: 0 auto;
max-width: 700px;
padding: ${rhythm(2)};
padding-top: ${rhythm(1.5)};
`}
>
<Link to={`/`}>
<h3
css={css`
margin-bottom: ${rhythm(2)};
display: inline-block;
font-style: normal;
`}
>
{data.site.siteMetadata.title}
</h3>
</Link>
<Link
to={`/about/`}
css={css`
float: right;
`}
>
About
</Link>
{children}
</div>
)
}
如果重新编写gatsby-config.js中的title，您可以立即看到反映该更改的执行结果。
##5. 关于 Source Plugin
为了学习如何获取 Gatsby 的数据，我们首先需要了解 GraphiQL。
GraphiQL 是 GraphQL 的集成开发环境（IDE）。
由于 Gatsby 在标准设置中已经包含了 GraphiQL，您可以通过访问 http://localhost:8000/___graphql 来进行确认。
使用 option + 空格 或 shift + 空格键可以启用自动补完功能。
使用 command + 回车键是快速执行的快捷方式。非常方便。
源插件
如果存在相应的源插件，就可以从文件或内容管理系统（CMS）中提取数据。
这次我们将使用 gatsby-source-filesystem 作为示例。
$ npm install --save gatsby-source-filesystem
我将编辑gatsby-config.js文件。
module.exports = {
siteMetadata: {
title: `Title from siteMetadata`,
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`,
},
},
`gatsby-plugin-emotion`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}
当你重新启动服务器并再次访问http://localhost:8000/___graphql时，你会发现通过gatsby-source-filesystem添加了两个项目：allFile和file。请同时按下command键并点击allFile项目选项。这将在预先输入各个文件的id后，选择node部分的项目，以添加各个node下的项。
让我们通过JS从实际中获取这些值。创建一个新的my-file.js文件，并进行以下编辑。
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default ({ data }) => {
console.log(data)
return (
<Layout>
<div>Hello world</div>
</Layout>
)
}
export const query = graphql`
query {
allFile {
edges {
node {
relativePath
prettySize
extension
birthTime(fromNow: true)
}
}
}
}
`
当你实际检查页面时，你会发现可以在控制台中获取到allFile以下的内容。
以下是将这些代码实际转化为视图的内容。
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default ({ data }) => {
console.log(data)
return (
<Layout>
<div>
<h1>My Site's Files</h1>
<table>
<thead>
<tr>
<th>relativePath</th>
<th>prettySize</th>
<th>extension</th>
<th>birthTime</th>
</tr>
</thead>
<tbody>
{data.allFile.edges.map(({ node }, index) => (
<tr key={index}>
<td>{node.relativePath}</td>
<td>{node.prettySize}</td>
<td>{node.extension}</td>
<td>{node.birthTime}</td>
</tr>
))}
</tbody>
</table>
</div>
</Layout>
)
}
export const query = graphql`
query {
allFile {
edges {
node {
relativePath
prettySize
extension
birthTime(fromNow: true)
}
}
}
}
`
请尝试查看 http://localhost:8000/my-files。
以下是source Plugin的使用方式。接下来我们将学习Transformer Plugin。
Transformer Plugin的作用是处理source Plugin获取的数据。
6. 关于Transformer插件
在教程中，我们将使用Transformer插件将以Markdown格式编写的文件转换为HTML。
首先，需要准备Markdown文件。
---
title: "Sweet Pandas Eating Sweets"
date: "2017-08-10"
---
パンダ超かわいい.
超かわいいパンダのビデオあるよ.
<iframe width="560" height="315" src="https://www.youtube.com/embed/4n0xNbfJLR8" frameborder="0" allowfullscreen></iframe>
当再次访问http://localhost:8000/my-file时，你会发现sweet-pandas-eating-sweets.md的信息增加了。
安装Transformer插件以转换Markdown文件。
npm i --save gatsby-transformer-remark
需要将以下内容添加到gatsby-config中。
在教程中，它被插入到gatsby-plugin-emotion的上方。
层次结构与gatsby-plugin-emotion相同。
`gatsby-transformer-remark`,
请确保更改完gatsby-config后重新运行gatsby develop。
当您访问GraphiQL（http://localhost:8000/___graphql）时，
-
- allMarkdownRemark
-
- markdownRemark
- の2項目が追加されているのがわかるかと思います。
如果按照上述的方式進行選擇，我相信你會發現可以獲取到標記數據！只需按照以下方式設置主頁，即可自動生成文章列表。
import React from "react"
import { graphql } from "gatsby"
import { css } from "@emotion/core"
import { rhythm } from "../utils/typography"
import Layout from "../components/layout"
export default ({ data }) => {
console.log(data)
return (
<Layout>
<div>
<h1
css={css`
display: inline-block;
border-bottom: 1px solid;
`}
>
Amazing Pandas Eating Things
</h1>
<h4>{data.allMarkdownRemark.totalCount} Posts</h4>
{data.allMarkdownRemark.edges.map(({ node }) => (
<div key={node.id}>
<h3
css={css`
margin-bottom: ${rhythm(1 / 4)};
`}
>
{node.frontmatter.title}{" "}
<span
css={css`
color: #bbb;
`}
>
— {node.frontmatter.date}
</span>
</h3>
<p>{node.excerpt}</p>
</div>
))}
</div>
</Layout>
)
}
export const query = graphql`
query {
allMarkdownRemark {
totalCount
edges {
node {
id
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
}
excerpt
}
}
}
}
`
``
当我阅读这段代码时，我突然想知道frontmatter是什么？
据说刚才用三个连字符括起来的md文件部分将被解释为frontmatter，并可以用作元数据。
因为只有一个文章有点寂寞，所以让我们增加一个标记页。
---
title: "Pandas and Bananas"
date: "2017-08-21"
---
パンダはバナナを食べるの？ このビデオを見れはそれが事実だとわかります。
パンダはバナナが大好きみたいです。
<iframe width="560" height="315" src="https://www.youtube.com/embed/4SZl1r2O_bY" frameborder="0" allowfullscreen></iframe>
你看到了，已经添加了啊！
但是，新的文章是不是希望排在前面呢？
通过将参数传递给GraphQL，可以提取节点、排序和过滤信息。
具体请参阅官方指南：https://www.gatsbyjs.org/docs/graphql-reference/
如果是这种情况，你只需要将 index.js 中的 allMarkdownRemark 替换为下面的代码即可。
export const query = graphql`
query {
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
totalCount
edges {
...
目前只有顶部的文章列表，但还需要加入文章页面。
可以一个个地添加页面，但是让我们学习一下自动生成页面的方法吧。
从数据中自动生成页面
创建slug。
slug是指https://www.gatsbyjs.org/tutorial/part-seven/中的/tutorial/part-seven/部分。
在生成HTML页面时使用Markdown
-
- onCreateNode
createPages
の２つのgatsbyのAPIを学ぶ必要があります。
要使用 Gatsby 的 API，需要创建一个 gatsby-node.js 文件并导出一个函数。
exports.onCreateNode = ({ node }) => {
console.log(node.internal.type)
}
当Node被更新或创建时，上述的onCreateNode会被调用。
执行gatsby develop后，可以通过console.log在终端上看到许多Node的流动。
请将gatsby-node.js更改为以下内容。
exports.onCreateNode = ({ node, getNode }) => {
if (node.internal.type === `MarkdownRemark`) {
const fileNode = getNode(node.parent)
console.log(`\n`, fileNode.relativePath)
}
}
那么，我们将根据这个创建一个 Slug。实际上，上面的部分其实是gatsby-source-filesystem已经具备的功能。
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode }) => {
if (node.internal.type === `MarkdownRemark`) {
console.log(createFilePath({ node, getNode, basePath: `pages` }))
}
}
使用上述的实现方式，可以像以前的实现一样找到父节点并生成slug。
由于slug已经添加了，现在我们来生成node。可以使用createNodeFieldAPI。
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode, basePath: `pages`})
createNodeField({
node,
name: `slug`,
value: slug
})
}
}
可以在GraphiQL的allMarkdownRemark.edges.node.fields.slug中确认到已添加新的slug。
接下来将生成页面。
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode, basePath: `pages` })
createNodeField({
node,
name: `slug`,
value: slug,
})
}
}
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
const result = await graphql(`
query {
allMarkdownRemark {
edges {
node {
fields {
slug
}
}
}
}
}
`)
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
// Data passed to context is available
// in page queries as GraphQL variables.
slug: node.fields.slug,
},
})
})
}
请注意，graphql函数返回一个Promise。
我们使用result来遍历通过GraphQL获取的页面，并使用createPage来生成页面。
在context中指定的数据可以作为GraphQL给定页面的数据使用。
我们以./src/templates/blog-post.js作为模板，所以需要创建blog-post.js文件。
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default function BlogPost({ data }) {
const post = data.markdownRemark
return (
<Layout>
<div>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
</Layout>
)
}
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`
查询（$slug：String！）
！标记表示值是必需的。 这里已经定义了字符串的类型。
markdownRemark（fields: { slug: { eq: $slug } }）
这一部分使用了类似于MongoDB的指定方法来过滤对象的功能。
换句话说，它只获取字段的slug等于$slug的内容。
https://www.gatsbyjs.org/docs/graphql-reference/#query-variables
当您点击每个页面的链接时，您将能够确认页面是否已经生成，页面列表将会显示如上所述。
8. 通过项目构建和Lighthouse进行网站诊断
灯塔是什么？
(意译) 来自https://developers.google.com/web/tools/lighthouse/
Lighthouse是一个用于提升网页质量的开源自动工具。
可用于公共页面、需要认证的页面，以及任意类型的页面。
它可以检查性能、可访问性和渐进式 Web 应用等方面的问题。
首先，需要进行Gastby的构建，如果已经在运行开发模式，则需要先停止它，然后执行以下步骤。
$ gatsby build
如果可以构建成功，就键入命令以在本地确认生产环境。
$ gatsby serve
开始时会启动 http://localhost:9000/。
一旦启动，打开 Chrome 的开发工具。
打开”审核”选项卡。
点击”执行审核”，稍等片刻后将显示诊断结果。
非常方便！为了提高这些值，需要进行各种改进。
由于Gatsby提供了各种插件，使用它们来改进是一个不错的选择。
教程介绍了以下内容。
-
- gatsby-plugin-manifest (PWAのためのmanifest.webmanifestファイルを作成するプラグイン)
-
- gatsby-plugin-offline(PWAのためのserver worker用のプラグイン)
- gatsby-plugin-react-helmet(メタデータ編集のためのプラグイン)
以上就是，辛苦了。
【参考】请参考以下网站：https://www.gatsbyjs.org/tutorial/
