Gatsby.js 未來的網頁04：新增頁面

摘要： 今天要介紹的內容很簡單：如何在Gatsby中新增頁面。新增頁面的方法不只一種，今天先介紹最簡單的方法。 視訊教學連結 layout.js vs pages layout.js是網頁的整體結構，pages裡的頁面也是由layout.js呼叫（作為 {children} ）...

今天要介紹的內容很簡單：如何在Gatsby中新增頁面。新增頁面的方法不只一種，今天先介紹最簡單的方法。

視訊教學連結

layout.js vs pages

layout.js是網頁的整體結構，pages裡的頁面也是由layout.js呼叫（作為 {children} ）。

pages裡是各頁面的主體內容。

Link

在gatsby當中使用 Link 取代 a 連結。Link存放在gatsby裡面：

import { Link } from 'gatsby'

新增頁面

在pages裡新增一個JS檔案，命名為page-3.js。輸入：

import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'

const NewPage = () => (
<Layout>
<h1>Hi from the NEW page</h1>
<p>Welcome to the new page</p>
<Link to="/">Go back to the homepage</Link>
</Layout>
)

export default NewPage

接著，在pages裡的index.js中的Link那行下面加入：

<Link to="/page-3/">Go to NEW page</Link>

執行 gatsby develop 檢視效果。