用 Nuxt.js 串接 data 做下拉式選單

用 Vue-cli 一陣子後,因為有 SEO 的需求,所以決定改用 Nuxt.js。

雖然 Vue-cli 也有套件 prerender-spa-plugin 可以做到預渲染的功能,但他無法預渲染動態路由,像是 /user/:id 這樣的路徑,因為預渲染是獲取已在的元素,但動態路由的元素狀態處於未知,所以無法取得對應的內容。當然,假使你的 Vue 專案都是靜態網頁,而且你也較熟悉 Vue-cli,那可以考慮用該套件即可,不需改用 Nuxt.js。


fetch 與 asyncData 的選擇

我們以往都是用 data() 存取資料,但 Nuxt.js 多了一個asyncData 的選擇,將資料放在 asyncData 底下以達到從伺服器端渲染頁面的效果,可以改寫如下:

JS
navBar.vue

頁面渲染前會執行 asyncData(),並將值塞回 data() 內,詳細內容可參考官網的 asyncData() 介紹

asyncData() 使用注意

asyncData() 雖然看似好用,卻只能在 pages/ 資料夾底下的 *.vue 才有作用,如果你的 vue 檔案是放在 components/ layouts/ 底下,是無法利用 asyncData() 存取資料的。

因此,可以改用 fetch 存取 components/layouts/ 裡的資料,改寫如下:

JS
navBar.vue

不過有看過一種說法是,asyncData() 適合用在覆蓋 data() 的資料上,fetch 則適合用在 vuex 上。所以我也不知道自己這樣寫是否有符合規範,如果有更好的方法歡迎留言給我!


製作下拉選單

這邊搭配 Bootstrap v5 來製作下拉選單,使用的是上方寫到的 navDatas[] 資料。我製作的是二層的下拉式選單 (dropdown menu),所以有比較多針對 class 的判斷式。

HTML
navBar.vue

以上。


後記

這篇不是教學,比較像是我寫 code 的筆記,因為對 Nuxt.js 不熟,很多觀念還沒有從頭看懂,所以也不敢亂教大家 XD。

後來因為有再搭配多國語系做選單,所以最後沒有使用 fetch 的方式產資料,有興趣的朋友可以參考看看:將 Nuxt.js 串接的資料改寫成多國語系

在 wp nav menu 前後增加自定義連結

WordPress 有一個很好用的 WP_nav_menu function,可以在 WordPress 控制台直接新增選單內容。

但要特別注意的是,如果我們想在新增有 class 或 id 的選單,就沒辦法直接從控制台新增,因為控制台的選單無法讓我們填寫 id 或 class。

選單只能讓我們新增連結文字、位置,以及屬性,如下圖:

因此我們可以利用 wp_nav_menu 提供的函式自己手動加上想要的連結。

假設今天我們希望在選單的後面加上以下語法:

HTML

可以先找到以下語法 (通常在 header.php) 裡:

PHP
header.php

這個語法就是用來設定 wp_nav_menu 的一些樣式,如果你對製作這樣的選單有興趣,可以參考這篇文章:WordPress 內建階層選單製作

回到手動添加連結的部分,假使我們想要將連結加在選單的後面,請依照'items_wrap' => '連結語法'的格式添加進去,語法請參考(第 7 行是我新增的部分):

PHP

這樣你手動增加的 custom link 連結就會永遠放在自定義選單的最後一個位置。

如果你想要把手動增加的連結放在最前面,就只要把%3$s跟你的語法對調即可,請參考:

PHP

WordPress Nav Menu 還有很多參數可以使用,有興趣的朋友可以自行閱讀官方文件:Function Reference / wp nav menu