傾囊相授 ! MUKI 的 RWD 入門與實戰課程分享

我在 2012 年寫過一篇 CSS Media Queries 介紹與基礎應用，後來也陸續開了一些 RWD 相關課程，也有在一些研討會分享過 RWD 技術，因為資源散落各地，所以決定利用部落格將我分享過的 RWD 資訊做個整合，讓大家可以快速上手。

另外我也會將自己的「RWD 入門與實戰」這個付費課程講義公開，讓大家可以在部落格內閱讀。為什麼要把付費內容免費化呢？其實我覺得， RWD 已經存在一段時間了，相信很多人都已經會了，就算不會，網路上也有許多分享文章可參考，「觀念」也沒什麼好藏私的，愈多人會 RWD，我們之後的進階課程才會輕鬆啊(笑)。

其實想要把內容公開化已經想很久了，突然如此積極還有另外一個原因，就是我在網路上看到有人盜用了我的講義內容，然後把他公開在網站上，好像還用這些內容去開課(這種行為真是令人不齒)。更扯的是，他盜用我的內容後還有附上一些課後補充，就是沒附上我的連結，是心虛嗎？哼～總之，我歡迎大家分享我公開的資料，但與其我的東西被盜用，還不如我自己公開分享啊啊～～

如果各位之後在其他地方看到這些內容，請不用懷疑，我以我的人格保證，他們絕對非原創絕對是盜用，因為這些東西都是我一個字一個字打出來的。也歡迎大家用力檢舉或是告訴我唷 ^___^

以上癈話到此結束，接下來開始進入正題吧。

RWD 相關簡報分享

我的 RWD 簡報都發在 slides.com 裡，大家可以直接點進去看，或是在部落格里閱讀。

RWD 入門與實戰課程簡報

這份簡報是「RWD 入門與實戰」的上課簡報，裡面有很基礎的 RWD 觀念，適合還沒碰過 RWD 卻有興趣想瞭解的朋友。跟練習有關的簡報我都已經拿掉了，我這堂課的兩大重點：(1)RWD 是由什麼組成的 (2)如何實作 RWD。

這份講義重點在「(1)RWD 是由什麼組成的」，另外上了幾次課之後，我改為使用 gitbook 做線上講義，所以這份簡報就沒再更新了。

2015 廣州前端分享會

這份是最早釋出的 RWD 簡報，是我去廣州的一場分享。這份簡報內容很多，到最後也沒講完，裡面列出了做 RWD 會碰到的一些問題，適合已經有 RWD 實作經驗的朋友閱讀。

簡報後面的「那些年我硬幹的事情」，是在分享已經上線的網站如何硬幹成 RWD 網站。

2015 高雄 MOPCON

2015 年底參加了高雄的 MOPCON，一樣是在講 RWD。

這份簡報可以看作是融合的「RWD 入門與實戰」以及「廣州前端分享」的精華，也是適合給有 RWD 實作經驗的朋友閱讀。

簡報比較偏「秀」，為了演好這場秀，裡面會帶上很多插圖，思緒也比較跳躍，所以後來我上課才改用講義，講義就比較像我的寫文風格，系統化 + 平鋪直敘 (自己說 XDDD)。

我會把講義整個搬到文章內，為了怕頁面拖太長，所以請點擊下一篇閱讀「RWD 入門與實戰」講義唷。

Avoid

以下內容是我在 RWD 入門與實戰課程的講義內容，免費放出來讓大家閱讀學習，歡迎分享與轉載 ( 請註明出處來源 )。
請勿盜用或用於商業用途，一但發現必定追究到天涯海角。

RWD 的基本組成：viewport

認識 viewport

viewport 用來告訴瀏覽器現在的裝置有多寬、多高。可以讓使用者在使用不同裝置看網站時，能有個基準比例。

  • 根據裝置的顯示區域來展示文檔 (html)
  • 可以透過放大與縮小 html，以符合裝置的可視區域
  • 通常會有初始值設定縮放的級別或其他規則

viewport 語法

HTML
  • width：使用 device-width (裝置寬度) 作為可視區域的寬度。
  • initial-scale：文檔初始的比例，用 1 表示 100% ，範圍從 0.1 ~ 10 可任填。
  • minimum-scale：最小可以縮放到 0.8 比例。
  • maximum-scale：最大可以縮放到 2.0 比例。
  • user-scalable：是否允許使用者進行縮放。no 不允許；yes 允許。

☞ 補充

iOS 10 版本提到：為了增強用戶的體驗，不管有沒有使用 user-scalable ，用戶都可以在 Safari 瀏覽器上縮放網頁。

承上，如果依然不希望使用者縮放，可以改用 JavaScript 禁用設定：

JS

總結

  • 將 viewport 應用在 RWD 網站上，可以很方便的建置一個適合手機、平板等不同裝置閱讀的環境。
  • viewport 也可以應用在非 RWD 的網站
HTML

RWD 的基本組成：流動式佈局

流動式佈局介紹

流動式佈局(Fluid Web Layout)是讓網站在排版時，把寬度從px改成%去排版，讓網站的版面可以參考父層，並用相對比例去分配寬度。

以下利用一個簡單的範例，教大家怎麼把網站版面改寫成流動式佈局。

這是一個用px排版的二欄式的版面

如果要將它改成流動式佈局版面，注意兩個要點：

  1. 把所有px單位改為%，並計算好與父層的相對比例。
  2. 最外層使用max-width設定寬度

改寫後的 CSS 如下(僅列出重點語法)：

CSS

流動式網格佈局

如果 HTML 的層級愈多，在計算%時會非常不方便，所以我們可以改用流動式「網格」佈局替代。

網格系統並不是什麼新技術，從以前開始，就有許多設計師用網格在排平面或網頁稿件的版面。而現在有許多人把網格系統化，讓網頁設計師在排版時可以更快的上手，不用自己計算%。

以下是一個 Grid System 的範例，範例中把網站總寬度切割成 12 等分，每一個區塊佔用的等份都是固定的。拖拉視窗可以發現寬度即使縮小，網格的數量也沒有減少。

☞ 補充

Bootstrap 也有網格系統(Grid System)，所以我們可以使用 Bootstrap 幫我們快速建置基本的 RWD 網站。

RWD 的基本組成：客製化的 Layout 結構

一般來說，使用前面提到的網格式佈局，就可以做出一個 RWD 網站。但如果我們要在版面縮小時，修改元件樣式或控制元件出現/消失… 等，這些是「網格式佈局」做不到的，因為網格式佈局只管寬度其他都不歸他管 XD。

因此，我們可以用 CSS 的 Media Query 語法幫我們實現這些功能或需求。

Media Query(ies) 介紹

Media query 的作用是，當偵測到不同尺寸的裝置時，給予對應的 CSS 設定。

在 RWD 的實作上，就是利用 media query 做出「共用一份 html，但是排版不同」的客製化 Layout。

可以讓裝置在任何寬度下，都可以有不同的 CSS 效果，例：

  • 縮小螢幕寬度時，選單跑到左側
  • 縮小螢幕寬度時，某些元素消失

☞ 補充

在做 RWD 網站時，Grid System(網格系統)跟 Media Query 通常是密不可分的，所以我們會同時用到這兩個技術。

Media Query 語法解析

以下是 Media Query 的規格：

CSS

寫成我們熟悉的 CSS 語法是：

CSS
  • mediatype : 裝置類型
    • all
    • screen
    • printer // 訪客列印網站資料
    • tv // 訪客用電視瀏覽網站
    • …
  • media feature : 裝置的規格
    • max-width / min-width / width
    • max-height / min-height /height
    • color
    • aspect-ratio
    • monochrome
    • …

參考資料： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

如何呼叫 Media Query

呼叫 media query 就跟呼叫 CSS 一樣，大致上有以下三種寫法：

1. 在 HTML 嵌入 CSS 檔案，這份 CSS 檔案會依據 media query 的設定顯示。

HTML

2. 在 CSS 檔案裡寫下 media query 的設定以及相關 CSS 語法

CSS

3. 在 CSS 裡使用 @import 嵌入另外一個 CSS 檔案

