个人主页搭建总结

472 阅读1分钟

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