Gatsby.js 未來的網頁04:新增頁面
今天要介紹的內容很簡單:如何在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
檢視效果。