CSS

☞ 補充

雖然有這三種呼叫方式，但我們通常都只會使用第二種方法唷～。

Media Query 練習

這是一個已經用流動式佈局排好的頁面：

依照以往上課經驗，初學者在練習 Media Query 時，往往不知道該如何下手。我建議大家一開始先不要管「寬度」，只要先想著，如果我要做好這個功能，應該用哪些 CSS 語法？確定結果是你想要的後，再把這些耶你修改的語法單獨拉出來並加上寬度的條件。

☞ 練習一

網站寬度在 400px ~ 700px 之間，將 #sidebar 跟 #aside 的位置互換。

我們可以從頁面語法瞭解#sidebar以及#aside都已經用float排好版面了，如果要讓兩個區塊位置互換，其實只要在float上動點手腳即可：

CSS

☞ 練習二

網站寬度在 0px ~ 500px 之間，選單會從左右變成上下排列。

這個練習根據你的思維與慣用的語法不同，至少可以有四種寫法。在此根據思維的不同，分享兩個寫法給大家：

寫法一：

假設我們已先設定好選單在桌機版的樣式：

CSS

那麼 media query 可以這樣寫：

CSS

☞ 補充

因為瀏覽器的寬度沒有負數，所以當寬度是 0 的時候，可以把 min-width 整段省略

寫法二：

因為我們還沒有寫選單的樣式，而#menu沒有排版時，預設就是上下排列的狀態，因此可以把這個練習題目想成：寬度在 500px 以上，選單會變成左右排列

那麼我們只需要這樣寫就可以囉：

CSS

「RWD 入門與實戰」的講義暫時分享到此，因為後面的課程是直接用 Bootstrap 的 Grid System 做一個版面，比較難用文字描述，請見諒。

另外課程最後還有一些進階的 RWD 實作，例如設計 Grid 的思維、完全實現文字的縮放，純 CSS 實現表格的 RWD… 等等，這些在「廣州前端分享會」的簡報都可以看到唷。之後有時間會再整理成文章讓大家更瞭解其中的奧妙 😀

最後感謝各位的觀看，希望這篇文章可以幫助到各位唷。有任何問題，也歡迎在文章底下留言詢問～

☞ 延伸閱讀

如果對 Media Query 還不是很懂的話，建議可以看我在 2012 年寫的 CSS Media Queries 介紹與基礎應用

CSS Flexbox 介紹與解析

老實說我到現在都還沒開始用 flex 做網站，最大的原因就是 IE 相容問題，不過這也不能當作不學習的原因，畢竟這行就是要不斷的學習新知識😂，而且剛好在某次前端課程中有同學問我能否介紹 flex，所以想想，乾脆就寫一篇文章吧！不僅是幫自己做個筆記，以後也可以當作課堂上的補充講義～。

▼ flex 相容一覽圖 / caniuse.com

什麼是 Flexbox

簡單來說，Flexbox 是一種 CSS 的排版語法，就跟我們以往用的 position, float, display…一樣，只是 Flexbox 是 CSS3 的新語法，所以才有瀏覽器相容的問題。

Flexbox 相關屬性與值

我覺得 Flexbox 較難上手的原因，就是他的屬性跟值太多了，不像 float 很單純的只有 left, right, none 這三種，但當然好處就是彈性非常大，幾乎很多複雜的排版都可以靠 Flexbox 輕鬆解決。

在這邊也參考了 W3C 的網站，列出所有 flexbox 的屬性跟值給大家參考，至於詳細的介紹還是可以看 W3C 關於 Flexbox 的文件喔！

屬性屬性介紹可用的值預設值影響
flex-flow將 flex-direction 以及 flex-wrap 合併寫在一起flex-direction ｜flex-wrapflex containers
flex-direction
排列方向
rowrowflex containers
row-reverse
column
column-reverse
flex-wrap
換行nowrapnowrapflex containers
wrap
wrap-resverse
order
調整元素排列的順序<整數>0
flex
將 flex-grow、flex-shrink 以及 flex-basis 合併寫在一起flex-grow｜flex-shrink｜flex-basisflex items
flex-grow
<數字>0flex items
flex-shrink<數字>1flex items
flex-basis<寬度>autoflex items
justify-content
水平對齊設定flex-startflex-startflex containers
flex-end
center
space-between
space-around
align-items
垂直對齊 (元素單行排列)flex-startstretchflex containers
flex-end
center
baseline
stretch
align-selfflex-startautoflex items
flex-end
center
baseline
strech
align-content
垂直對齊 (元素排列超過兩行以上)flex-startstretch多行 flex containers
flex-end
center
space-between
space-around
stretch

常用的 Flexbox 排版語法

要使用 flex 前，必須先在該容器指定：

CSS

而特別有趣的是，就連行內元素都可以用 flex 唷：

CSS

接下來，我們用一小段 HTML 語法表示 Flexbox 的架構：

HTML

承上，這個很常見的巢狀排版恰恰能表達flex的兩大主角：flex-container以及flex-item，前者表示的是一個巨大的容器(container)，後者則是各個獨立的項目(item)。

flex的屬性，有的會影響的是容器，有的則影響項目。如果不太清楚屬性影響的是哪一塊，可以回到前一頁看表格的「影響」欄位做參考。

基本的 Flexbox 排版

flex-direction

我們先介紹最簡單的左右版面，以往直接用float: left解決，那麼換成flex的話可以這麼寫：

CSS
  • Flexbox 是 Box Model 的一種表現形式，以前我們用display去改變每個元素的 Box Model，在此也是一樣，我們要在flex-container先設定display: flex，確保自己以及裡面的子元素 Box Model 都會轉成flex的設定。
  • flex-direction表示 flex 的水平排列方向，第一頁的 Flexbox 屬性表上有提到，flex-direction必須放在 flex container 的父層架構下，而不是 flex item 這個子層，所以這句話寫在.flex-container裡，如果你把它放在.flex-item會發現沒作用。(再次提醒：對照屬性表會更加清楚該放在哪裡喔。)

最後我們來把flex-direction所有的值都寫一遍吧！

See the Pen QEGbMm by MUKi (@mukiwu) on CodePen.

在值裡面，用到的row跟column，一個是水平排列、一個是垂直排列；而reverse是反轉的意思，稍微對照一下上面的範例應該不難了解唷！

flex-wrap

接下來再加一個新的語法flex-wrap，這個同樣要放在.flex-container裡面，wrap是斷行的意思，可以利用這個語法決定是否要換行。

設定nowrap表示即使有多少區塊，也必須都放在同一行內(會自動分配寬度)。設定wrap則是會依照內容或寬度自動換行。

See the Pen oLYjqG by MUKi (@mukiwu) on CodePen.

flex是三個屬性的合併縮寫：flex-grow, flex-shrink, flex-basis，可以看作是 FLexbox 的核心設定。 註：flex 的這些屬性影響的是 flex items。

flex-grow

我們都知道，區塊預設的寬度是元素內容的寬度，如下圖所示 ▼

如果想要調整寬度，一般可以用width設定，但也能用flex-grow唷！flex-grow的預設值為 0，表示寬度就是元素內容的寬。而從 1開始，數字愈大，占的寬度比例也會愈大。

CSS

範例圖如下所示 ▼

flex-shrink

flex-shrink跟flex-grow相反，是表示當父元素寬度空間不足時，子元素壓縮的比例。預設值為 1，但設為 0 同樣表示不壓縮，數字愈大，被壓縮的幅度就愈大。

CSS

範例圖如下所示 ▼

flex-basis

可以在flex-basis設定寬度或高度，設定好後會自動分配該區塊的寬度或高度。

CSS

假設父元素寬度是500px，我在裡面設了兩個子元素分別為200px以及600px，他會依照比例分別給予子元素寬度，如圖所示 ▼

以上這三個語法因為有比較多的彈性，所以可以用在製作 RWD 網站上。

flex

最後，再次提到flex這個語法，是用來合併以上三個屬性，規格為：

CSS

flex 還有兩個更簡短的縮寫：

CSS

以上關於flex的範例程式碼，請參考：http://codepen.io/mukiwu/pen/qNRJPv

