iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0
Modern Web

PWA, Severless, GraphQL實作系列 第 4

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

  • 分享至 

  • xImage
  •  

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

YouTube Video:

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

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查看效果。

同步發表於: NodeJust.com


上一篇
[影片]Gatsby.js 未來的網頁03:File Structure
下一篇
[影片]Gatsby.js 未來的網頁05:安裝Plugin
系列文
PWA, Severless, GraphQL實作10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言