用 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 的方式產資料，過兩天有空會再把多國語系的寫法放上來做個紀錄。

建立 Vue Cli 3 專案的設定介紹

日期：2019.08.14
留言數：0
標籤：vue 筆記

Vue Cli 可以快速幫 Vue 建立一個完整的系統，但每次建立都有一些設定要調整，為了怕自己忘記，所以簡單將設定紀錄一下～

設定範例圖

如果有人被 google 搜尋騙進來，可以先看一下這篇文章講的東西是不是你想知道的！

▼ 我要分享的是這個設定而已 XD

用 vue create 建立專案後，會出現以下的設定：

Please pick a preset

第一個是讓你選擇專案的環境配置：

default(babel, eslint): 預設的新專案原型，沒有任何 npm，選擇之後會直接幫你建立專案，後面的都可以略過了 XD。
Manually select features: 如果希望全部設定都自己手動選擇，就請選這個吧。

如果在建立專案時有儲存設定，未來建新專案時可以在這裡選擇過往的設定，要如何「儲存設定」？這個部分會在後面提到。

Check the features needed for your project

接著選擇在這個專案中會用到的功能，用space多選。

Babel: JavaScript 轉碼器，可以將 ES6 的程式碼轉為 ES5
TypeSript: TypeScript 用來補足 JavaScript 在型別上的不足，他有可選的靜態型別，以及支援最新的 ES6 特性
Progressive Web App (PWA) Support: 是否支援漸進式網頁應用 (PWA)
Router: Vue 的路由器，可以參考 vue-router
Vuex: Vue 的狀態管理模式，可以參考 vuex
CSS Pre-processors: CSS 的預處理器，例如 Less, Sass
Linter / Formatter: 檢查 Coding Style 與格式化，例如 ESlint
Unit Testing: 單元測試
E2E Testing: End to End 測試

想要更瞭解單元測試與 E2E 測試的朋友，可以參考保哥的文章介紹：一次搞懂單元測試、整合測試、端對端測試之間的差異

承上，選好功能後，部分的功能會再詢問更細部的設定。

如果你選了 TypeScript

Use class-style component syntax: 是否要使用 style component 的語法
Use Babel alongside TypeScript: 是否要用 Babel 轉譯

如果你選了 Router

Use history mode for router: 是否要開啟 history 模式？
要使用 history 模式需要後端支援，可以參考：https://router.vuejs.org/zh/guide/essentials/history-mode.html

如果你選了 CSS Pre-processors

Pick a CSS pre-processor: 選擇你要用的 CSS 預處理器

如果你選了 Linter / Formatter

Pick a linter / formatter config: 選擇 Coding Style 的規範類型。
Pick additional lint features: 檢查 Coding Style 時，是要在存檔時檢查？還是 commit 時直接處理？

如果你選了 Unit /E2E Testing

Pick a unit testing solution: 選擇單元測試的測試方法
Pick a E2E testing solution: 選擇 E2E 測試的測試方法

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.: 選擇 Babel, PosCSS, ESLint… 等這些設定檔的存放位置

最後一個選項，則是問你要不要保留以上的設定，下次如果要新建一個 Vue Cli 時，就可以直接拿來使用。

CSS Grid 語法筆記

日期：2017.10.16
留言數：0
標籤：CSS Grid css 語法 CSS3 筆記

這篇不算教學，只是將 CSS Grid 的語法做個紀錄，所以沒有前言，也不會介紹 CSS Grid 是什麼。如果你已經知道 CSS Grid 的作用，也歡迎參考以下筆記，也許可以幫助你更了解相關語法。

從 Gird 開始

前置作業：將 div 的 display 設為 grid，接著定義 Grid 的寬度(columns)與間距(gap)

<div class="grid-box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

.grid-box {
  display: grid; /* 設定 CSS grid 的第一步 */
  grid-template-columns: 100px 100px 100px; /*設定 Grid 的寬度*/
  grid-column-gap: 10px; /* 設定左右間距 */
  grid-row-gap: 20px; /* 設定上下間距 */
}

☞ grid-column-gap 以及 grid-row-gap 可以合併為 grid-gap：

.grid-box {
  grid-gap: 20px 10px;
}

▼ 網頁示意圖

假使要設定 CSS Grid 的高度，可以再加上：

.grid-box {
  grid-template-rows: 100px 200px;
}

▼ 網頁示意圖