Flexbox 還有一些屬性沒有提到，因為我有點累了，所以暫時解說到這邊。但我覺得剩下的都是比較簡單而且很容易上手的語法，所以等待以後有空補完 XDD。

Flex 版面實例介紹

版面垂直置中

幾千萬年以來傷透腦筋的垂直置中，超級適合用flex解的喔！在這邊我們會用到兩個屬性：

  • justify-content
  • align-items

而這兩個屬性我前面通通都、沒、說(炸)，但真的很簡單，所以直接上程式碼啦！

CSS

範例請參考 codepen：

動態三欄式

除了用flex-grow動態調整他們的大小外，還用了order調整版面的順序

不同的圖片 / 區塊排列

這種排版變化比較多一點，但不知道怎麼稱呼它，所以直接看範例比較清楚 XDDD。

一樣是大量運用到flex屬性做調整，在這個例子中，flex-basis尤其為最重要，當然還有一些對齊的語法也不能少。以下是有用到的語法：

  • flex-wrap
  • flex-basis
  • justify-content

以上三種排版，是我目前想到可能比較有趣，或是比較實際的例子 XD，如果有特別想要了解某些版面換成flex該怎麼寫的話，也可以留言給我唷！

inline element 與 padding 的二三事

前兩天在台大上課時，剛好提到 display 的各種形態，然後很嗨森的告訴同學，如果你設定任一元素(element)為 display: inline 時，padding-top 以及 padding-bottom 是不會有作用的唷 😆 😆 😆

結果！！就在我邊說邊示範的這個 moment 時！！！！！

他居然 work 惹 🙀 🙀 🙀 🙀 🙀 🙀

當下整個尷尬的無以復加 XD，所以回家找了一些針對 inline element 的說明，然後順便糾正一下自己的觀念 T皿T

OK，以上內心小劇場 + 碎碎唸完畢，讓我們開始認真吸收一下觀念吧～

我在 Head First HTML with CSS & XHTML 找到了一段針對 inline element 的說明，這段內容敘述非常清楚，可以瞬間導正自己的觀念，所以分享給大家：

You can add padding to the top and bottom of inline element, but the padding doesn’t affect the spacing of the other inline elements around it, so the padding will overlap other inline elements

Head First HTML with CSS & XHTML

簡單來說，inline element 的確可以使用 padding-top 以及 padding-bottom的語法，但 padding 不會推擠周圍的 inline elements，反而會覆蓋其他的 inline elements。

不太懂也沒關係，我們就直接來看範例囉～

以 padding-bottom 為例

第一段是以p作範例(display:block)，第二段是span(dispaly:inline)。在同樣使用padding-bottom: 1em的設定下，來看一下他們有什麼差別吧！

就我們認知的 HTML element 都是以「堆疊」模式排列而成，所以透過範例可以發現，正常情況我們設定元素的下間距時，他下方的所有元素會因此被往下推擠；但如果將元素的型態改為 inline 時，他下方的元素不會被推擠，反而會讓下方的元素把自己給蓋住。

以 padding-top 為例

我們再來看一個更明顯的例子，現在我把 padding-bottom 改為 padding-top ，看看會發生什麼事情。

如同剛剛說的，元素型態為 inline 時，設定padding-top並不會讓自己的往下推移，而是會覆蓋掉前面的元素。

你可以試著把我在 HTML 寫的這段語法加上 class 變成<span class="padding">

那麼你會發現，同樣的他不會讓自己往下推移，而是會蓋掉前面的元素：

也因此，雖然 inline elements 可以吃到 padding-top 以及 padding-bottom 的設定，但卻不會讓其他元素跟著被推移，造成排版上的一些困擾。我想這就是大家不常使用的原因，導致我只記得結論就是不用 top 跟 bottom XDDD。

如果你之前上過我的課，或是跟我一樣有這種觀念的朋友，希望閱讀這篇文章後可以一起把這個觀念修正過來唷😁

漂亮的 WordPress 標籤雲外掛 : Muki Tag Cloud

2020.06.24 更新

因為 jqcloud 的作者已沒有在維護這個效果，所以該外掛已無法使用，也不會再更新囉。

將將，人生的第一支 WordPress plugin 誕生了，因為我很喜歡這種不規則形狀的標籤雲，所以當我確定他可以順利在 WordPress 使用後，下一步就是決定將它做成外掛跟大家分享。

當然，憑我一人之力是絕對無法完成外掛的，畢竟我的 php 爛到一個炸掉 XD，所以很感謝 Mesak 的幫助，兩個人合力做出了這支外掛，如果大家喜歡可以試用看看，也歡迎幫忙找 bug 🙂

