更现代化的建站方式——Gatsby.js系列教程(二):了解Gatsby概貌&基础概念

Gatsby工程目录

创建gatsby工程后(如果不会创建,可参见上节),用VSCode打开,目录如图所示:

标准的Node工程目录结构,根目录包含一个package.json。

  • src 源码目录
  • public 构建后生成到此目录

熟悉一下Gatsby界面

如上节所讲,进入工程根目录,运行$ gatsby develop以启动开发模式。浏览器https://localhost:8000 可以看到界面。

打开src/page/index.js,此文件描述的就是你看到的界面,有hello world字样。

它是一个React组件,如果你还不熟悉React,没关系,你现在只需要知道这个文件描述了一个界面,你会看到熟悉的div等html元素,后面会讲React的相关知识。

试着修改一下hello world,去浏览器你会发现界面立即改变了。这就是Gatsby的热重载机制,以提高开发效率。

热重载:本质上,当您运行Gatsby开发服务器时,Gatsby站点文件在后台会被“监视”——任何时候保存文件,您的更改都会立即在浏览器中反映出来。您不需要硬刷新页面或重新启动开发服务器。

JSX:

js的扩展语法,React用它描述界面。类似下面代码,混合xml和js:

import React from "react"

export default () => <div>Hello world!</div>

而纯js的写法更像下面这样:

import React from "react"

export default () => React.createElement("div", null, "Hello world!")

浏览器并不认识jsx,只是gatsby附带的工具把它转换成了浏览器认识的!

认识组件

组件是站点的构建块;它是描述UI(用户界面)的一部分的自包含代码。

简单说,在React中就是用来描述界面的jsx代码

在html中,我们就不再限于使用浏览器认识的标签,比如<button>,而是可以自定义<MyButton>这样。

界面组件

在gatsby中,任何定义在src/pages/*.js的React组件都是一个界面组件。

可以通过浏览器https://localhost:8000/* 来访问!

子组件

如果一个界面很大,很复杂,或者某一块界面许多地方要用到,比如Header,就可以把它抽离出来,封装成一个子组件,便于重用。然后在父组件中引用。

类似下面代码:

header.jsx:

import React from "react"

export default () => <h1>This is a header.</h1>

父组件引用header:

import React from "react"
import Header from "../components/header"

export default () => (
  <div style={{ color: `teal` }}>
    <Header />
    <p>Such wow. Very React.</p>
  </div>
)

浏览器就会把Header显示出来:

gatsby-compnoent

gatsby习惯将其放到 src/components/*.js

Props

如果你了解过 React、Vue、Angular等框架,就发现组件的概念早已不新鲜,大家都是这么做的,而Props则是输入属性,给组件传值用的!

如:

<Header headerText="About Gatsby" />

你可以在组件jsx中,这么访问它:

<h1>{props.headerText}</h1>

布局组件

布局组件是指要在多个页面上共享的站点的部分。

如,GATSBY站点通常会有一个具有共享头和页脚的布局组件。其他常见的包括侧栏或导航菜单。

页面间链接

使用<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>
)

Gatsby<Link />组件用于在站点内的页与页之间进行链接。对于GATSBY站点未处理的页面的外部链接,请使用常规HTML<a>标签

构建与部署

$ gatsby build

然后生成静态文件到public/目录下,可将此目录上传到任何静态服务,比如Github Page。


斜杠青年:独立开发者/业余交易员/传统文化爱好者

更多原创尽在公众号: 「优雅的程序员呀」。全栈。程序员赚钱之道。优雅的技术,优雅的赚钱。

关注公众号,可以加我好友交流,也可加群技术交流哦。

发布了9 篇原创文章 · 获赞 2 · 访问量 1761
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览