2008年8月16日

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,因為之前只聽過它的大名,卻還沒動手玩過,趁著這次的改造,有機會深入研究一下。

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

5 則留言:

  1. 快快~~~期待泥的大作唷…哈!

    ps. 泥把我的網址打錯了啦…ccc

    回覆刪除
  2. 還要玩上好一陣子咧

    Blogger的樣板用XML寫程式..光看CODE眼睛就花了..更別說寫CODE ~.~

    網址修正了
    不過aican.info沒連結有點可惜

    回覆刪除
  3. 真厲害…一下子就改出簡潔、漂亮的版型…水啦!!!

    回覆刪除

lyhcode by lyhcode
歡迎轉載,請務必註明出處!