Muki Tag Cloud 外掛資訊

  • 名稱：Muki Tag Cloud
  • 版本：1.2.1.1 (2013-11-11更新)
  • 作者：Mesak Chuang (http://mesak.tw)、Muki Wu (https://muki.tw/wordpress)
  • 說明：可以在側邊欄或是支援小工具的位置加入這個標籤雲外掛。他跟一般標籤雲最大的差別是不規則的排列形狀，而且顏色豐富多彩，非常的有質感
  • 下載：請至WordPress.org 下載 Muki Tag Cloud 外掛
  • 範例：總共有 7 種樣式可選擇，包含 3 種繽紛色彩，以及 4 種配合部落格常見色調 (紅、藍、綠、灰)
    ▼ 預設樣式 (fresh)

    ▼ light style
  • 語系：英文、正體中文

Muki Tag Cloud 安裝步驟

  • 步驟一：安裝 Muki Tag Cloud 外掛 (可以解壓縮後上傳至您的 WordPress 網站，或是透過後台安裝)
  • 步驟二：到 WordPress 控制台 ➡️「外掛」 ➡️ 「已安裝外掛」，找到Muki Tag Cloud ➡️ 「啟用」
  • 步驟三：「外觀」➡️ 「小工具」找到Muki Tag Cloud工具，將它拖曳到側邊欄或任何你想出現的地方即可。

Muki Tag Cloud 外掛功能

  • Tag Cloud Random Order：可以選擇標籤的排序方式，是要以 article(文章數)或 random(隨機)排序
  • 小工具寬度 / 高度：小工具的整體寬 / 高度，可以填px或%，但記得一定要填入單位
  • 色彩風格：選擇喜歡的色彩風格檔，預設是 fresh style，目前有 7 種風格可以選擇。

有任何問題都歡迎回報，Mesak 跟我會努力把這個外掛做到做好，有任何想要的功能也歡迎提出來 🙂

jQuery Ajax API 實作以及 Template 介紹

前陣子在上前端基礎課，有教大家怎麼利用 jQuery AJAX 實現簡單的 CRUD 效果，後來覺得這對初學者來說，應該是個需要反覆思考才能融會貫通的小門檻，剛好最近也有學生對此表示不懂😱，所以就借這篇文章簡單跟大家介紹囉！

我會用在課堂上的教材跟大家拆解語法，但為了避免大家練習時灌爆我的 API，所以我不會透露 API 網址，一律用變數 ajax_url 代替。

什麼是 API

用程式介面（英語：Application Programming Interface，簡稱：API），又稱為應用編程介面，就是軟體系統不同組成部分銜接的約定。

維基百科

對網站開發人員而言，API 就是前後端溝通的一個接口。後端可以透過各種方法操作資料庫裡的資料；但對前端來說，我們該怎麼操作資料呢？我們可以利用後端人員提供的 API(通常是一串網址)去操作資料，只要有了 API，我們就可以用 JavaScript 搭配 AJAX 實現 CRUD 。

如果還是霧煞煞也沒關係，接下來會用程式碼讓大家加深印象，原理神馬的，可以透過實作去了解 😊。

什麼是 CRUD

CRUD 是四個單字的簡稱，就像我們在學 CSS 時一定要會使用選擇器(selector)，而後端在學操作資料庫時，一定要先會 CRUD。
這四個單字分別意思為：

  • C：Create (新建資料)
  • R：Read (讀取資料)
  • U：Update (更新資料)
  • D：Delete (刪除資料)

實作留言板的 CRUD

接下來要跟大家分享的是，如何透過前端實作一個留言板，這個留言板要有 CRUD 的功能，就是我們常說的：新增、刪除、修改 留言。

那因為新增留言是我這期學生的期末考題，所以等他們考完試，我會再把新增留言的程式碼放上來，現在我們先來學習刪除、修改，以及顯示留言吧😋

在此先用 Bootstrap 做了一個非常簡單的留言版，你可以在 HTML 裡面看到要放留言的區塊，只有一行 <div class="result"></div> ，其他什麼都沒有。

HTML

在沒有樣板輔助的情況下，我們需要透過 jQuery 語法將 HTML 的字串組出來，因此所有的留言資料、排版，都必須寫在 jQuery 檔案裡。

顯示留言(Read)

顯示留言的邏輯大概是這樣：

  1. 讀取網頁
  2. 透過 jQuery 語法 (AJAX) 得知現在要撈出該 API 裡的資料
  3. 使用 GET 方法撈出資料
  4. 將撈出來的資料，利用 jQuery 改變 DOM 之後，秀在網頁上

轉換成語法則是：

JS

$.ajax是 jQuery 包裝後的函式，因此他的格式都是固定的，我們只要把對應的資料寫進去，如果 url 跟 type(method) 正確，基本上資料都讀得到。

最後再透過 success 偵測資料成功被讀取後，應該要做的事情：
因此留言的資料非常多，所以我們要利用迴圈，將e物件的所有資料顯示出來，並透過append()把資料一筆一筆的接在後面。

組字串時把握兩個原則：

  • 當變數碰到 html 時，需要用+串接
  • 單引號用來包變數與 jQuery 語法，雙引號用來包 HTML 語法

組字串需要耐心跟細心，如果還是看不太懂他們的規則，我會建議先實作再透過開發者工具看 render 出來的 HTML 程式碼，相互對照會更加清楚他們的邏輯。

更新留言(Update)

更新留言的邏輯比較繁瑣一些，如果寫成文字大致如下：

  1. 點擊更新留言的按鈕
  2. 該篇留言會自動變成可編輯的表單，而且表單預設值是原本留言的內容
  3. 輸入完要更新的資料後，按下送出，表單會變回更新後的資料
  4. 如果按下取消，表單會變成原始資料，不會更新

因為有點複雜，所以我錄了一個 GIF 表示整個流程

轉為程式碼，也可以感受到他比 READ 還複雜許多，而且重點是這個程式碼我還沒寫完 哈哈哈 XDDDD

JS

雖然沒有寫完，但是的確可以成功將留言更新，但更新後的樣式如果要用組字串的方式來寫，會太過於繁瑣，所以我後來採用 jQuery Template 實作(後面會再提到如何用 Template 改寫)。

但我們還是要簡單說一下這段程式碼，之後再把樣板加進來會比較好懂。

上述程式碼 highlight 的第 3 ~ 8 行(以下簡稱 A 段)，以及 19 ~ 24 行(以下簡稱 B 段)，乍看之下其實很類似，但兩個功能大不相同。

A 段代表的是上述邏輯的第二句話：留言會自動變成可編輯的表單，而且表單預設值是原本留言的內容。所以當我點下「更新按鈕」的時候，會利用 A 段將作者、標題、網址 … 等資料存到變數裡，這邊利用的是 DOM 的 text() 方法，接下來在updateTemplate 裡塞入表單元件，可以用 value="" 讓元件預設出現內容，所以在裡面塞入了各個變數。

而 B 段表示的，是當我更新完留言送出之後，會傳至 API 的實際內容。以name變數為例：name = fullMsg.find('.name').val();，將該表單元件的值存了起來，如果要得到元件的值，可以用 val() 方法。

最後再利用 $.ajax 加上 put 這個 type(method)，將資料一個一個的傳回去。你可以利用 sucess 印出結果，如果傳送的物件是更新後的結果，表示程式正確。

如果參考我上面寫的文字流程，成功之後應該要讓畫面回到「顯示留言」的樣子，但是如果用這種方法寫，程式碼可能會又臭又長，所以才想用 template 改寫，因此斷尾了 XDDD。但大家有興趣，也可以試著想一下該怎麼把這個功能寫出來唷 🙂

刪除留言(Delete)

相較於更新，刪除真的是簡單許多，我們的 API 設計，是只要得到該留言的 ID 值，就能透過 ID 將留言刪除。

但根據我的 HTML 結構，我是將 ID 寫在最外面，刪除留言則是放在裡面：

HTML

所以點擊「刪除留言」之後，該如何利用 jQuery 找到這一篇文章的 ID 呢？我使用了closest()方法，以「刪除留言」為中心點，找到離他最近的.full-msg。

JS

如果成功刪除留言，必須要有一些簡單的回饋，讓使用者知道留言被刪除了 (就和更新留言是一樣的道理)。
只不過刪除比較簡單，我直接讓這一篇留言 fadeOut()，再秀出「留言已刪除」的字即可。

以上就是簡單的 CRUD 操作，希望對大家有所幫助。雖然語法看上去有點複雜，但其實觀念只有兩個，一是利用$.ajax操作 API，二是利用 jQuery 操作 DOM 讓使用者感受到回饋。

有時間會再更新如何使用樣板。我會以「更新留言」為例子，將他改寫成 template 的樣式，因為我們要的功能非常單純，所以我使用的是 jQuery Template，有興趣的朋友可以先閱讀他的官方文件。

WooCommerce 系列教學 (3/3)：串接第三方金流

WooCommerce 系列教學，預計分為三篇，請參考以下目錄：

WooCommerce 是很熱門的購物車系統，所以有很多的第三方金流服務，都有提供相關的 plugin 或 API 讓我們可以與 WooCommere 完整串接，今天要介紹的這個第三方金流服務是歐付寶，老實說我已經忘記選擇它的原因，但用了 4 個月還算不錯，而且安裝非常方便，客服回應也很快，所以分享給各位。

▼ 這是歐付寶手續費的明細，詳細的內容可到金流收費總覽觀看

大家應該有發現超商付款的手續費非常高，所以我並沒有使用超商付款的功能，我自己的網路商店也只有用信用卡與 ATM/ WebATM。
歐付寶的好處是提供了很多種付款方式，但你不一定全部都要啟用，可以視自己的需求啟用即可。

安裝歐付寶

接下來要跟大家說怎麼安裝歐付寶囉。

▼ 請先在首頁的「下載專區」找到「套裝購物車模組」

▼ 找到第四個 WordPress WooCommerce 專用的外掛，下載後照著一般安裝外掛的流程，裝到你自己的 WordPress 網站。
⚠ 檔案裡面有一份 allPay 金流外掛套件安裝導引(WooCommerce).docx 也寫得很清楚，建議大家可以先行閱讀再安裝。

▼ 啟用後，在後台選單：「WooCommerce」→「設定」→「結帳」的分頁裡，會多了一個歐付寶，你可以在此設定想要啟用的付款方式，以及一些說明內容。

那麼要如何設定，讓顧客的錢進入你的口袋呢？接下來這個是最重要的地方，就是金鑰設定。

▼ 承上個步驟，將頁面稍微往下捲一些，會到「特店編號」、「金鑰」與「向量」的設定，只要將這邊設定完成，在商店的任何付款資料，歐付寶都能透過這個設定匯入到你的歐付寶帳戶。

WordPress 後台先到此暫停，讓我們回到歐付寶的網站去申請會員吧！

申請歐付寶會員，取得金鑰設定

請先註冊成為歐付寶的會員，一開始選擇個人會員就可以了，個人跟商務目前最大的差別，是收款額度的不同。

雖然很想把步驟寫清楚，但是歐付寶會員綁定手機號碼，我沒有其他的手機號碼可以測試截圖了，所以在此跟各位說聲抱歉 😢。但是歐付寶的網站步驟很清楚，註冊與申請是沒啥困難的。

註冊成為會員之後，可以去申請你的金鑰，申請金鑰的網址請點我。假設你已申請完畢，可以登入廠商後台取得你的特店編號、金鑰等設定。

▼ 這些設定可以在廠商後台的「系統開發管理」➡️「系統介接設定」找到，不管是 AllinOne 還是一般金流，數字都是一樣的，所以只要選擇一組填寫到 WooCommerce 即可。

▼ 在尚未正式開店前，可以先啟用測試模式，試試看你的購物流程是否暢通

以上就是 WooCommerce 串接歐付寶的簡單步驟，我個人覺得，歐付寶已經把付款做得很簡單了，而且所有資料都可以在廠商後台搜尋到，有任何不懂得也可以先到他的客服中心爬文，這邊就不再贅述了。

以後如果你覺得外掛的功能不足，也可以使用歐付寶提供的 API，讓你的購物網站擁有更多功能。但我這幾篇文章是針對「個人小額經營者」，相信不是所有人都會串接 API，而如果您們是「公司行號」，相信您們的團隊一定有工程師駐點，對 API 一定已駕輕就熟不需要我多說。所以在此我不會特別介紹 API 串接，但如果您有興趣，可以直接到歐付寶的官網下載各種串接規格。

如果有任何問題也歡迎在底下留言，謝謝各位！

WooCommerce 系列教學 (1/3)：安裝與使用

WooCommerce 系列教學，預計分為三篇，請參考以下目錄：

很久以前寫過一篇 WooCommerce 的商品上架流程，但因為圖片都失效了，所以一直把「重寫」這件事情放在心上，但因為有段時間沒碰 WooCommerce 了，怕誤導大家所以遲遲未下筆。

後來，因為我現在有經營手帳寫真市集，是用 WooCommerce + AllPay 串接，所以可以有比較新、也比較完整的經驗分享啦！也歡迎大家購買市集的商品，給我一點支持喔 😳

事前準備：挑選佈景主題與安裝外掛

我不會寫適用 WooCommerce 的佈景主題，所以我都是從網路上找免費的 WooCommerce 佈景自己玩。

開發 WooCommece 的 WooThemes 也有提供免費與付費的主題，有興趣的朋友也可以從 WooThemes 下載。此外 WordPress.org 裡，也有人會上傳適用 WooCommerce 的 Themes，不過就要自己稍微找一下囉。

我選用的範例主題是從 WordPress.org 下載的 Klasik，如果你們想要自己練習，可以跟我下載一樣的佈景主題。

佈景主題裝好後，就可以安裝 WooCommerce 外掛了，直接從後台搜尋 WooCommerce 即可。

▼ WooCommerce 相關外掛有很多，我們首先要安裝的是由 WooThemes 開發的 WooCommerce – excelling eCommerce 主程式

啟用外掛後的第一步，就是安裝翻譯檔啦！WooCommerce 有提供繁體中文的版本，所以大家不用緊張，放手去安裝吧 🙂

▼ 請點選「Install Translation」

▼ 安裝成功後，畫面會變成繁體中文，然後就一直點選紫色按鈕進行你的商品設定即可。

這些設定之後都可以從後台更改，現在不想設定也沒關係 😊

事前準備到此告一段落，一來 WooCommerce 有中文化，二來很多設定都是要靠大家實際的販售情況調整。設定也不難，如果真的有問題再留言給我吧！

WooCommerce 的架構

安裝完左側會多了兩個選單，分別是：

  • WooCommeerce：WooCommerce 外掛相關設定，例如付款格式、付款方式、發送郵件… 等等。
  • 商品：上架或分類商品設定，有點類似「文章」選單的感覺，有獨立的分類與標籤，每一個商品都是一個單獨的文章格式。

那麼，我們該如何在前台顯示 WooCommerce 的相關頁面資料呢？所有 WooCommerce 的資料，我們可以在「頁面」透過 shortcode 進行設定。

▼ 安裝 WooCommerce 之後，他也會自動新增一些頁面在「頁面」選單裡，像是商店、忘記密碼、我的帳號… 等。

這邊提醒大家，因為我們選的是繁體中文語系，所以 WooCommerce 預設會把網址代碼也設為中文，我建議大家到「頁面」選單後」，把所有頁面的代碼都改回英文，不然一些頁面可能會連不上喔！

固定網址也要記得改。固定網址的設定，可以選擇「商品起點」，總之就是確保你的固定網址都是/shop/而不是/商店/

接下來你可以試著連到商店頁面啦，網址通常是http://你的部落格網址/shop，如果你有試著新增商品，可以在這一頁看到所有的商品清單。

顯示特定的分類

一間店會有很多不同分類的商品，這是無庸置疑的，所以你一定會有一個需求，就是在顯示單一分類的所有商品。

假使我們以衣服 👔 為例子，頁面只會顯示分類為衣服的商品，就我所知的有兩種方法，一併分享給大家。 記得要先新增商品分類，這邊就不再敘述怎麼新增了。

直接把連結抓出來

第一種方法，是直接找到「商品分類」的真正網址。

這個方法很簡單，到後台的「商品分類」選單中，找到你想要連結的商品分類，然後選擇「查看」就可以啦 😊

搭配 shortcode

另外，記得我們前面有提到，WooCommerce 幫我們建了一些頁面以顯示資料嗎。

我們先從後台點選「頁面」→「我的帳號」，你會看到文章內有一段程式碼為：[woocommerce_my_account]，這段程式碼，就是我們常用的 WordPress Shortcode。

因此，我們可以用同樣的方式，新增一個叫做「衣服」的頁面，然後插入一段 shortcode，告訴 WordPress 顯示所有分類為衣服的商品：[product_category category="clothing" ]

category 後面接的clothing，就是看你的商品分類的代碼怎麼寫，這邊就跟著寫一樣的字。

( 更多的 WooCommerce Shortcut 資料，請參考 Shortcodes included with WooCommerce )

乍看之下，感覺第一種方法比較簡單，但如果你還有一些特殊的需求，例如顯示指定的 SKU 商品、指定的單一商品 … 等等，都可以透過 Shortcode 幫你達成喔！記得使用方法，都是在「頁面」把對應的 Shortcode 插入即可。

WooCommerce 系列教學的第一篇就到此告一段落了，其實安裝並不難，設定也很簡單。所以我只是把大家初步使用，可能會碰到的問題先整理好放出來，希望對大家有所幫助！

如果有照著安裝的朋友們，可以試著先建立幾個商品，接下來我會分享進階的的商品設定，所以如果你有新增商品的經驗，會更快上手 😊，閱讀或實作有任何問題，都歡迎留言告訴我。

從 CSS sprite 進化到 SVG sprite

很久沒寫文章了，今天想跟大家分享 CSS sprite、Web icon font，以及 SVG sprite 這幾個東西的使用經驗。

這三個東西，雖然看似毫無關聯，但隱隱約約還是有種「進化」的感覺，如果你還在使用 CSS sprite 的技術，歡迎參考一下這篇文章，試著玩玩 Icon font 或 SVG sprite，瞭解並感受一下他們的特別之處吧 😄

CSS Sprite

當我們瞭解到每讀取一張圖，就會佔用一個 HTTP 需求時，我們改用 CSS sprite。
我們將所有網站會用到的 icon，全部集合起來放在同一張圖片裡，利用 class 再搭配 background-position 幫圖片做定位，就做到了 CSS sprite 的技術啦。

圖片取自 smashingmagazine

雖然可以有效減少 HTTP 需求，但他終究是圖片，只要把網站等比放大，圖片就可能會失真。在現今螢幕解析度提高，以及 RWD 網站盛行的環境下，用 CSS sprite 要面對的可能就是這種失真的小瑕疵。

另外一個比較惱人的困擾，就是要把所有的 icon 排在同一張圖片，再自己算出定位，其實很麻煩。雖然可以使用 compass 這樣的 CSS 預處理器幫忙，但也不是所有人都用 compass 啊 😊。

Web Icon Font

因為種種的因素，我們改用了另外一個技術：Web Icon Font (以下簡稱 icon font)，我們利用一些字體文件，將文字轉成圖片。好處是解決了「失真」的困擾，因為即使放大縮小，它的本質還是文字，文字放大縮小是不會失真的，可以保持它原有的清晰度。

但困擾來了，正因為他是文字，所以必須乖乖遵守文字的規範，我們常碰到的問題就是在「鋸齒」與「抗拒齒」之間徘徊，通常瀏覽器都會替文字進行抗拒齒的優化，以免放大閱讀文字時，會有凹凸不平的鋸齒狀，有的時候，某些圖標我們需要這些鋸齒，但另外一些圖片我們需要抗鋸齒，線段類的圖案、圓弧狀的圖案 … 等等，會依照不同的樣式有不同的需求。

而且除了瀏覽器外，不同系統 (WIN, iOS)針對文字的抗拒齒演算法也不同，如果真的要錙銖必較的去調校，應該會調整的天荒地老。

當然，這篇文章不是要一味地告訴大家 Icon Font 的缺點，畢竟我自己也還在用 Icon Font XDD。

這種細微的的改變，一般肉眼看不太出來，而且在解析度較高的裝置觀看，這問題才會比較明顯。如果真的發生類似的問題，我們可以用font-smooth去調整：

CSS
CSS

但誠如 MDN 說的: this is non-standard and should not be used. (他們不是標準格式，不推薦使用在專案上)。

因此，如果真的有這類問題需要解決，我們可以改使用 SVG sprite。 Icon font 還有其他不方便的地方，例如受到font-size, line-height..等等字型屬性的限制。一次要載入上百張 Icon font 的字型檔，但實際上用到的只是那幾張小圖，浪費了讀取的時間。最後還有一點是各家的 Icon font 整合不易.. 等。 當然還是有一些網站服務可以解決部分問題，所以這邊只是把會碰到的狀況列出來，就不再細談了。

SVG sprite

在介紹 Icon font 文末提到有「網站服務」可解決部分問題，而這個網站也是我要介紹給大家的，就是 IcoMoon，他是一個整合眾家 Icon font 的網站，此外也支援 SVG 匯出。

該如何使用它？這邊不再贅述，我們只談 SVG sprite 的功能。

怎麼使用 SVG

在講 SVG sprite 之前，還是先簡單講一下什麼是 SVG 吧 XDDD。其實對我而言，SVG 的定義很簡單，就是用程式碼畫圖，這句話傳達了兩個意思：一、你必須要寫程式碼；二、他是不會失真的向量圖。

透過以上範例，你會發現這張圖片所有的線段(<path></path>)都是寫在 HTML 裡面，然後再利用 CSS 屬性去修改它的顏色、大小… 等樣式。

每一張圖片都有一個自己的<path></path>或者<circle></circle> … 這樣的屬性，通常會寫在網頁的最上方，再利用<use xlink:href="#icon-video-camera"></use>呼叫他。

雖然使用 SVG 可以有效解決解析度、鋸齒 … 等等這些問題，但參考我們上述語法，應該會發現，如果要載入多張不同的圖片，程式碼會拖得很長。為了解決這個問題，我們可以改用 SVG sprite，也就是將所有圖片存在 SVG 檔案，再從 HTML 呼叫他。

SVG sprite 實作

以 IcoMoon 網站為例，先選好你要的圖片，在匯出 SVG 之前勾選 Include Tiles (CSS Sprite)

解壓縮之後，找到sprite/目錄，裡面有一個sprite.svg，原理就跟 sprite.png 一樣，會把所有圖案排列整齊，差別在於它是向量圖，放大縮小都不會失真。

接下來只要在 HTML 載入這張 SVG 檔案，並且透過ID去呼叫對應的 icon 就可以了。

HTML

在xlink:href的地方，就輸入這個 svg 檔案的相對路徑，後面再寫 ID 即可，跟 CSS sprite 相比是不是簡單很多呢。我們不需要再寫background-position去調整他的位子，往後要新增其他的 icon，直接打開 sprite.svg 編輯就可以啦！

因為 svg 目前不支援絕對路徑，所以我沒辦法直接放在 codepen 讓大家看，因此另外做了一份頁面，請參考 🌍 範例網頁觀看效果，也歡迎使用 dev tools 玩玩看。

➡️ 範例：SVG sprite HTML demo

使用 IcoMoon 的 SVG sprite 注意事項

因為 IcoMoon 可以直接提供我們 SVG 的 path 程式碼，而且可以個別匯出，所以我用 IcoMoon 舉例。但如果你以後想用 IcoMoon 做 SVG sprite，請特別注意一件事情，就是你可能需要自行修改它的 SVG 檔案。

什麼意思呢？因為 IcoMoon 把 icon 的顏色、大小都寫死在 SVG 檔案裡，而且我覺得不是很好管理。

以icon-facebook為例，IcoMoon 是這樣寫的：

HTML

以下是我修改後的語法：

HTML

你可以發現我改用 <symbol></symbol> 管理 icon，並且移除了他們固定的樣式。

如果不把 IcoMoon 寫的樣式移除，我們將無法用 CSS 控制這些樣式，所以請特別記住這一點！

我也有把 IcoMoon 跟我修改後的 SVG 檔案放到網站上，大家可以自行打開原始碼比對。

以上跟大家介紹 SVG sprite 的使用方法，以及該怎麼管理。希望對大家有所幫助囉

動手更換 Facebook 的新版面

前陣子等得望穿秋水的 Facebook 終於改版了！雖然改版很開心，但是看了幾個小時後發現體驗不太好，舉例來說，這次塗鴉牆的圖片尺寸雖然變大了，但每則訊息的間距也因此變小，所有訊息交雜在一起，很難分清楚這是誰說的？那篇又是誰發的？假設一個人每天要看的資訊流很大，或像我一樣是 FB 重度使用者一直用滾輪看消息的話，就會覺得很痛苦。

另外廣告真的很阿雜，三欄訊息沒有一個比重，文字都是黑色字體，非常的沈重且壓迫，搞的塗鴉牆訊息無法跳出來，真的很痛苦。

所以花了一點時間微調了 Facebook 的版面，就像是我上面的圖片一樣。如果你的 Facebook 也改成新版了，不妨對照一下我改了哪些東西吧 🙂

原本使用 Stylish 這個擴充元件，只要稍微懂點 CSS 的朋友，都可以透過他在本機修改網站樣式，符合自己的閱讀習慣。此外官網也有許多同好做的佈景樣式，方便我們套用。

但是後來發現另外一套：Stylebot，功能更強大也更好用。雖然樣式沒有 Stylish 多，但是他的網站更漂亮，而且使用起來也更方便！推薦大家使用 Stylebot 喲～

▼ 比 Stylish 好看一百倍的網站！
stylebot

關於 Stylebot 的介紹與教學，異塵行者已寫過一篇文章介紹，我這邊就不再贅述了：

當你來到一個網站，覺得它的內容排版方式不符合你的喜好時，會不會想要自訂替換新的網頁版面？當你正在架設自己的部落格，希望比較各種可能的外觀介面微調，會不會需要一個簡單易用的網頁樣式編輯器？在此之前，能夠滿足上述CSS樣式調整需求的工具，應該是Firefox、Google Chrome皆適用的擴充套件：Stylish。

Stylebot 設計網頁不用懂CSS語法， 親切版Stylish隨意改造網站

套用我修改的 Facebook 樣式

最後要跟大家分享的是我自己修改後的語法，可以參考上面的截圖。
我有將語法放在 Stylebot 上，如果你已安裝相關擴充元件，可以直接點選網址套用：http://stylebot.me/styles/5315

比較特別的修改如下：

  1. 去除廣告 (一定要的)
  2. 修改動態牆的間距，讓每篇文章看起來有個分隔
  3. 修改文字大小、行高與段落，閱讀較為舒適
  4. 加大動態牆的寬度
  5. 刷淡左側側邊欄的顏色，讓塗鴉牆跳出來，不會被左側的側邊欄干擾
  6. 移除左側側邊欄的遊戲、朋友、以及其他資訊，讓資訊更為簡單
  7. 固定左側側邊欄，滾動的時候，側邊欄不會跟著移動
  8. 右側廣告部位預設為小勞勃道尼的帥氣照，懂 CSS 的朋友，可以將 http://i.imgur.com/RAv5bAy.jpg 改成任何你想放的照片。

因為 stylebot 不支援火狐瀏覽器，所以如果你恰巧使用火狐，也可以改裝 Stylish，然後複製我底下的 CSS 語法即可～

CSS

使用 CSS nth-child 必須要注意的事情

之前有寫過一篇 利用 :nth-child() 讓網頁展示商品時左右對齊 的文章，裏面有稍微提到:nth-child()的使用方法。

其實:nth-child()好用的地方就在於他可以針對每個元素做個別的樣式設定，不用再像以往一樣用程式判斷然後算半天。不過我最近發現，有一些排版，沒辦法直接使用:nth-child()達到我想要的效果，所以最後我還是改用 jQuery 撰寫。如果你常使用:nth-child()寫網頁，不妨可以參考一下唷。

再次引用 W3C 的解釋(請特別記住這句話，接下來的範例，受到這句話的影響非常深刻唷)：

:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型。n可以是數字、關鍵詞或公式。

【範例】規定屬於其父元素的第二個子元素的每個 p 的背景色：p:nth-child(2) { background:#ff0000; }

CSS3 :nth-child() 選擇器 / W3SCHOOL

看完如果似懂非懂的朋友，沒關係，請先記住這句話，下面會再詳細解說。這篇文章先當作大家已經會使用基本的:nth-child()。

範例

話不多說，直接上範例，CSS & HTML 語法請看我的 codepen，或參考以下 DEMO：

以上這個網頁結構，分作主課程 (WordPress, CSS, Html) 以及子課程 (install plugin, install theme…等) 兩種；在範例中，我想要做的效果是「當子課程是偶數欄時，背景會變咖啡色」。

左邊是用 CSS 的:nth-child(odd)語法，右邊則是用 jQuery 的:odd selector，大家可以看到最後呈現的兩種效果不太一樣。(是的，你沒看錯，odd 是奇數不是偶數，為什麼我會用 odd 而不用 even，後面會解釋)

就常理而言，應該是右邊的「Use jQuery(:odd)」會比較好閱讀，左邊的欄位變色感覺有些不連貫。如果你有看 codepen 的語法，應該會發現我都是使用:odd來控制，那為什麼計算的結果不一樣呢？難道是 CSS 跟 jQuery 對 odd 的計算方式不同嗎？

其實可以說是，也不是。事實上，這跟 HTML DOM 有比較大的關聯。

版面解析

讓我們先來拆解這個 HTML 版面。這是一個課程清單表，主課程底下會有很多子課程，所以用類似「合併儲存格」的功能，把最前面的主課程欄位合併，這樣在看課程的時候較一目了然。因此，我是這麼寫的：

HTML

我用.class-wrap包住最大的課程類別，再用.content包住子課程。所以簡化版的 HTML 會長這樣：

HTML

接著，回到原本我們想做的網頁效果：「子課程的偶數欄位要變色」。

我們想要變色的 class 是.content，然後是偶數(even) 欄位。假使我們用:nth-child來寫的話，正常毫無疑問會這麼寫：

CSS

但你會發現，用:nth-child(even)後，居然是奇數欄位變色了!! (也可以直接編輯我的 codepen 看結果唷)

揪竟是為什麼呢！？只能說:nth-child是個非常奇妙的東西，尤其碰到像範例這種複雜的排版，整個計算方式會跟常理認知的不太一樣呢！讓我們來慢慢的、一步步了解吧。

一、先了解:nth-child(n)的初始值是 0 還是 1 ?

:nth-child(n)的初始值是 1 ，依序 1、2、3、4 這樣算下來。因此沒有:nth-child(0)這種東西

二、再了解:nth-child(n)的定義

★ 重點 ★ 請把剛才我請你記住的那句話，關於:nth-child(n)的定義，拿出來複習一下：「:nth-child(n)選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型」。

接著，我們再把剛剛的 CSS code.content:nth-child(even)，改成跟定義一樣的句子：「.content選擇器，匹配其父元素.class-wrap的第偶數(even)個子元素」

… 好吧，我覺得大家一定看不懂，讓我改用白話文說一遍 (嗚嗚，要講解這一部分好難啊，不要逼我自暴自棄 T^T)

  1. 先找到.content的父元素：.class-wrap。
  2. 找出.class-wrap底下的所有子元素，以剛剛的語法範例來看，第 1 個子元素是class="class"的主課程標題，第 2 個子元素才是class="content"的子課程 1 。 主課程標題 1 子課程 1 子課程 2
  3. 因此，原本我們以為「子課程 1 」會是匹配父元素的第 1 個元素，但因為.content前面還有一個.class，所以「子課程 1 」變成了匹配父元素的第 2 個元素。
  4. 再重新把.content:nth-child(even)拿回來看，其實符合偶數(even)的元素是這些：

這樣大家清楚嗎？因為前面多了一個不是.content的 class，但他也是.class-wrap的子元素阿！所以全部算下來，原本我們以為的偶數會是奇數、奇數會變偶數。因此我的範例語法才會寫:odd而非:even

如果了解，就讓我們繼續進行下去。

三、為什麼 n 的計算不是從 1 到 100 呢?

因為:nth-child(n)是以父元素.class-wrap作為起始點。假設第一個主課程底下有 4 個子課程，他的元素依序計算為 1、2、3、4；但，到了第二個主課程又會重新從 1 開始計算，並不會從 5 繼續數下去。

這就是為什麼我們看到左邊的範例會感覺參差不齊，但如果你把每個.class-wrap都當作一個段落，就會發現他其實偶數的元素還是會變色的。

圖解

那，到底每個子課程的:nth-child(n)是多少？

還是不太清楚的朋友，可以再看看我寫的 codepen：http://codepen.io/mukiwu/full/nmlkt ，然後隨意點選任何子課程的欄位。你會看到如下結果：

如果你點選了任意子課程的欄位，可以在紅底的區塊看到一些數字。

簡單總結：

  • 「Use CSS nth-child(odd)」：以主課程作為區塊，每個主課程結束以後，會重新開始計算。這邊出現的數字是該欄位的:nth-child(n)的 n 值
  • 「Use jQuery(:odd)」：單純計算有多少子課程，不受主課程影響，所以會從 0 算到最大個數。這邊出現的數字是所有子課程的 index 值

以上是兩種寫法主要的差別。

利用 jQuery :odd 撰寫

就如前面所說，為了視覺的平衡，我們幾乎都會採用右邊的表現手法，所以可以改用 jQuery 撰寫：

JS

只是要特別注意的是，jQuery(":odd")的初始值是 0 不是 1，所以第 1 個子課程是偶數、第 2 個子課程才是奇數… 以此類推。

我們以為偶數的欄位是奇數，以為奇數的欄位是偶數，這樣的情況會再度發生。

總結

如果你會用到像我這樣的排版，直覺的使用CSS nth-child來撰寫的話，也許會碰到同樣的問題。因此，可以嘗試使用 jQuery 解決。如果有可以直接用 CSS 解掉的方法，也歡迎告訴我唷：)

以後，我會將一些寫的較漂亮的範例轉移到 codepen，如果你喜歡我寫的範例，也歡迎到我的 codepen 支持我唷

想從設計走到前端？先了解前端在幹嘛吧！

你是設計嗎？你想往前端發展嗎？那先瞭解前端在做什麼吧 ：)

