2012年7月29日中午，在SAE中看到博客應(yīng)用性能等級(jí)為“D”，作為完美主義者兼強(qiáng)迫癥的我受到極大刺激，自詡前端開發(fā)發(fā)燒友的我，個(gè)人博客使用的竟然還是別人設(shè)計(jì)的主題，雖然曾稍作優(yōu)化，但仍是覺得代碼臃腫卻平凡單調(diào)，再想想我至今甚至未有多少自己較為滿意的前端作品（詳見 我的作品整理 ），于是立馬開始了新主題的設(shè)計(jì)。

原本的博客主題 ：

由于剛剛安裝了 Visual Studio 2012 RC版 ，發(fā)現(xiàn)新版的黑色界面非常不錯(cuò)，黑藍(lán)灰搭配的顏色也非常順眼，于是決定放棄原主題的淺色系色彩，采用這三種顏色的搭配方式來(lái)設(shè)計(jì)，追求無(wú)圖片，高性能，高細(xì)節(jié)，高質(zhì)感，高兼容性，高點(diǎn)擊欲，結(jié)果到了晚上……

頂部沒有思路暫未進(jìn)行設(shè)計(jì)，看起來(lái)太過單調(diào)，還加了一些彩蛋，如側(cè)邊欄可以滑動(dòng)，與主題內(nèi)容左右互換，文章可以收縮只看列表等等：

然而第二天起來(lái)，頂部怎么想也找不到靈感，越看越覺得這樣的設(shè)計(jì)很土很小家子氣很不倫不類，這樣改版和不改還有什么區(qū)別！一怒之下直接推倒重做。想想這次設(shè)計(jì)失敗的原因，對(duì)比原主題和第一版主題，發(fā)現(xiàn)其實(shí)兩者大同小異，設(shè)計(jì)的思路被傳統(tǒng)博客頂部底部側(cè)邊欄的布局給限制住了，又怎能設(shè)計(jì)出突破常規(guī)，讓人眼前一亮的作品呢？

于是我瀏覽各大輕博客網(wǎng)站，尤其是 點(diǎn)點(diǎn)網(wǎng) ，瀏覽各種風(fēng)格的博客模板設(shè)計(jì)，搜索其他前端博客進(jìn)行參考（結(jié)果發(fā)現(xiàn)不少前端網(wǎng)站都做的一般般，還是點(diǎn)點(diǎn)網(wǎng)的設(shè)計(jì)比較靠譜，各種細(xì)節(jié)方面的掌控，各種落落大方的布局……）。

最終決定的方案是——

• 簡(jiǎn)潔大方的設(shè)計(jì)風(fēng)格，太過華麗容易產(chǎn)生審美疲勞
• 加強(qiáng)細(xì)節(jié)而不顯得累贅，簡(jiǎn)潔與單調(diào)的區(qū)別就在細(xì)節(jié)之間
• 盡量不使用圖片以減少http連接數(shù)，提高性能
• 采用布局以適應(yīng)不同分辨率
• 減小單個(gè)頁(yè)面內(nèi)的信息量，突出重點(diǎn)
• 高兼容性，在不同的瀏覽器中瀏覽一致，而在低版本瀏覽器中也不至失真

7月30號(hào)晚（或者說(shuō)7月31號(hào)凌晨）基本完工，最終效果如下（地址： http://lanfei.sinaapp.com/ ）：

這次的設(shè)計(jì)只有分類導(dǎo)航與頁(yè)面內(nèi)容兩個(gè)主體部分，沒有像傳統(tǒng)博客側(cè)邊欄那般繁雜；許多效果如陰影，圓角乃至模仿漫畫對(duì)話框的三角形等均直接使用CSS實(shí)現(xiàn)；而圖片則隨滾動(dòng)條移動(dòng)進(jìn)行加載，減少http連接數(shù)；評(píng)論部分采用了比較突破常規(guī)不拘一格的設(shè)計(jì)，評(píng)論者頭像突破容器，而仿漫畫對(duì)話框的箭頭則指向頭像。

順帶在微博上征求了各方意見， @Alex楊惠淋是也 與 @第七星塵 均提出了使用Ajax加載的建議。

于是8月1號(hào)開始無(wú)刷新加載的實(shí)現(xiàn)，Ajax的無(wú)刷新加載很簡(jiǎn)單，很快就實(shí)現(xiàn)了，但馬上發(fā)現(xiàn)一個(gè)問題，使用Ajax加載頁(yè)面無(wú)法前進(jìn)后退，刷新頁(yè)面也會(huì)回到最初進(jìn)入的頁(yè)面，這將大大影響用戶體驗(yàn)，而若用戶想將鏈接分享給他人，地址欄中的鏈接甚至不是當(dāng)前頁(yè)面的真正鏈接！

