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

日期：2021.10.14
留言數：0
標籤：Nuxt.js 筆記選單

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

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

fetch 與 asyncData 的選擇

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

export default {
  asyncData() {
    return {
      weather: 'cold',
      degree: 5
	}
  }
}

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

asyncData() 使用注意

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

因此，可以改用 fetch 存取 components/ 或 layouts/ 裡的資料，改寫如下：

export default {
  data() {
    return {
      navDatas: []
    }
  }
  async fetch() {
    this.navDatas = [
      {
        name: "首頁",
        path: "/",
      },
      {
        name: "產品",
        path: "#",
        children: [
          {
            name: "產品一",
            path: "/product/product1",
          },
          {
            name: "產品二",
            path: "/product/product2",
          }
        ]
      }
    ]
  }
}

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

製作下拉選單

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

<div class="collapse navbar-collapse" id="navbar">
  <ul id="primary-navbar" class="navbar-nav ms-auto">
    <li v-for="item in navData" :key="item.id" class="nav-item" :class="{ dropdown: item.children }">
      <template v-if="item.children">
      <nuxt-link :to="item.path" class="nav-link" :class="{ 'dropdown-toggle': item.children }" data-bs-toggle="dropdown">{{ item.name }}</nuxt-link>
      </template>
      <template v-else>
      <nuxt-link :to="item.path" class="nav-link" :class="{ 'dropdown-toggle': item.children }">{{ item.name }}</nuxt-link>
      </template>
      <ul v-if="item.children" class="dropdown-menu">
        <li v-for="children in item.children" :key="children.id" :class="{ 'px-2': !children.path }">
          <nuxt-link :to="children.path" class="dropdown-item" v-if="children.path">{{ children.name }}</nuxt-link>
          <span v-else>{{ children.name }}</span>
        </li>
      </ul>
    </li>
  </ul>
</div>

以上。

後記

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

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

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

日期：2013.12.10
留言數：0
標籤：WordPress 修改教學自定義選單

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

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

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

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

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

<a href="#" id="link-menu">custom link</a>

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

<?php
wp_nav_menu(array(
  'theme_location' => 'menu',
  'container' => 'nav',
  'menu_id' => 'menu-nav',
  'depth' => 2
));
?>

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

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

<?php
wp_nav_menu(array(
  'theme_location' => 'menu',
  'container' => 'nav',
  'menu_id' => 'menu-nav',
  'depth' => 2,
  'items_wrap' => '
  <ul id="%1$s" class="%2$s">%3$s
    <li><a href="#" id="link-menu">custom link</a></li>
  </ul>'
));
?>

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

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

<?php
'items_wrap' => '
<ul id="%1$s" class="%2$s">
  <li><a href="#" id="link-menu">custom link</a></li>
%3$s</ul>'
?>

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