在這個範例中，row 有 4 行，可是我們只設定了 1 & 2 行，沒有設定高度的會以元素高度為高度(auto-height)。

☞ 可以用grid-auto-rows設定 auto-height 的最小高度。

☞ 注意

沒有grid-auto-columns這種語法。
沒有grid-auto這種簡寫。

新的單位：fr

fr 是因應 CSS Grid 而產生的新單位，全名是 fraction (分數)，這個分數不是 score 那個分數，而是數學分子 + 分母的那個分數。

我們可以用 fr 去設定 CSS Grid 的相對寬度，以達到 RWD 的縮放效果。如果是跟前面範例一樣使用px，縮放的時候是不會有 RWD 的(這大家應該都很清楚了)

將 grid-template-columns 的單位改掉：

.grid-box {
  grid-template-columns: 1fr 2fr 1fr;
}

編號 1，4，7，10：占 1/4
編號 2，5，8：占 2/4
編號 3，6，9：占 1/4

▼ 網頁示意圖

這時候縮放就會有 RWD 效果囉~。

另外也可以混搭單位：

.grid-box {
  grid-template-columns: 1fr 2fr 100px;
}

重覆 Grid 的設定

如果 Grid 的寬度有一個固定的模式，可以用 repeat() 這個語法把它們合併，類似迴圈的感覺。

假設原本這樣寫：

.grid-box {
  grid-template-columns: 1fr 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr;
}

可以看出來三個為一組，1fr 2fr 2fr是一直重覆的，所以改寫如下：

.grid-box {
  grid-template-columns: repeat(3, 1fr 2fr 2fr); /*(重覆幾次, 重覆的寬度)*/
}

▼ 網頁示意圖

最左邊跟最右邊的 Grid 如果不會重覆，可以接在repeat的前後：

.grid-box {
  grid-template-columns: 10px repeat(2, 1fr 2fr 2fr) 180px;
}

Grid 的排序

使用 grid-auto-flow 進行 Grid 的排序，預設屬性為 row (橫向排列)。

如果改用 column，Grid 就會變成縱向排列 (可以注意數字編號)：

.grid-box {
  grid-auto-flow: column;
}

▼ 網頁示意圖

此外也可以指定某一個div進行排序

.grid-box div:nth-child(3) {
  order: 1;
}

如果沒有指定order的順序，預設就是order: 0，而我們現在指定第三個 div 為order: 1，所以第三個 div 的排序會跑到最後面。

☞ 承上，現在是縱向排列，所以 div 排列的順序是用「縱向」來看的喔。

▼ 網頁示意圖

接下來就可以用order:N任意調整排序囉！

.grid-box div:nth-child(3) {
  order: 1;
}

.grid-box div:nth-child(9) {
  order: 2;
}

.grid-box div:nth-child(6) {
  order: 3;
}

▼ 網頁示意圖

以上就是 Grid 的相關筆記。

部落格改版之後，是用 Grid + Flexbox 來排版的，有興趣的朋友可以自行扒皮 XD

利用 SVN 更新 WordPress 外掛

日期：2017.04.15
留言數：0
標籤：WordPress 外掛筆記

這篇純粹是一個小筆記，因為久久才會用到一次 SVN，然後每次都要去 WordPress 官方查資料真的覺得很麻煩，所以決定把指令記錄在部落格里。

更新外掛

⚒ cd Folder 後，輸入 svn up

$ cd my-local-dir/
my-local-dir/$ svn up

⚒ 接著輸入 svn stat 確認哪些檔案需要 add 或 modify

my-local-dir/$ svn stat

⚒ 最後就是輸入 commit 的文字啦

my-local-dir/$ svn ci -m "commit message"
> Sending    trunk/my-plugin.php
> Transmitting file data .
> Committed revision 11327.

以上是更新的步驟。

更新版本號

接下來還要將版本號更新到 WordPress 上面，讓大家可以後台收到通知，並自動更新外掛：

⚒ 先將 trunk 的檔案複製到版本號裡面

my-local-dir/$ svn cp trunk tags/2.0

⚒ 接下來發送 commit 訊息即可

my-local-dir/$ svn ci -m "tagging version 2.0"

正常來說，做完這些步驟再回到官網重新整理就能看到成果了。

將檔案快速 push 到 gh-pages branch

日期：2016.02.28
留言數：0
標籤：git 工具技巧筆記

