基本使用
要安装 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>
)