杰拉斯的博客

博客大规模改版小记

杰拉斯 杰拉斯 | 时间:2012-08-03, Fri | 29,563 views
心路历程, 前端开发 

2012年7月29日中午,在SAE中看到博客应用性能等级为“D”,作为完美主义者兼强迫症的我受到极大刺激,自诩前端开发发烧友的我,个人博客使用的竟然还是别人设计的主题,虽然曾稍作优化,但仍是觉得代码臃肿却平凡单调,再想想我至今甚至未有多少自己较为满意的前端作品(详见我的作品整理),于是立马开始了新主题的设计。

原本的博客主题:

原本的博客主题

由于刚刚安装了Visual Studio 2012 RC版,发现新版的黑色界面非常不错,黑蓝灰搭配的颜色也非常顺眼,于是决定放弃原主题的浅色系色彩,采用这三种颜色的搭配方式来设计,追求无图片,高性能,高细节,高质感,高兼容性,高点击欲,结果到了晚上……

博客改版第一版

顶部没有思路暂未进行设计,看起来太过单调,还加了一些彩蛋,如侧边栏可以滑动,与主题内容左右互换,文章可以收缩只看列表等等:

第一版的彩蛋

然而第二天起来,顶部怎么想也找不到灵感,越看越觉得这样的设计很土很小家子气很不伦不类,这样改版和不改还有什么区别!一怒之下直接推倒重做。想想这次设计失败的原因,对比原主题和第一版主题,发现其实两者大同小异,设计的思路被传统博客顶部底部侧边栏的布局给限制住了,又怎能设计出突破常规,让人眼前一亮的作品呢?

于是我浏览各大轻博客网站,尤其是点点网,浏览各种风格的博客模板设计,搜索其他前端博客进行参考(结果发现不少前端网站都做的一般般,还是点点网的设计比较靠谱,各种细节方面的掌控,各种落落大方的布局……)。

最终决定的方案是——

  • 简洁大方的设计风格,太过华丽容易产生审美疲劳
  • 加强细节而不显得累赘,简洁与单调的区别就在细节之间
  • 尽量不使用图片以减少http连接数,提高性能
  • 采用布局以适应不同分辨率
  • 减小单个页面内的信息量,突出重点
  • 高兼容性,在不同的浏览器中浏览一致,而在低版本浏览器中也不至失真

7月30号晚(或者说7月31号凌晨)基本完工,最终效果如下(地址:http://lanfei.sinaapp.com/):

博客设计最终效果

这次的设计只有分类导航与页面内容两个主体部分,没有像传统博客侧边栏那般繁杂;许多效果如阴影,圆角乃至模仿漫画对话框的三角形等均直接使用CSS实现;而图片则随滚动条移动进行加载,减少http连接数;评论部分采用了比较突破常规不拘一格的设计,评论者头像突破容器,而仿漫画对话框的箭头则指向头像。

顺带在微博上征求了各方意见,@Alex杨惠淋是也@第七星尘?均提出了使用Ajax加载的建议。

于是8月1号开始无刷新加载的实现,Ajax的无刷新加载很简单,很快就实现了,但马上发现一个问题,使用Ajax加载页面无法前进后退,刷新页面也会回到最初进入的页面,这将大大影响用户体验,而若用户想将链接分享给他人,地址栏中的链接甚至不是当前页面的真正链接!

这是一个非常严重的问题,除非在使用Ajax加载的同时能够改变地址,才能够避免这个问题。但我们知道,HTML4及以下想要改变地址而不刷新页面只有通过地址后面加井号(#)来实现,但这并不能达到我想要的效果,无法改变成所加载页面的真实链接,于是我想到了HTML5中的“篡改历史”的新特性,其原理是在当前的历史记录中可以插入一条新记录,也就是模拟了用户进入新页面的效果,同时还可以改变地址栏的地址而不刷新页面!曾经点点网也在登陆注册链接上尝试过这个效果,而后来取消了,现在大家想看看这个效果可以去GitHub,当然本站当前也有这样的效果,但没有做类似GitHub的切换动画。

而当我终于将这个效果实现时,又发现了更多问题,比如当点击了某些链接时不应该使用Ajax加载(站外链接,管理链接,带井号且地址与当前页面相同的链接等等),带井号的链接Ajax后无法跳转至相关位置,某些使用了CSS/JavaScript的页面通过Ajax加载后没有效果,甚至浏览器前进后退时内容没有改变等等等等一系列的细节问题,我才发现原来想要实现无刷新效果并非那么简单……

但作为完美主义兼强迫症的我怎会如此罢休呢,开始着手这些细节而又至关重要的问题的解决,首先吧啦吧啦,然后吧唧吧唧再接着乒呤乓啷……终于,8月1日凌晨2点23分,终于将各种问题搞定,顺带在带井号的链接上实现了平滑滚动效果。并将无刷新效果插件化,后台一键启用禁用,甚至可以适用于其它主题。

8月1日,相安无事,只是做了一些细节的改善与查漏补缺,SAE显示应用性能提升到B……

8月2日,打开SAE应用性能一看,顿时两眼一黑,怎么又下降到D了?于是做各种优化,启用gzip等等……又想到Typecho的性能文明已久,于是噼啪噼啪,一不小心把主题移植到了Typecho上,这么一看,还挺像模像样的,于是又将自制插件Ajax All(也就是上面提到的整站无刷新化插件)移植到了Typecho,果然可重用性的编程思想是及其重要的,让我这次的移植变得相当简单,然后又移植LazyLoad效果,8月2日晚将Typecho版本博客部署至SAE上。期间发现了Typecho for SAE的几个问题,稍后再做总结

8月3日,将WordPress的数据,乃至每篇博客的点击量全部转移至Typecho中,并在下午写下此篇总结,谨此留念。

暑假不知不觉已经不到一个月了,接下来的时间里专注于两件事,一个是某桌面项目的开发,一个是自己想做的网站,再完美主义也要分清主次,将目前最重要的事情搞定,还有一个重要的事情是调整好作息,身体的健康才是最重要的。

如需转载请注明出处:杰拉斯的博客

相关文章

3 条评论 »

  1. 建议博主把链接加下划线,不然不用鼠标滑过看不出链接

  2. cho cho

    求教博主,可以分享具体的ajax无刷新加载的方式么。

    1. 请看这里~
      http://www.clanfei.com/2012/09/1646.html