最近一直琢磨著寫一個個人主頁，一番研究之后決定使用Jekyll在Github Page上搭建主頁。用了一天半的時間，實現了網站的基本功能。
搭建過程中使用了Semantic UI這一CSS框架，DOM操作使用Vue.js。
歡迎訪問: https://epplalee.github.io/

下面總結下這一天半的新收獲：

• Liquid模版引擎
  因為Jekyll內置的是這個模版引擎，所以決定現學現用，然而它的文檔真的清晰又詳細（不過是英文的），用起來很順手。
• CSS3動畫
  網頁左側的側邊欄（sidebar）在伸縮時用到了CSS3中的transition和animation特性完成了動畫效果。
• 媒體查詢
  使用媒體查詢實現了移動端的優化。

踩到的坑：

• 手機瀏覽器顯示的分辨率是要大于它的設備分辨率的，我一開始寫媒體查詢的時候沒有用到device-width這個參數，導致移動端兼容失效，后來將

@media (max-width: 768px){
    settings...;
}

改為了

@media (max-device-width: 768px){
    settings...;
}

之后，移動端的優化就能正常顯示了。

待完善的功能：

• 使用viewport優化移動端的閱讀體驗
• 實現搜索功能（等文章多了再來做）