2012年7月29日中午，在SAE中看到博客應用性能等級為“D”，作為完美主義者兼強迫癥的我受到極大刺激，自詡前端開發發燒友的我，個人博客使用的竟然還是別人設計的主題，雖然曾稍作優化，但仍是覺得代碼臃腫卻平凡單調，再想想我至今甚至未有多少自己較為滿意的前端作品（詳見 我的作品整理 ），于是立馬開始了新主題的設計。
原本的博客主題
：
由于剛剛安裝了
Visual Studio 2012 RC版
，發現新版的黑色界面非常不錯，黑藍灰搭配的顏色也非常順眼，于是決定放棄原主題的淺色系色彩，采用這三種顏色的搭配方式來設計，追求無圖片，高性能，高細節，高質感，高兼容性，高點擊欲，結果到了晚上……
頂部沒有思路暫未進行設計，看起來太過單調，還加了一些彩蛋，如側邊欄可以滑動，與主題內容左右互換，文章可以收縮只看列表等等：
然而第二天起來，頂部怎么想也找不到靈感，越看越覺得這樣的設計很土很小家子氣很不倫不類，這樣改版和不改還有什么區別！一怒之下直接推倒重做。想想這次設計失敗的原因，對比原主題和第一版主題，發現其實兩者大同小異，設計的思路被傳統博客頂部底部側邊欄的布局給限制住了，又怎能設計出突破常規，讓人眼前一亮的作品呢？
于是我瀏覽各大輕博客網站，尤其是 點點網 ，瀏覽各種風格的博客模板設計，搜索其他前端博客進行參考（結果發現不少前端網站都做的一般般，還是點點網的設計比較靠譜，各種細節方面的掌控，各種落落大方的布局……）。
最終決定的方案是——
- 簡潔大方的設計風格，太過華麗容易產生審美疲勞
- 加強細節而不顯得累贅，簡潔與單調的區別就在細節之間
- 盡量不使用圖片以減少http連接數，提高性能
- 采用布局以適應不同分辨率
- 減小單個頁面內的信息量，突出重點
- 高兼容性，在不同的瀏覽器中瀏覽一致，而在低版本瀏覽器中也不至失真
7月30號晚（或者說7月31號凌晨）基本完工，最終效果如下（地址：
http://lanfei.sinaapp.com/
）：
這次的設計只有分類導航與頁面內容兩個主體部分，沒有像傳統博客側邊欄那般繁雜；許多效果如陰影，圓角乃至模仿漫畫對話框的三角形等均直接使用CSS實現；而圖片則隨滾動條移動進行加載，減少http連接數；評論部分采用了比較突破常規不拘一格的設計，評論者頭像突破容器，而仿漫畫對話框的箭頭則指向頭像。
順帶在微博上征求了各方意見， @Alex楊惠淋是也 與 @第七星塵 均提出了使用Ajax加載的建議。
于是8月1號開始無刷新加載的實現，Ajax的無刷新加載很簡單，很快就實現了，但馬上發現一個問題，使用Ajax加載頁面無法前進后退，刷新頁面也會回到最初進入的頁面，這將大大影響用戶體驗，而若用戶想將鏈接分享給他人，地址欄中的鏈接甚至不是當前頁面的真正鏈接！
這是一個非常嚴重的問題，除非在使用Ajax加載的同時能夠改變地址，才能夠避免這個問題。但我們知道，HTML4及以下想要改變地址而不刷新頁面只有通過地址后面加井號（#）來實現，但這并不能達到我想要的效果，無法改變成所加載頁面的真實鏈接，于是我想到了HTML5中的“篡改歷史”的新特性，其原理是在當前的歷史記錄中可以插入一條新記錄，也就是模擬了用戶進入新頁面的效果，同時還可以改變地址欄的地址而不刷新頁面！曾經點點網也在登陸注冊鏈接上嘗試過這個效果，而后來取消了，現在大家想看看這個效果可以去 GitHub ，當然本站當前也有這樣的效果，但沒有做類似GitHub的切換動畫。
而當我終于將這個效果實現時，又發現了更多問題，比如當點擊了某些鏈接時不應該使用Ajax加載（站外鏈接，管理鏈接，帶井號且地址與當前頁面相同的鏈接等等），帶井號的鏈接Ajax后無法跳轉至相關位置，某些使用了CSS/JavaScript的頁面通過Ajax加載后沒有效果，甚至瀏覽器前進后退時內容沒有改變等等等等一系列的細節問題，我才發現原來想要實現無刷新效果并非那么簡單……
但作為完美主義兼強迫癥的我怎會如此罷休呢，開始著手這些細節而又至關重要的問題的解決，首先吧啦吧啦，然后吧唧吧唧再接著乒呤乓啷……終于，8月1日凌晨2點23分，終于將各種問題搞定，順帶在帶井號的鏈接上實現了平滑滾動效果。并將無刷新效果插件化，后臺一鍵啟用禁用，甚至可以適用于其它主題。
8月1日，相安無事，只是做了一些細節的改善與查漏補缺，SAE顯示應用性能提升到B……
8月2日，打開SAE應用性能一看，頓時兩眼一黑，怎么又下降到D了？于是做各種優化，啟用gzip等等……又想到Typecho的性能文明已久，于是噼啪噼啪，一不小心把主題移植到了Typecho上，這么一看，還挺像模像樣的，于是又將自制插件Ajax All（也就是上面提到的整站無刷新化插件）移植到了Typecho，果然可重用性的編程思想是及其重要的，讓我這次的移植變得相當簡單，然后又移植LazyLoad效果，8月2日晚將Typecho版本博客部署至SAE上。期間發現了Typecho for SAE的幾個問題，稍后再做總結。
8月3日，將WordPress的數據，乃至每篇博客的點擊量全部轉移至Typecho中，并在下午寫下此篇總結，謹此留念。
暑假不知不覺已經不到一個月了，接下來的時間里專注于兩件事，一個是某桌面項目的開發，一個是自己想做的網站，再完美主義也要分清主次，將目前最重要的事情搞定，還有一個重要的事情是調整好作息，身體的健康才是最重要的。
——于2012年8月3日19:26:22
=======================簽 名 檔=======================
原文地址（我的博客）：
http://www.clanfei.com/2012/08/1629.html
歡迎訪問交流，至于我為什么要多弄一個博客，因為我熱愛前端，熱愛網頁，我更希望有一個更加自由、真正屬于我自己的小站，或許并不是那么有名氣，但至少能夠讓我為了它而加倍努力。。
=======================簽 名 檔=======================
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
