网站改版记

闲的蛋疼又来改首页了。二话不说,先上结果:戳我!

为什么要改版呢?一来老的版本看腻了。。二来之前那个内容太少,加上flickr老是被屏蔽,网页上就真没啥东西可以看的了。而且其实之前1.0的时候对移动设备支持不太好,基本在手机上就是废了。

那这次主要改了啥呢?

  1. 新的页面设计。好吧,不是我自己设计的,在html5up上找了个叫overflow的模板改的.布局基本沿用了overflow的设计。根据自己的需求做了些小修改。
  2. 首先支持i18n! 有没有很高霸上,多语言支持! 好吧现在还只支持英语。用的是前端的i18next库,如果我判断出用户的默认语言是非中文我就自动显示英文的站点。但是前端做i18n的不利之处就是ajax站点的通病,对搜索引擎支持不好。因为内容是js动态生成,无法被搜索引擎索引(虽然Google的机器人可以执行当前页面的js脚本,但是也很有限)。好在我对动态生成的内容无被索引需求,也就不管了。
  3. 支持把flickr的照片镜像到七牛云存储上,这样大部分国内被墙的用户就能正常访问我的摄影照片了。
  4. 支持显示我最新的博客文章,方便用户在首页了解我更多的站点内容。
  5. 显示我所有社交网站的feed。目前还未完整实现。
  6. 支持更具用户的IP显示它所在的国家和城市,算是一个比较拉近网站和用户距离的小idea吧, 对于那些不知道技术上怎么实现的用户至少会让他们觉得这个人好屌,竟然知道我在哪。。哈哈。。太2了。。但目前somehow有些bug,还需要再调试下。
  7. 响应式设计。这个主要因为模板的设计比较好。但目前应为自己的改动导致有些不完善,还需改进。
  8. 请求缓存!又是个很好的网站优化方式。基本上所有的后端请求只打第一次,后来的访问全部从本地读取,当然设置了一个过期时间,目前是6小时。用的是HTML5 的Localstorage属性。这样既减少了服务器压力,又加快了页面加载速度。
  9. 图片lazy loading! 这个更加高霸上!基本思想就是如果用户没有看到图片时,图片就不加载,必须等到用户下滑页面到图片区域时才加载图片,这样就又大大提升了页面加载速度,要知道我首页这么多flickr图片加载起来既费流量又费时间。 用的是一个比较著名的js库叫echojs,我看了下echojs的源码其实算法很简单,100多行就能写出来,关键是想到的人就非常聪明,知道这一招。也是学习了。现在像淘宝等大型站点基本都有自己的lazy loading方式。
  10. 差不多就这样了。总之这次开发用yeoman整个下来还算顺利,在build的时候碰到些问题也都解决了。现在先上线看看。之后再迭代优化吧。