愛主題網站改版更新，采用響應式，支持手機平板訪問

本次更新離上一次有一年了，期間也有過更新的想法，可是一直抽不出時間，最近閑下來了就把這事給搞了。這次更新的主要目的就是優化用戶體驗，所以外觀上面沒有太大的變動，依然沿用了之前的風格。下面具體來說下有哪些更新吧。

重寫全站代碼，支持響應式

之前一直覺得我們這種類型的網站是不需要手機訪問的，所以一直沒做。但是在訪問統計里面經常會看到有使用手機訪問我們網站的用戶，并且現在支持手機訪問也是一個趨勢，所以決定針對手機訪問做一些優化。我們采用了響應式的方案，因為這個是我擅長的，并且不需要維護多套代碼。但是支持響應式是需要對網站的代碼結構和樣式進行很多的調整，于是干脆對整站的主題進行了重寫，順帶把主題開發的gulp環境也都搞了一遍。

圖片延遲加載

因為開發的時候是在星巴克寫的代碼，調試的時候發現星巴克的WIFI網速真是不理想，每次都要等個十來秒才能加載完成，看了下加載的頁面文件總大小是有3M多，初步分析是圖片文件太多導致的，并且為了保證retina屏幕顯示清晰，縮略圖的尺寸設置的比較大，差不多就是2x圖的尺寸吧。為了減少加載文件大小，我將縮略圖的尺寸稍微改小了一點，測試后加載時間有了一些提高，頁面總大小也低于3M了，但是依然不理想。

圖片延遲加載并不是什么新鮮技術，原理就是當打開頁面以后，先不加載圖片（可以先用一張代圖），頁面全部加載完了以后，利用js技術判斷當前在瀏覽的圖片，然后加載當前瀏覽的圖片。也就是原先打開頁面需要加載所有圖片，現在打開頁面不需要加載圖片，當屏幕滾動過去的時候再按需加載。修改完成以后測試加載時間極大提高，首屏加載大小小于1M，并且延遲加載可按需加載，沒有滾動到的圖片不需要加載，減少流量帶寬消耗。

主題信息顯示優化

在主題信息顯示上也做了一些優化。

原先的主題下載、演示是在文章末尾，需要查看演示的話，需要滾動頁面到文章末尾才行，更新后在文章開頭也可以直接下載、查看演示了。

主題列表原先已經可以直接查看演示了，此次主要更新了顯示的方式，將演示和詳情移到下面了，避免遮蓋住圖片。

主題列表的縮略圖尺寸也進行了修改，原先的尺寸會對大部分圖片進行裁剪，看到的縮略圖總是被裁去了一部分，本次更新針對大部分的縮略圖尺寸進行了分析，盡量保證大部分的封面圖片不被裁剪。

其他優化

1. 搜索功能優化，頁頭直接顯示搜索框；
2. 文章詳情頁樣式優化；
3. 頁腳顯示優化；
4. 采用原創Themer框架開發；
5. 更多細節的優化