這是一個(gè)非常嚴(yán)重的問題，除非在使用Ajax加載的同時(shí)能夠改變地址，才能夠避免這個(gè)問題。但我們知道，HTML4及以下想要改變地址而不刷新頁(yè)面只有通過地址后面加井號(hào)（#）來(lái)實(shí)現(xiàn)，但這并不能達(dá)到我想要的效果，無(wú)法改變成所加載頁(yè)面的真實(shí)鏈接，于是我想到了HTML5中的“篡改歷史”的新特性，其原理是在當(dāng)前的歷史記錄中可以插入一條新記錄，也就是模擬了用戶進(jìn)入新頁(yè)面的效果，同時(shí)還可以改變地址欄的地址而不刷新頁(yè)面！曾經(jīng)點(diǎn)點(diǎn)網(wǎng)也在登陸注冊(cè)鏈接上嘗試過這個(gè)效果，而后來(lái)取消了，現(xiàn)在大家想看看這個(gè)效果可以去 GitHub ，當(dāng)然本站當(dāng)前也有這樣的效果，但沒有做類似GitHub的切換動(dòng)畫。

而當(dāng)我終于將這個(gè)效果實(shí)現(xiàn)時(shí)，又發(fā)現(xiàn)了更多問題，比如當(dāng)點(diǎn)擊了某些鏈接時(shí)不應(yīng)該使用Ajax加載（站外鏈接，管理鏈接，帶井號(hào)且地址與當(dāng)前頁(yè)面相同的鏈接等等），帶井號(hào)的鏈接Ajax后無(wú)法跳轉(zhuǎn)至相關(guān)位置，某些使用了CSS/JavaScript的頁(yè)面通過Ajax加載后沒有效果，甚至瀏覽器前進(jìn)后退時(shí)內(nèi)容沒有改變等等等等一系列的細(xì)節(jié)問題，我才發(fā)現(xiàn)原來(lái)想要實(shí)現(xiàn)無(wú)刷新效果并非那么簡(jiǎn)單……

但作為完美主義兼強(qiáng)迫癥的我怎會(huì)如此罷休呢，開始著手這些細(xì)節(jié)而又至關(guān)重要的問題的解決，首先吧啦吧啦，然后吧唧吧唧再接著乒呤乓啷……終于，8月1日凌晨2點(diǎn)23分，終于將各種問題搞定，順帶在帶井號(hào)的鏈接上實(shí)現(xiàn)了平滑滾動(dòng)效果。并將無(wú)刷新效果插件化，后臺(tái)一鍵啟用禁用，甚至可以適用于其它主題。

8月1日，相安無(wú)事，只是做了一些細(xì)節(jié)的改善與查漏補(bǔ)缺，SAE顯示應(yīng)用性能提升到B……

8月2日，打開SAE應(yīng)用性能一看，頓時(shí)兩眼一黑，怎么又下降到D了？于是做各種優(yōu)化，啟用gzip等等……又想到Typecho的性能文明已久，于是噼啪噼啪，一不小心把主題移植到了Typecho上，這么一看，還挺像模像樣的，于是又將自制插件Ajax All（也就是上面提到的整站無(wú)刷新化插件）移植到了Typecho，果然可重用性的編程思想是及其重要的，讓我這次的移植變得相當(dāng)簡(jiǎn)單，然后又移植LazyLoad效果，8月2日晚將Typecho版本博客部署至SAE上。期間發(fā)現(xiàn)了Typecho for SAE的幾個(gè)問題，稍后再做總結(jié)。

8月3日，將WordPress的數(shù)據(jù)，乃至每篇博客的點(diǎn)擊量全部轉(zhuǎn)移至Typecho中，并在下午寫下此篇總結(jié)，謹(jǐn)此留念。

暑假不知不覺已經(jīng)不到一個(gè)月了，接下來(lái)的時(shí)間里專注于兩件事，一個(gè)是某桌面項(xiàng)目的開發(fā)，一個(gè)是自己想做的網(wǎng)站，再完美主義也要分清主次，將目前最重要的事情搞定，還有一個(gè)重要的事情是調(diào)整好作息，身體的健康才是最重要的。

——于2012年8月3日19:26:22

=======================簽 名 檔=======================
原文地址（我的博客）： http://www.clanfei.com/2012/08/1629.html
歡迎訪問交流，至于我為什么要多弄一個(gè)博客，因?yàn)槲覠釔矍岸耍瑹釔劬W(wǎng)頁(yè)，我更希望有一個(gè)更加自由、真正屬于我自己的小站，或許并不是那么有名氣，但至少能夠讓我為了它而加倍努力。。
=======================簽 名 檔=======================

[前端設(shè)計(jì)]一枚小菜的博客前端大規(guī)模改版小記與總結(jié)