« 回到博客列表

童话说 V2.0 改版小结

Tags: blog, 2.0, update

0x00 大更新!!!

不知名前端小站“童话说”自创立以来的第一次改版!发布啦!!!

大概全世界只有一个人会为此高兴吧……不管,照样庆祝!!!

0x01 大事记

截至本文之前,这个小站共经历了 233 次 commit,距离第一次提交已有 2 年 9 个月之久,虽然跟那些知名博主相比这根本不值得一提,但这些都是我一路成长的见证:

0x02 为什么要改版

1. 审美疲劳

第一版的样式,从定稿到 v 2.0 之前,已经使用了两年多,别说读者(如果有的话),我自己也看厌了。当时的想法是仿照 Material Design 的风格打造了以 Card 为基础的页面,侧边栏的设计其实也挺俗套的,配色方面完全就是从头像中刮出来的,回过头来看,真的是毫无特点,而且显得很小孩子,不够成熟,不过当时的我刚从大学毕业,还留有些许不切实际的幻想,大概这也是为什么当初会做下这样的决定吧。

2. 适配问题

这个小站从设计之初就是遵从的响应式设计原理,这一点一直延续至今,未来不出意外也会一直延续下去。但 2014 年那会儿,2K、4K 这样的巨屏还没有普及,大部分人能接触到的最大分辨率也不过 1920 × 1080 px,所以当时的设计并没有考虑在巨屏下的显示效果。v 1.0 的设计是侧边栏定宽,小屏下置顶,右侧内容部分定高并占据剩余宽度,这种设计在手机、平板、笔记本上看着都还好,可一旦放到 1366 × 768 px 以上分辨率的设备上查看,右侧内容就会显示为很宽的一条,封面图的比例因此失调。这在后期我自己用上 1080P 及以上分辨率设备后显得尤为扎眼,决定改版很大程度是为了解决这个问题。

3. 技术栈落后

小站刚建立之时,笔者刚经历毕业季的失利,在准备二战,建立小站的主要出发点是为了后面找工作时候有能拿的出手的东西,所以当时的目标是“不借助任何现有的库或框架,纯手工搭建,以此锻炼自己”,为此连 jQuery 都没有用,纯 HTML5、CSS3、JavaScript 撸出了第一版,写了几篇博客,做了几个小 Demo 放上面,论技术含量真的是几乎没有。而且当时的前端水平将将入门,写出来的代码,回过头来根本没法看,连我自己的想不通当时为什么会这么写。(不过即便如此,我还是借这个小站拿到了人生第一份前端开发的 Offer)

0x03 都有哪些改变

1. 全新的视觉样式

这次改版最明显的变化当属视觉样式的更新,首先是解决了对巨屏的适配问题,参考了微信、知乎、简述、掘金、Medium 等知名技术内容社区的设计方案,最终决定使用限宽居中的方案,图片固定宽高比来自适应。曾经的卡片设计被部分丢弃,改为“无边框”设计,通过边距来进行板块的分隔,鼠标悬浮时候才能看到些许“卡片式”的影子。配色方面 Material Design 虽然好看,但这么久了也审美疲劳了,现在的视觉风格更加的 Geek 风一些,选择了我最爱的“黑绿”搭配,整体深灰背景,加以亮绿作为强调色。鉴于我并不是专业的视觉设计,所以配色什么的并不是很擅长,反正我努力从一堆参考素材中选出了几组比较符合主题,又不至于太过中二的色值,用在了项目中,目前看来还行,先用着,再看一段时间吧。

2. 启用 SCSS/PostCSS

第一版是纯手写的 CSS,能用,但是复用性并不好,尤其当我后来接触了 LESS/SASS/PostCSS,意识到它们的强大之处后,我就再也不想手写 CSS 了。结合这次样式的大改,我把所有的样式文件彻底重构了一遍,并且选用了强大又好用的 SCSS 作为预处理器,配合 PostCSS 用于样式库的开发。

3. 迁移至 ES2015+ 语法

