BigBuild

敝站2010年新年新版改造大紀事！

為了迎接全新的一年，我下了個重大決定——澈底更換掉原先的版面。
但沒想到，不換則已，一改弄便不得已......彷彿開啟那命運的轉輪！？

因此，我接觸到更多的皮毛語法，在網路上邊看教學邊比對各家同異之處。令人不禁感到一股強大的力量於背後影藏著......我十分的詫異異異，

整個工程做下來竟比我想像的 更．加．浩．大！

我的腦袋瓜子不免鬧了偏頭痛——這該怎麼辦才好 ＝口＝a

。即使如此，我還是硬著頭皮上了，而問題便一一接踵而來。
第一遇到的問題就是最重要的：要更換何種版面，於是我挑了好久。
會想換版面的第一原因即物件側邊欄太小，文章區太大
（養成我放大圖的壞習慣 XD），而且原版型的細部設定我根本無從調起
，她的 CSS 語法對我來說太難，我掌握不到。於是在遍巡各網站後，
我找到兩個我很滿意的：一白一紅。

原版型（點擊可另開原圖）：

一白（點擊可另開原圖）：

一紅（點擊可另開原圖）：

原版型就不多說，藍白清爽是她最大的特色
至於白色是我套過這麼多版型後，我可以對其各個欄位大小
做出最詳細設定的，但在更換途中遇到了 Mulit-Tab 樣式不相容
（就是變醜）的問題。當然，我沒有馬上放棄，開始積極尋求解決方式，
但後來宣告不治。
於是繼續觀望有無更好的版型。後來便找著了紅色。

其實，紅色在找的過程中有瞧見過縮圖，但沒想要進去看看。
非得等到山窮水盡，才願意每種都試試。我果真十分犯賤 XD，
而重新尋找的過程也考慮了新要素，即希望版型和原來的一樣，
不會因視窗放大縮小而在視窗底部跑出拖曳條。
也因這樣的版型不多見，所以很快找到了紅色。

第一眼看到紅色時，眼睛其實是抽畜的。心想，這什麼鬼！？
但過會便發現其設計的巧思。
意即，是非分明的二分法──中分！
理解後越看越順眼，但也意味著沒法馬上上手。
等到後台的版面語法一看，我嚇到了。
她左右版面的寬度不是用一般圖片那種幾乘幾的算法（例如：1024*768），
她是用啪數（百分比）下去區隔開來的，但這還不是重點。

重點是，她是計算和螢幕邊緣的空白百分比，
以此來控制文章區和側邊欄物件區的大小，
而且是用反面的看法來判斷，更神的是左右區塊都有兩種啪數計算。
這也就是說（以文章區為例），
當我文章區左邊和中間分格線的距離設成 49.5% 時，
她看的不是 49 這數字，而是看剩下的 0.5%。
所以文章區和中分線的間距還是有，只是很小，只有 0.5% 的百分比。

而文章區右邊和螢幕（視窗）邊緣的空白百分比也是這樣看。
假設現在設成 85%，即代表，
和邊緣的距離，只有 15%。（50% 裡面的 15%，應該啦 XD）
以上是我試了點時間才發現的，為了調整最適版面改弄不下數十次。

第一問題，模版搞定後，接下來的一切就很順利了。
當然，這也只是我以為！？
再來第二問題雖不是最主要的，但卻花掉我最多的時間。
這問題便是 Muli-Tab 的問題，也就是各位在旁邊看到的（首頁才看得到）：

時：時計區
客：訪客區
言：留言區
寵：寵物區

為了這能統合多重頁面的單一欄位，真是搞死我不償命 ＝口＝，
中間一度想放棄，再改回三欄式的版面（原版型即是）。
但我仍想搞清楚，為什麼別人沒問題而我卻有問題。

對我來說，理想的多重分頁效果需有幾個條件：
第一，要自動配合側邊欄大小，也就是側邊欄寬度有多少她就會配合多少。
第二，要自動配合內容物大小，也就是裡面的物件有多長她就會配合多長。
第三，要能自行修改顏色樣式，以便配合部落格的版型。

基於以上幾個條件，我找到了一些 TAB 的教學。
首先是我最先使用的（原版型就用過了）：tab-pane，
這是我第一次接觸到統合多重頁面的工具。
她會自動配合欄位和物件的大小，我原本想用這就好了。
但沒想到，在移植白色版面時出現了樣式很醜（甚至走樣）的重大問題。
因此，不得不另尋它法（以及其他版面），但中文教學又只能找到 tab-pane，
於是我便開始尋找【英文教學】。
沒錯！你沒看錯，我挑戰了自己沒幾兩重的英文 XD

艱難的一步於是跨出，我找到了 tab-ber！
這個不輸 pane，甚至更好用。
因為我無法調整 pane 的顏色樣式
（所以放到紅色版面無法融合），但 ber 可以。
我興高采烈的研究一番，該改的都改好了，便放到紅色版面。
但，最糟糕的事情發生了！
當測試各個瀏覽器的瀏覽狀況時，ber 在 IE 下完全失效！！！
更，我不禁要詛咒一下 IE6 和 IE8......
托他們的福，我要全部重來，另訪它種分頁方式。

