个人主页搭建总结

最近一直琢磨着写一个个人主页，一番研究之后决定使用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优化移动端的阅读体验
• 实现搜索功能（等文章多了再来做）