iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
Modern Web

雖然你不是木村拓哉,但它也可以讓你變很行 - Gatsby.js系列 第 24

[Day 24] - 動態導覽列 ( Dynamic Navigation )

身為一個專業的網站,怎麼可以讓使用者在我們的網站中迷路了呢?
所以今天我們要來做導覽列 ( Nav Bar ),我們會用 Gatsby 中的資料來動態的產生,而資料的位置,我們能放在 API、CMS、甚至我們之前用的 MD 或 YAML 中。

而今天我們會用幾個步驟來達成這個需求

  1. 將數據放到專案的設定中
  2. 使用 GraphQL 來查詢
  3. 使用 靜態查詢 ( StaticQuery ) 來將資料放到組件中
  4. 呈現動態導覽列

環境設定

而初始樣板我們會用 gatsby-starter-default 這套樣板來開始,就讓我們一起在連假的第一天努力奮鬥吧!

首先我們用以下指令來建立專案吧!

gatsby new dynamic-navigation https://github.com/gatsbyjs/gatsby-starter-default

接著我們輸入 gatsby develop 來開啟開發伺服器來看看初始樣板的畫面

https://ithelp.ithome.com.tw/upload/images/20201009/20109495WLKhNbiFnM.png

成功開啟後,我們現在來把我們的路由表設定在 gatsby-config 的 siteMetadata 中,就如下圖中的 menuLinks Array

https://ithelp.ithome.com.tw/upload/images/20201009/20109495z8uK7sH4ih.png

設定完成後,我們先開啟 GraphiQL 來試著 Query 看看,成功的話應該會如下圖右側一般,顯示我們剛剛新增的資料

https://ithelp.ithome.com.tw/upload/images/20201009/201094953dJaT0D7qk.png

製作導覽列元件

接著,我們要來在現有的 Layout 上擴增功能,首先我們先到 src/layout.js 檔案中,可以找到這麼一段

const data = useStaticQuery(graphql`
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`)

我們要在現有的靜態查詢上再多撈幾個欄位進來,而因為 layout.js 是組件,我們在組件要使用 GraphQL 查詢的話,必須使用 Gatsby V2 新引入的靜態查詢 ( StaticQuery ) ,如果對於這個名詞很陌生的讀者,可以參考這篇 Day 11 - 靜態查詢 ( Static Query )

接著我們來改寫 Query 的內容吧!

const data = useStaticQuery(graphql`
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
		  menuLinks {
			name
			link
		  }
      }
    }
  }
`)

改寫完 Query 後,我們要改寫下面的 JSX 的部分,我們將原本用來 Render Header 元件的部分

<Header siteTitle={data.site.siteMetadata.title} />

改寫成以下程式碼,我們將查詢回來的 menuLinks 與標題作為 Props 傳到 Header 中,接下來我們就要去改寫 Header 元件來對應我們傳入的資料囉!

<Header menuLinks={data.site.siteMetadata.menuLinks} siteTitle={data.site.siteMetadata.title} />

改完上面的讀者,我們來到 src/components 目錄下,打開 header.js 這支檔案,我們要改的地方有兩個

  1. 讓 Header 元件接收並解構我們從上層傳下來的資料
  2. 用這筆資料去跑迴圈並渲染出我們要的 HTML 結構

第一步相當的簡單,我們只要在參數中帶入我們要解構出的變數名稱即可,就如下面程式碼一般

const Header = ({ siteTitle, menuLinks }) => (

接著,我們在 Header 元件中加入以下結構來顯示我們的導覽列元件

 <div>
   <nav>
     <ul style={{ display: "flex", flex: 1 }}>
       {menuLinks.map(link => (
         <li
           key={link.name}
             style={{
               listStyleType: `none`,
               padding: `1rem`,
             }}
         >
           <Link style={{ color: `white` }} to={link.link}>
             {link.name}
           </Link>
         </li>
       ))}
     </ul>
   </nav>
 </div>

完整的 Header 結構如下圖一般,讀者用來參考

https://ithelp.ithome.com.tw/upload/images/20201009/20109495sms57fMftH.png

最後,我們就重啟開發伺服器來看看我們的成品吧!

https://ithelp.ithome.com.tw/upload/images/20201009/20109495MEebTTsH2r.png

讀者們可以發現在網站標題下方多了一排連結,就是我們用 gatsby-config 中的資料來渲染出來的,讀者可以再修飾一下外觀,讓網站更漂亮、更吸引人唷!

參考資料

Gatsby - Creating Dynamic Navigation


上一篇
[Day 23] - Gatsby Image
下一篇
[Day 25] - 會員驗證 ( User Authentication )
系列文
雖然你不是木村拓哉,但它也可以讓你變很行 - Gatsby.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言