github 提供一個簡易的環境可以執行 HTML/CSS/JS 等前端程式，使用方法很簡單，只要把在 repo 新增一個gh-pages分支，然後將檔案 push 到該分支即可。

但用 sourcetree 切換 branch，檔案也會隨之改變，並不是個好方法。也許用 sourcetree 有其他的解法，但目前我研究不出來，所以我目前的做法是用npm套件去管理。

gh-pages 套件介紹

這個套件就叫做 gh-pages，可以直接在 cmd 執行以安裝 (當然前提是要先安裝 npm 套件管理)：

$ npm install gh-pages -g

套件頁面有詳細的文件說明，會告訴你如何做更多進階的設定。

但我要的功能很簡單，只希望把當前 branch 的檔案 push 到gh-pages即可，因此請在 Terminal 輸入該指令即可 (最後面可以輸入資料夾位置)：

$ gh-pages -d .

這個原理很簡單，就是先把你要的檔案抓下來，再移除gh-pages裡的檔案，最後再上傳。也因此這些動作都需要輸入 github 的帳號密碼，最少可能要輸入三次，為了避免這種情況，我們必須要修改 config，將你的 repo 位置從http://改為git@

修改 config 檔案

請在 Terminal 利用 vim 或任一編輯器打開 config (該檔案為隱藏檔)

$ vim .git/config

在[remote "origin"]裡面有一個url，將它的路徑改為git@開頭的 repo 位置即可。

最後存檔再試著執行gh-pages -d .，就會發現不用再輸入密碼了唷！

codyhouse 的 tooltip 線上教學筆記與心得

日期：2015.11.12
留言數：0
標籤：css 語法 CSS3 HTML5 筆記觀念課程

剛剛收到一封 codyhouse 的線上課程通知，這一期他們推廣的是 CSS animation 應用，好奇點進去後發現有一堂課程是免費的，所以就打開來聽聽看啦～

▼ 有 play 可以選的 tooltip 就是這期的免費課程啦

花了半小時聽完後覺得受益良多，雖然講者的口音有點重，但可以把影片字幕打開，也可以直接看程式碼，聽完之後也是對其他付費課程有所心動 XD，非常棒的行銷手法呢，先試聽一堂課喜歡再買 😀

因為他的 youtube 影片連結是公開的，所以我也放一份在我的 blog 裡面，以下是自己聽完做的一些筆記跟重點，很多語法我自己也已實作了，所以看到國外講師也是這樣寫覺得很開心 😊

總之我覺得不錯的語法都會重點摘錄出來給大家參考，希望對你們有所幫助 🌹

筆記與心得

aria-hidden：HTML5 語意，用於屏幕閱讀器的，幫助殘障人士更好的訪問網站。(參考來源)
萬年水平垂直置中的另一種方法：

section {
  width: 100%;
  height: 100vh;
  display: table;
}
section .center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

文字如果要垂直置中，可以將height以及line-height設定成一樣的高度，但文字必須維持一行才有用。
如果不希望hover影響隱藏的元素，可以改用visibility: hidden將元素隱藏，這樣滑鼠移過之後也不會啟動hover效果
visibility可以用在transition，但display不行
假設元素的寬度是50px可以善用calc(50% - 25px)將元素置中
利用偽元素製作三角形：

border: 10px solid transparent;
border-top-color: #2e1c28;

偶爾聽聽外國人的線上課程也很棒，可以學到很多不一樣的寫法以及詮釋的方法，codyhouse 的範例跟教學品質都很棒，有興趣可以連回他們的網站看更多資料唷: https://codyhouse.co/

讓 Facebook 社交小工具(Page Plugin)能有 RWD 的效果

日期：2015.11.04
留言數：2
標籤：css 語法 responsive RWD 技巧筆記

Facebook 的 Page Plugin (原先的 like box)預設沒有提供 RWD 的效果，如果希望小工具也可以用 RWD 效果的話，可以在 CSS 加入以下程式碼：

/* 
讓 FB 的 Page Plugin 可以有 RWD 的效果
https://developers.facebook.com/docs/plugins/page-plugin
*/

/* 這個元素內嵌在 iframes 裡，有可能造成部分 layout 變形，所以請把它隱藏 */
#fb-root {
    display: none;
}

/* 讓所有容器的寬度都變成 100% */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

語法來源：http://stackoverflow.com/questions/10656038/how-to-make-the-facebook-like-box-responsive