Skip to main content

基本使用

要安装 Gatsby 和 Node.js,建议使用 Homebrew。 开始做一些设置可以免去以后很多麻烦!

Gatsby CLI 可通过 npm 安装,命令行运行 npm install -g gatsby-cli 进行全局安装。

要查看可用的命令,请运行 gatsby --help

开始

gatsby new hello-world <https://github.com/gatsbyjs/gatsby-starter-hello-world>
cd hello-world
gatsby develop

//解释
//gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]

每个定义在 src/pages/*.js 中的 React 组件,在浏览器里都是一个页面。让我们动手来看看。

新建一个文件,路径是 src/pages/about.js

访问这个页面 http://localhost:8000/about/ 即可

连接不同页面

来看看 Gatsby 网站的路由功能。

<Link to="/contact/">Contact</Link>

构建和部署

gatsby build

使用CSS

全局样式 global.css

├── package.json
├── src
│   └── pages
│   └── index.js
│   └── styles
│   └── global.css

新建文件 gatsby-browser.js

├── package.json
├── src
│   └── pages
│   └── index.js
│   └── styles
│   └── global.css
├── gatsby-browser.js

导入样式

gatsby-browser.js


import "./src/styles/global.css"
// 或者:
// require('./src/styles/global.css')

注意:CommonJS 格式的(require)和 ES Module 格式的(import)语法都可以在这里使用。 如果你不确定选择哪个,通常最好使用 import。 但是,当处理仅在 Node.js 环境中运行的文件时(如 gatsby-node.js),则需要使用 require。

**组件范围内 CSS**

文件名以 .module.css 结尾,而不是通常的 .css 结尾。 这是告诉 Gatsby 该 CSS 文件应作为 CSS 模块而不是纯 CSS 处理的方式。

import React from "react"
import containerStyles from "./container.module.css"

export default ({ children }) => (
<div className={containerStyles.container}>{children}</div>
)
.container {
margin: 3rem auto;
max-width: 600px;
}

布局组件

import React from "react"
export default ({ children }) => (
<div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
{children}
</div>
)

引入

import React from "react"
import Layout from "../components/layout"

export default () => (
<Layout>
<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>
</Layout>
)

参考文档