[前端设计]一枚小菜的博客前端大规模改版小记与总结

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中，并在下午写下此篇总结，谨此留念。




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




——于2012年8月3日19:26:22





=======================签 名 档=======================
原文地址（我的博客）：http://lanfei.sinaapp.com/2012/08/1629.html
欢迎访问交流，至于我为什么要多弄一个博客，因为我热爱前端，热爱网页，我更希望有一个更加自由、真正属于我自己的小站，或许并不是那么有名气，但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================