Rebuild/Beautify Your Blog

自從blog搬來搬去之後,這個站就有種品質每況愈下的窘境(絕對不是因為我太懶的關係,而是因為我本來就寫不出什麼有意義的東西!!),不過文章沒有內容一向不是我重視的部份(無誤),所以就暫時不去管它了,不過最近倒是有個部份讓我非常不能忍受的 - 糟糕到一個境界的UI...0rz

之前也提過,因為目前又轉到docpad上面來寫,雖然docpad在基本功能上幾乎沒什麼好挑剔的了,不過有個麻煩的地方,就是它沒有太多好看的模板可以直接拿來用。所以我一開始其實是直接用原作者Benjamin Arthur Lupton的網站來用,不過後來想想不自己刻一個屬於自己的版面實在太浪費Github Page的優勢了,所以稍微開始物色一番。

我覺得應該不少Programmer都有一樣的想法(自以為),就是寫寫html、js可能不是什麼大問題,不過要設計出一個不錯的UI/layout可能就非常困難了,因為理性跟感性通常是不會並存的(可以這樣解釋嗎 :p)

之前的 wordpress || jekyll 之所以不會有這個問題也是因為太多Designer已經幫忙做出很多相當美觀的模板,也很大方的分享出來造福大眾。不過對於docpad這個剛出來沒多久的東西來說,能用的資源就沒有那麼多了,當然你可能會說,jekyll用的跟docpad不是一樣嗎?反正它們都是static page generator!? 是這樣沒錯,但是還是得作些細部調整,而且porting就是一件麻煩事阿...

不過一切就在最近有了改變(雖然這邊的介面還是一樣糟糕),因為最近docpad引進了twitter open source project - bootstrap

Twitter Bootstrap 硬要貼圖!!

其實也不是什麼神奇的東西,只是twitter把一些它們的網頁設計的素材開放出來,提供了一些常用在網頁上的一些元件,同時幫忙處理了一些網頁相容性的問題,讓你可以很快速的兜出一個還不錯看的頁面來,拿來作prototype也相當方便。使用方法也很簡單,就直接參考官方的說明就可以了,直接套進你想呈現的部份就可以了,其他的bootstrap會幫你處理好 :p

另外,提到bootstrap的話,就不能不提一下less (硬要扯上 XD)

因為平常沒太接觸CSS的東西,所以剛看到這個好物的時候大驚了一下,不過less其實也已經出現好一段時間才是。我覺得less的概念跟之前提過的CoffeeScript有點類似,都是想針對原本不是那麼方便的語法進行修改,讓Programmer撰寫上更方便。如果稍微知道CSS的話應該就知道,先不要考慮什麼平台相容這種麻煩事,光是要寫CSS就是一件令人心煩的事(無誤),寫久了會發覺好像一直在做重複的事,所以less引入了許多一般程式語言的功能,讓撰寫CSS也可以像寫其他程式一樣,節省作白工的時間 XD

這部份可以看一下less上提到的VariableMixinsFunction等,你應該就會有感覺了 :p

Twitter Bootstrap本身就有less的格式,docpad也支援less的使用(應該說它預設就是得用less),所以可以輕鬆直接拿來用,如此一來,至少可以稍微美化一下這邊醜陋的版面 XDD

Ferrari Lee

Read more posts by this author.

Subscribe to Ferrari != Ferrari

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!