最近一直琢磨著寫一個(gè)個(gè)人主頁妇垢，一番研究之后決定使用Jekyll在Github Page上搭建主頁。用了一天半的時(shí)間灼舍，實(shí)現(xiàn)了網(wǎng)站的基本功能涨薪。
搭建過程中使用了Semantic UI這一CSS框架，DOM操作使用Vue.js刚夺。
歡迎訪問: https://epplalee.github.io/
下面總結(jié)下這一天半的新收獲：
- Liquid模版引擎
因?yàn)镴ekyll內(nèi)置的是這個(gè)模版引擎，所以決定現(xiàn)學(xué)現(xiàn)用创橄，然而它的文檔真的清晰又詳細(xì)（不過是英文的）莽红，用起來很順手。 - CSS3動(dòng)畫
網(wǎng)頁左側(cè)的側(cè)邊欄（sidebar）在伸縮時(shí)用到了CSS3中的transition和animation特性完成了動(dòng)畫效果安吁。 - 媒體查詢
使用媒體查詢實(shí)現(xiàn)了移動(dòng)端的優(yōu)化。
踩到的坑：
- 手機(jī)瀏覽器顯示的分辨率是要大于它的設(shè)備分辨率的馍管，我一開始寫媒體查詢的時(shí)候沒有用到device-width這個(gè)參數(shù)薪韩，導(dǎo)致移動(dòng)端兼容失效，后來將
@media (max-width: 768px){
settings...;
}
改為了
@media (max-device-width: 768px){
settings...;
}
之后俘陷，移動(dòng)端的優(yōu)化就能正常顯示了。
待完善的功能：
- 使用viewport優(yōu)化移動(dòng)端的閱讀體驗(yàn)
- 實(shí)現(xiàn)搜索功能（等文章多了再來做）
