Blogger大改造 Action One

在看到Aican把他的Blog改頭換面後，害我也開始覺得不改很手癢。事實上當初選擇Blogger的原因，就是因為非常懶，不想自己架平台、不想自己裝佈景、不想自己裝外掛，所以隨便選了個預設版面，就一直沿用至今。但是看到愈來愈多不像Blogger的Blogger Blog，開始思考著用個和別人不一樣的版面似乎也不錯。

在早些年前，約末還在讀初中的時候，當時對於出道不久的DHTML技術，也就是DOM/CSS / JavaScript，我也曾經算是個技術狂熱份子，每天放學回家就是做網頁，廢寢忘食也荒費學業，市面上一有出現DHTML的中文書，立刻就跑去買回家，微軟的IE(不好意思當時還沒出現Mozilla/Firefox，而Netscape正在走下坡…)支援了什麼新語法，就想辦法加在自己的Homepage(當時譯作烘焙雞)中，加到最後就是一堆程式控制飛來飛去的動畫，沒有夠快的電腦開網頁時可能會當機。

從前寫CSS/JavaScript是超級無敵麻煩的，幾乎是需要為不同瀏覽器寫不同程式片段，甚至不同瀏覽器的版本也會需要多一些判斷來彌補差異之處。近幾年來，Web已經不再是從前的那個麻煩Web，DOM/CSS2讓各家主流的瀏覽器有較一致的呈現效果，加上jQuery、scriptaculous、ExtJs…有了這些讓Web 2.0更容易實作的Library，又有Firefox這樣好用的瀏覽器(藉由它超強除錯、網頁開發輔助功能)，想把網站改造成什麼樣子其實都不是難事。

雖然不像以前一樣沉迷設計網頁，但這幾年來並沒有間斷在網頁技術上的研究，只是一直都是用在工作的專案上，對於新技術必須幾天、幾小時去了解後就開始導入實作開發，技術本身不再是重點之後，我就不敢說自己懂任何一項技術了，畢竟對一個資管人來講，聽過足夠多的技術、知道什麼時候需要派什麼上場，在工作上就已經足夠。

這次的Blogger改造行動，圖片暫時不打算自製，找到一個還滿意的Wordpress Theme Hello :D，拿它的圖片和配色當素材，開始Blogger版面的徒手改造。

為了方便寫CSS、JavaScript，我先將Blogger版面HTML源碼中的CSS設定區給去除，改以link的方式嵌入另一台主機上的.css/.js檔案，如此一來就能夠輕鬆地用vim或其他文字編輯器直接修改，不用再透過Blogger那並不好用的HTML編輯功能儲存修改。

Blogger本身輸出的HTML品質是很不錯的，該有id或class屬性設定的地方，幾乎一個也不少，所以大到整個畫面、小到一個標籤連結，都能夠輕鬆地透過CSS去改變外觀。有id的設定對於進階的修改很重要，例如在文章區塊中，我們並不能夠直接透過改HTML去決定組成元素的順序，或是顯示的文字，但是有了id屬性，利用JavaScript的DOM控制，就能夠做到幾乎是隨心所欲的變化。

許多JavaScript是必須等到畫面載入完，包含所有圖片、Script等等，才能夠開始動作，這樣很容易造成畫面顯示的不流暢，這部份其實不要用onLoad，改用DOM的Ready Event就能克服。首先加入一個功能齊全的JS Lib，我選擇的是jQuery，因為之前只聽過它的大名，卻還沒動手玩過，趁著這次的改造，有機會深入研究一下。

細節該怎麼做？我也還在摸索，或許有了些進度再來寫個教學…