时至今日,如果还不会 ES2015+ 的话,真的是要被整个行业所耻笑了,所以这也是自然而然的事了,其实单纯用于交互的 JS 目前还不多,v 2.0 的主要目的是更新样式和技术栈,功能上并没有增加多少,后续会继续,到时就有需求了。

4. 基于 Gulp 实现代码复用和构建

最初的想法使用 React/Vue 把博客做成 SPA 来提升浏览体验,并且做功能也更方便些,但是考虑到 SEO 的问题,又需要服务端渲染,可是 Github Page 并不提供后端环境,因此必须要在前端做静态化。浏览了一遍市面上主流的适用于 React/Vue 甚至更为通用的一些前端静态化方案,要么坑多不好用,要么太过于通用,无法满足我的定制化需求,总之就是没找到现成的轮子。所以就只好自己造轮子。

大概想了下,其实主要需求就是模板的拼接。HTML 本身并没有提供类似 PHP 中的 include 的概念,而 Web Component 又有些遥远,因此只好自己拼接。但是不同的页面的拼接方案又各有不同,并且我还想给博客做个目录,通过程序来动态加载内容,我只需要更新一些配置文件,就可以批量修改多出的引用,实现真正意义上的复用,另外也给后面做搜索做好铺垫。

最后决定自己开发一个 Gulp 插件,配合自定义的配置文件,来实现对不同页面模板的拼接。之前在多个项目中都用过 Gulp,不过都是拿现有的插件来拼接任务,自己开发插件倒还是头一次,没办法,自己动手丰衣足食,现学吧。好在开发 gulp 插件的需求不在少数,除去官方那几乎不可用的文档,还是有很多开发者分享了自己开发 Gulp 插件的过程,不少还都是中文的,美哉。看了几篇之后,就开始摸石头过河,一点一点写,一步一步测试。为避免一失足把其他代码给毁了,我在开始之前就把整站备份了一遍,之后每成功一步就备份一遍,等到开发完成,备份文件都几十份了。BTW,现在这篇博文就是我用自己开发的 Gulp 插件构建出来的。Gulp 插件的开发方法这里先不展开,回头单开一篇博客分享下,争取能比我之前看的那些讲得更好懂一些。

好事的朋友或许会去看我的源码,如果你真去看了,你会发现我并没有采用一般博客系统中常见的 Markdown 文件来写正文。为什么不用 Markdown?其实很简单,和我为什么不用现成的前端静态化方案一个原因——无法满足我的自定义需求。Markdown 的好我当然知道,平时我也经常用 Markdown 写文档,但是我时不时会在正文中加入一些自定义的内容,这些内容我目前还没在 Markdown 中找到合适的解决办法,因此我依然在用 HTML 来写正文。

0x04 下一步

1. 搜索

用 Gulp 做拼接的一个产物就是我给整个站点的所有内容(博客、项目、实验、Tag)都做了索引,因为后面打算做一个简单的站内搜索,提供更有效率的内容查询方式。不过短期内不打算租服务器,因此还是会选择用 jQuery 来做交互,并不会做成 SPA。搜索这个功能可算是我想要了很久的,不多说,到时看东西吧。

2. 评论

评论是这个小站一直欠缺的一块功能,怎么做暂时还没想好,市面上有像 Disqus、友言 等诸多现成的第三方评论系统,不过配合野狗的平台我也完全可以自己搭一个,具体选用哪种方案,待我继续考察一下再做决定。

3. 把早年的坑填完

《每天一点 ES6》这个大坑,哎……不说了,趁早填完吧,都什么时候了。

4. 细节的完善

v 2.0 虽然正式发布了,但很多细节上的恭喜其实还有待加强,比如 Logo、favicon 都还是老的,和现有的视觉风格不符,得重新设计。新的布局能够很好的适应主流分辨率,但是对 2K 及以上分辨率的巨屏的利用还不够充分,浪费了大把的空间,想想看,能拿来做点什么。

0x05 关于 v 2.1

前面说到的这些东西,应该会陆陆续续出现在后续的更新迭代中,v 2.1 正在路上,各位敬请期待。