設計的工作流程

身為一個過來人，應該說我也還正在這條路上行走，有一些心得想跟大家分享。我是從設計起家的。設計的領域又可粗分為圖示設計跟排版設計…等等，而我是屬於排版這一塊。做網頁的流程大致是：

  1. 打開 PhotoShop / Sketch 從一張空白的圖層開始做出一個網站
  2. 進切版(用 PhotoShop / Sketch 切出需要的 icon) 以及 Layout (用 HTML + CSS 做出網站)
  3. 會碰到 JS 的互動時，我能找套件就先幫忙做好，不行就放著給後端
  4. 丟給後端套程式。

如果你不是純視覺，我想你的工作流程可能跟我差不多。那，這樣不算是前端嗎？

(閱讀全文…)

淺談 section 運用以及與 outline 間的關聯

HTML5 正夯? 恩，其實夯很久了！而 HTML5 絕對不只有語意那麼簡單罷了，它包含了很多前端的新功能與新技術，語意只是其中的一小小小塊。

今天要跟大家分享的是 <section> 標籤，網路上有很多關於 <section> 的解說，常見的文章是拿來跟 <article> 比較，可是我看了很多篇都似懂非懂…，所以又跑去看了國外的文件。

從今年開始，我寫的 HTML 會漸漸從 XHTML 的 !DOCTYPE 走向符合 HTML5 的 !DOCTYPE，隨著 HTML5 的規格釋出，語意會是我優先嘗試的部份，從整個網頁結構以及 SEO 來看，語意是 HTML5 的必備基礎知識，所以我們就先從 <section> 開始吧！

