最近一直琢磨著寫一個個人主頁,一番研究之后決定使用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優化移動端的閱讀體驗
- 實現搜索功能(等文章多了再來做)