這中間試了不下數十種國外教學和各種樣式的安裝，
最後全宣告失敗，我有種很絕望的感覺......
中間有以為成功過幾次，但測試 IE 後都失敗。
而在比對了各家的原始碼後，我發現會失敗的，
都是以 ber 為基礎的教學。更，該屎的 IE！
我表弟看我整整兩三天都在研究這分頁物件，都勸我別理會 IE 了。
我承認有動過這樣的念頭，但也看到有人成功使用單一多重分頁。
（當然也看過別人的效果在 IE 下失敗，也是因為用了 ber）

於是，我不死心。
繼續用關鍵字搜尋國外教學。
終於，黃天不負苦心人！
讓我發現別種達成單一多重分頁的方法，
也就是所謂的 jQuery！？
請別問我那是什麼東西，因為我也不知道 XD，
只是當出現不同的基礎教學方式，我彷彿看見曙光。
當下趕緊嘗試這樣的分頁教學。
於是出現了現在這個【時客言寵】的單一多重分頁物件。
不過，這中間我有妥協第一條件，但這無大礙，只是自動變手動而已。
現在用的是我試了好幾個後，其顏色樣式我改起來較順手的。
能夠改得和背景融合——原本是藍白色，且有兩層框架（內外都有框線）。

在解決了最嚴重的問題，接下來就爽多了。剩下的工作就是，
把先前用到的一些功能語法貼一貼擺一擺就行。
當然，這中間也意外發現一些新東西和新問題。
新東西就不多談，等會會有份統一的記錄。
而新問題就是，版面有些地方的字型太小，於是苦惱開始。
不過還好，在經過 tab 的洗禮，已較能準確找到版型的一些關鍵區域，
改起來相對就順手一點。

字型大小處理完，再來便是將以前想放的東西弄上去，
但可能因此拖了一些速度吧 XD......
有個比較大的更動就是，每月文章彙整的物件我拿掉了。
改成日曆模式，加上標籤選台器，兩兩輔助以達到搜尋文章的效果。
畢竟我的網誌搜尋條是沒路用的，雖然用到搜尋的機會幾乎等於零 XD

最後來記錄一下新物件和新改動的地方，首先是一些新物件：

label：
在內建的基礎下升級成標籤選台器，這是我覺得最實用的東西。
它可以在不用重新讀取網頁的狀況下，
觀看和搜尋所有標籤和文章標題的利器！

calender：
文章日曆，這是我覺得第二實用的東西。
它可以自行鍵入年份和選擇月份，
以便了解每個月裏在哪些日子 PO 了哪些文章。
因此，我把原本內建的每月文匯整功能拿掉
（也可能再拿回來就是了 XD）。

response：
加強型的最新回應變得更好用了。
能直接展開和收合留言內容，以及直接前往該文章留言，一目了然。
（雖然不怎麼會有人留言就是了，除了我自己 XD）

random post：
隨機文章，就......玩玩看看吧！
原本的 2.0 版可以玩玩的，但會造成 IE6 連線時當機，
所以換回原基本樣式的 1.0 版，速度也較快。

時客言寵：這純粹是我想玩的鼕鼕，有興趣的可以看看先 ^0^，

Google 翻譯：
原本是用微軟的，但似乎和某些物件相衝，所以改成咕狗，
而且它會自動配合網頁顏色樣式，蠻強的。
原本是用一個側邊欄位表示，
但我想了辦法融入到內建版面裏。

mind image：
沒什麼特別的，純粹用來測試側邊欄位的大小，
現在是 281px，可能不定時換圖吧 XD

再來是一些新改動的地方：

第一個是文章上頭提示的文字，在網頁任何地方點選滑鼠左鍵兩下，
就能快速回到網頁頂端，不用在一直用滾輪。因為文章有時候小長，
所以增加此功能。至於下方的照片流廊，看看就好囉......

第二個是點進文章本身頁面時，會看到上方有個類似導覽的東西，如：
【導覽連結： 首頁 -> 年份: 2009 -> 月份: 11 -> 標題: Blackout】
這樣的鼕鼕。

第三個是拿掉原本首頁下面的數字分頁（跳頁）效果，因為有了選台器
，在文章瀏覽方面快很多，所以用內建的較舊較新文章的分法就好。

第四個是，除了首頁和文章本身的頁面之外，任何地方的文章，
例如，較舊的文章頁面或是 post tree 裡年份、月份的文章彙整頁面
，通通只會顯示文章標題，增加一些速度。

第五個是在文章下面內嵌回應的部分，有了回應編號。

第六個是標籤部分，我稍微重整了一下，讓字數精簡，以及讓類別稍微重複。
以便使文章本身頁面下方的相關文章能豐富一些。

第七個是中央分格線上下兩個小正方形【CONTACT】的部分，
是我的 Flickr 相簿。

第八是線上人數的部分，不過這部分還沒定案，
而且我也打算再增加個網誌清單之類的，
所以剩下的便不贅述。

以上的
以上便是這次改版歷程的梗概。唉！塵埃總算有個落定，
希望大風別再來了！

--
the source of the pic : 糟糕島和自家硬碟。
--