W3C 對 Section 的定義

不免俗的，一定要寫一下 W3C 的原文說明：

The <section> element represents a generic section of a document or application.

  • A section, in this context, is a thematic grouping of content:
    • chapter
    • various tabbed pages in a tabbed dialog box
    • numbered sections of a thesis …
  • A Web site’s home page could be split into sections for an introduction, news items, and contact information.
  • The section element is not a generic container element. The section element is appropriate only if the contents would be listed explicitly in the document’s outline.
  • A section typically with a heading.

@HTML/Elements/section – W3C

看得懂 W3C 原文的朋友，其實可以按右上角的 Close 離開了 😛 ，看不懂的朋友，歡迎繼續往下看 🙂

section 到底是甚麼意思

先撇開 W3C 這些落落長的解釋名詞，我們先用常識去判斷甚麼是 section ？透過萬能的谷歌大神可以了解：

  • section 不是一段完整的文章，article 才是
  • section 可以作為一個章節、或一個段落的區隔。

另外，如果我們單純搜尋 section 這個單字，可以看到他是空間設計的隔間

上圖用灰色粗線條一個一個分隔的區塊，就是 section(一個章節、段落的區隔)。而整個一大棟的建築物是 article (獨立完整的文章)

再從空間設計拉回網頁設計，以結構面來說，可以做成以下的示意圖

