童话说 V2.0 改版小结
大更新！！！
不知名前端小站“童话说”自创立以来的第一次改版！发布啦！！！
大概全世界只有一个人会为此高兴吧……不管，照样庆祝！！！
大事记
截至本文之前，这个小站共经历了 233 次 commit，距离第一次提交已有 2 年 9 个月之久，虽然跟那些知名博主相比这根本不值得一提，但这些都是我一路成长的见证：
- 2014 年 11 月 25 日，第 1 个 commit，好像这也是我在 Github 上的第一个 commit。
- 2015 年 5 月 17 日，v 1.0 release，第一版样式基本定型。
- 2015 年 11 月 29 日，THS Lab 服务开放，提供一些常用的特性检测功能，供测试使用。
- 2016 年 1 月 24 日，《每天一点 ES6》系列博客上线，正式开始了日更 → 周更 → 月更 → 断更 的倒 Flag 之旅。该系列至今一年半多了，还没更完……感觉年内要是能把它更完，我就知足了。
- 2016 年 1 月 26 日，v 1.1 release，后续虽小修小补不断，但样式上基本不再有大的变化，基本以内容更新为主了。
- 2016 年 12 月 16 日，创建 v 2.0 分支，改版计划提上日程，提交了初步的目录结构变更，然后……很长一段时间就没动静了。虽然决定了要改版，但一直没想好到底要怎么改，坑挖好了却不知道要怎么填。之后不断地收集各种 UI 风格和博客形式，加之后来陆陆续续又写了些博客，为了保证和 master 之间的同步，大部分时间其实还是以内容更新和同步为主，并没有什么真正的动作。
- 2017 年 8 月 13 日，v 2.0 正式上线！
为什么要改版
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）
都有哪些改变
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 来写正文。
下一步
1. 搜索
用 Gulp 做拼接的一个产物就是我给整个站点的所有内容（博客、项目、实验、Tag）都做了索引，因为后面打算做一个简单的站内搜索，提供更有效率的内容查询方式。不过短期内不打算租服务器，因此还是会选择用 jQuery 来做交互，并不会做成 SPA。搜索这个功能可算是我想要了很久的，不多说，到时看东西吧。
2. 评论
评论是这个小站一直欠缺的一块功能，怎么做暂时还没想好，市面上有像 Disqus、友言 等诸多现成的第三方评论系统，不过配合野狗的平台我也完全可以自己搭一个，具体选用哪种方案，待我继续考察一下再做决定。
3. 把早年的坑填完
《每天一点 ES6》这个大坑，哎……不说了，趁早填完吧，都什么时候了。
4. 细节的完善
v 2.0 虽然正式发布了，但很多细节上的恭喜其实还有待加强，比如 Logo、favicon 都还是老的，和现有的视觉风格不符，得重新设计。新的布局能够很好的适应主流分辨率，但是对 2K 及以上分辨率的巨屏的利用还不够充分，浪费了大把的空间，想想看，能拿来做点什么。
关于 v 2.1
前面说到的这些东西，应该会陆陆续续出现在后续的更新迭代中，v 2.1 正在路上，各位敬请期待。