Gatsby.js新增頁面

[影片]Gatsby.js 未來的網頁04:新增頁面

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

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

layout.js vs pages

layout.js是網頁的整體結構,pages裡的頁面也是由layout.js調用(作為{children})。

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

Link

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

新增頁面

在pages裡新增一個JS文件,命名為page-3.js。輸入:

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

執行gatsby develop查看效果。

本文參與iT邦幫忙鐵人賽簡體

No comment yet, add your voice below!


Add a Comment

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Comment *
Name *
Email *
Website

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料