如果你曾搜尋過 , ，會發現每個人畫的結構圖都不太一樣。有的跟我提供的示意圖一樣，是用 <section> 包覆 ；但有的剛好相反，是用 <article> 包覆 。

我沒辦法告訴你哪種才是正確的？或者該有怎樣的準則。

因為兩種都可以，怎麼去撰寫 HTML tag，是根據你網頁的結構而定，因此他沒有標準的答案。我們唯一能做的是把他們的差別搞清楚，也把你網頁的結構搞懂；唯有都清楚了，才能正確的寫出對搜尋引擎友好的語意。

我對 section 的理解與定義

最後，結合 W3C 對 section 的定義，以及透過網路上對 section 名詞的解釋，我將 section 的定義總結如下：

  • section 用來作為一個有意義的章節，或段落的區隔。
  • section 在一張網頁可以出現很多次。
  • section 不是用來包覆一段完整且獨立的文章(例如 Blog 的內文)，要做這件事請交給 article
  • 被 section 包覆的段落，通常都會帶有 headling 標籤(這跟等等提到的 outline 有強大的關聯)

看完這些定義，大家有沒有發現，其實最重要的一點是要去「判斷這些區塊，到底是不是獨立的文章」？或者是「有意義的章節或段落」。而判斷這樣的頁面結構，就是要跟案主做良好的溝通，了解他們網站的需求，並且先將 outline 定義出來 =)

