新的一年，新的博客

去年使用 Pelican 搭建了我的第一个个人站点，发博文(虽然只有 5 篇，惭愧)，选主题，加功能……总之我很享受这个过程。搭建站点，就像是在装修一个房子。一开始空空如也，到后来有了沙发，有了餐桌，有了床……就这样，一个空空的房子开始有了你的印记，慢慢的你对它产生了感情，把它称作为“家”。

但是，其实我一直有个遗憾，我没有找到一个让我满意的主题。就像是房子装修，你可以使用别人设计好的方案，你也可以自己设计方案，或者与设计师合作设计方案。总之，在博客搭建好以来，我就很想自己设计一个主题。但是首先，我不会前端；其次，我不懂设计。直到有一天，我无意中发现了这个博客，真的是让我眼前一亮，作为一个想成为全栈网络工程师的我，前端是必须要了解和掌握的，于是我就开始踏上了我的前端学习之路。

前端学习

因为平时白天要实习，大部分都是在晚上 8：00 - 11：00 和周末弄的。我从去年 10 月初开始学习 JavaScript，写了一篇关于js的博文。一个月之后，我开始一边写网站一边学习 HTML（HTML5）和 CSS（CSS3, SASS）。在此期间共看了 5 本书（后 3 本只是随便翻了翻）：

同时也参考了一些网上的资料和文档，当然还包括一些网站的代码和设计。

总之，前端上手很容易，然而想要精通很难，浏览器兼容、动画、访问速度优化、搜索引擎优化……问题太多了。而且前端也是一个变化相对快速的领域，新的规范，新的工具，新的设计模式…当然，这也说明了前端领域的活跃性。我一直都坚信，未来 web 应用会更加的流行。

响应式设计

响应式设计简单的说就是网页能够自动适应不同的屏幕尺寸(手机、平板、电脑)。跟扁平化设计一样，它们都是智能手机和平板电脑普及的产物，为了应对当前多样性的设备而出现的。当然，响应式并不局限于网页，安卓应用、Windows 10 的 UWP 应用，都或多或少的带有响应式的特性。

当然，响应式并不是万能的。一些布局复杂的网站，根据不同的设备写不同的 CSS 是更好的方案（多套 CSS）。一来更节约带宽，二来可以减小一些复杂度。而像博客这样布局简单的网站，响应式反而更方便，因为你只需维护一套 CSS 即可。

关于响应式的实现，网上有很多不错的介绍，比如这篇阮一峰的博文和这篇w3cplus网站上的文章，这里不再累述。其实我主要是想分享一下我的设计思路。

事实证明，设计是一个十分消耗时间的事情，你需要不断的调整，不断的修改。这个网站就是经过了 5 次大的布局调整和很多次局部布局修改才有了现在的模样。

响应式网页的布局是通过网页容器的宽度来划分的，本网站的划分方式为：

手机：0~600px
平板：600~1000px
电脑：1000px 以上

一般来说，一个网页一般由网页标题（title）、导航（nav）、侧边栏（aside）、主要类容（main）、页脚（footer）组成。

当容器宽度很宽时（比如电脑），往往竖直方向空间就很有限，我们可以把一些附属信息以侧边栏的形式表现出来。而当容器宽度有限的情况（手机是典型），侧边栏就显得非常不适合了，此时通常的做法就是将信息从上到下顺序布局，下面来看一下我的设计。

电脑布局

在电脑布局中，我特地把标题（title）、导航（nav）和个人信息（aside）放在了左边，并且在主要类容右边留了一些空白，这样显得文章更居中一些。

电脑布局

平板布局

对于这种宽度不足的情况，我把标题、导航放在了上方，而把个人信息放在了页脚。

平板布局

手机布局

此时的宽度只能放得下标题了，导航隐藏了起来，点击最右的按钮即可显示导航。

手机布局

总之，这是一种很常见的响应式布局方法，参考了简书的布局。

新博客

为了尽可能的学习到最新的技术，我对这个网站做了如下几个设定：

该网站仅支持现代浏览器（IE10 及以上、Edge、Chrome、Safari、Firefox）
尽量使用 HTML5 的语义标签
使用 CSS3 的新特性，包括阴影和过渡
使用 SVG（矢量图），该网站的所有图标和 logo 都是矢量图
除了 jQuery 和必要的插件外, 不使用任何第三方的模板（自己造轮子）

同时博客平台也从以往的 Pelican 迁移到了 Jekyll，因为后者跟 GitHub 结合得更紧密一些。于此同时博客也从 GitCafe 重新迁回到了 GitHub（百度收录什么的去死吧），正所谓人生贵在折腾。

该博客会是我的一个长期项目，以后我会继续优化该博客的样式和功能。未来会把它作为一个主题发布出去，让更多的人能够免费的使用和修改我的主题。

最后祝大家新年快乐!

happy-2016