※ 如果你已經知道甚麼是 outline，可以選擇跳過 outline 的介紹 ※

什麼是 outline

outline 就是我們常說的「大綱」。當搜尋引擎在爬網站文章時，可以根據網站提供的大綱抓出每張網頁的目錄以及重點，每張網頁都可以有自己的一份大綱。

以部落格文章為例子，我們在寫文章的時候，都習慣用 heading tag 做大標、小標…等等，方便使用者閱讀，而這樣的標記在網頁結構裡，就算是一個大綱。只是我們用顏色區分讓使用者容易閱讀、而對搜尋引擎來說，他就是利用 heading tag 來了解每一段的大綱與章節。

如果想要知道你的網站大綱長甚麼樣子，以下有幾個方便的工具讓你運用：

1. Google 擴充元件: HTML5 Outliner
這個 outline 檢測工具非常好用，只要網站有把結構做出來，他就可以根據你的 HTML tag 秀出網站的大綱。另外如果文章很多懶得爬文，也可以直接點選有興趣的大綱文字，它會自動跳到該段落，有點像書籤的效果。

2. HTML 5 Outliner
方便的 Outline 檢測網站，可以上傳 HTML 檔案、用 URL，或是直接貼 HTML code 在文字欄位裡，他就會秀出這個 HTML 的大綱，適合在本機測試或不是用 Google Chrome 的朋友。

怎麼寫 outline

在 HTML5 尚未問世，還沒有 section tag 時，如果我們要做出像下面這種層級目錄的 outline：

Plain Text

通常會用 heading tag 給 outline 做階層 (可以直接貼到 HTML5 Outliner 檢測工具看喔)：

HTML

簡單來說，就是用 <h1>, <h2>, <h3> 做組合。

<h1> 是階層一，<h2> 是階層二 … 以此類推

但是問題來了，heading tag 除了可以幫助做出層級大綱外，他也代表著每個網頁的重要性，我們習慣設定 <h1> 為整張網頁最重要的部分，依序為 <h2> → <h3>

如果我今天覺得「1. 流量來源」跟「1.1 總覽」、「1.2 來源」是一樣重要的文章大綱，畢竟「1. 流量來源」只是一個引言，真正重點內容是放在後面的 1.1 以及 1.2，我希望他們同樣是 <h2>，那該怎麼做呢？

在 HTML5 以前，這個問題無解。因為即使你用 <div> 包覆的很漂亮，或是做了很棒了縮排，但是對網頁標準來說， 沒有任何的意思(無語意)，他只是一個用來做排版的容器罷了。

HTML

所以你用 Outline 工具跑出來會是長這樣，沒有任何的階層：

Plain Text

那麼，如果我們同時要滿足大綱的「重要性」以及「階層性」，該怎麼做呢？所以 W3C 幫我們定義了這個新的 HTML 標籤：<section>

承接我們剛剛舉例的程式碼，如果我們把 <div> 換成 <section> ，會發生甚麼事情呢？

HTML

讓我們丟到 Outliner 檢測工具看看，會出現這樣的結果：

Plain Text

初步來看，是達到了我們的期望，即使都用 <h2>，也可以做出階層的 outline。只是你會發現最上面多出了一個「Untitled Section」，所以請移除最外層的 <section>，將語法改成：

HTML

這樣就會是我們想要的結果了：

Plain Text

<section> 所包覆的區塊可以用來做每一段的大綱，而大綱的標題就是用 heading tag <H> 表示。但是 <section> 的最上層還是要有一個主標題才會讓整張網頁的大綱完整。

section 的進階運用

1. section 內同樣有階層之分

HTML

輸出結果：

Plain Text

2. section 可搭配 hgroup 做大綱的微調

被 包覆的 heading tag，除了第一個 heading tag 之外，其餘的 heading tag 都不會出現在大綱中。( <hgroup> 已被 W3C 移出 HTML5 標準，所以我就簡單舉例，想要測試的朋友可以自行玩玩看)

HTML

3. section 碰到特定語法將不視為大綱

當 <section> 碰到像是 <blockquote>, <details>, <fieldset> 時，被包住的 heading tag 不會出現在大綱。

HTML

輸出結果：

Plain Text

讓不支援 HTML5 的瀏覽器支援 <section>, <article> 等標籤

步驟一

打開 reset.css 或是其他的樣式檔案，如 style.css，加入以下語法 (默認為display:inline)：

CSS

步驟二

開啟網頁檔案，再網頁最上方加入語法，用 JavaScript 幫這些不支援 HTML5 的瀏覽器，建立新的元素。

JS

以上。有任何問題都歡迎留言指教 🙂