之前用的主题是基于 landscape, 虽然这确实是一个不错的主题，使用上也没什么不便，但毕竟这是一个他人贡献的主题。我一直想试着自己做一个主题。之前也尝试在 landscape 上改，修改了一些颜色，对 CSS 做了一些简单修改，但布局没变，整体一眼还是能看出这是 landscape，并且因为我当时不熟悉 EJS 模板，对 Sass 及 CSS3 不是特别熟悉，所以有些功能的实现也完全不知道怎么做，比如一些透明效果的动画。
最近一段时间，相对以前来说稍微不忙了点，所以趁这个机会试着做一个主题了。
一些教程
MarketSheet
MarketSheet 这是一个 HTML/CSS/Sass 教程的网站。我主要用它学习 CSS。相比较于其它教程，我十分推荐这个教程。
一是因为前期它不堆砌各种语法知识，所以前期比较简单，例子也比较多，比如最开始讲讲很基础简单的 color, size, 而不是上来就讲 margin, padding 等对新手来说不友好的点。如果前期语法太多，就比较容易在刚开始就犯糊涂，影响后面的学习。
二是这个教程确实讲得清楚，比如对 position 属性的解释，比如以前我一直对 relative/absolute/ 不清楚，不知道相对是什么，绝对 是什么，但教程直接解释了 relative 是相对元素原先的位置，而 absolute 是相对已经对位的 parent 来说的。更多的内容可以参考网站。
三是一些语法外的规则讲解，比如何时使用 class 和 id，如何在表示颜色的十六进制、rgba、hsl 的三者中抉择 等等。
Sass & SCSS Tutorial for Beginners
Sass & SCSS Tutorial for Beginners
同样的理由，刚开始就不要太麻烦，把基础牢固最重要。这个教程每节课就讲一个知识点，比如 extend 或 mixin, 而且一节课的内容不长，10 分钟左右。
学完之后再去转转其他教程，这时学习一些稍微高级点的知识点就会相对轻松些。
CREATE AN HEXO THEME
CREATE AN HEXO THEME
这个就是从头到尾的一个 hexo theme 教程了，包括了从简单的首页开始，一直到最后的插入评论系统。应该说跟着这个教程做下来的话，搭建 hexo 博客的基本思路已经有了。自己主要做的就是稍微调整下布局，补充补充一些 CSS，这样一个基本功能的主题已经基本完成了。
一些开源框架 / 组件 / 插件
Materialize
Materialize
一个实现了 Material design 的前端框架。之所以使用框架，一方面是想稍微偷个懒，因为目前我对如何实现响应式布局不是很了解，用现成的框架能降低难度，其次是我对 Material design 还是有点喜欢的，所以选择了这个框架。
不过，并没有使用框架中太多部分，主要是导航栏，icons，以及内置的 grid 布局。
jquery-backstretch
jquery-backstretch
使用这个插件主要是两个理由，一是可以延迟加载背景图片，也就是说避免图片加载太慢而导致其它内容加载延迟太多。通过延迟加载，可以在其它加载了差不多了后再加载图片。二是在写主题时发现 chrome 的一个 bug，在我写了 body {background-attachment: fixed} 后，chrome 并没有照做，通过审查元素可以发现，chrome 自动在 body 上加了一个 style="background-attachment: scroll"。虽然 google 了很多方法，但效果都不大理想。后来放弃了刚开始在 body 元素上设置背景的想法，而通过在其它元素上设置以间接达到目的。
highlight.js
highlight.js
这个用于对代码的高亮。原先 hexo 的代码渲染很奇怪，它把代码部分渲染成了表格，而且用于代码高亮部分的主题的样式表我也看不懂。所以我这一次又偷懒了，关闭了默认的代码高亮（关闭方法不难，可参考 link），使用了 highlight.js，而且这个组件提供了很多主题。我现在用的主题是 “Atom One Light”。这是一个我同样在 atom 上设置的亮色主题。
highlightjs-line-numbers.js
highlightjs-line-numbers.js
因为希望给代码显示行数，所以找到了这个插件，使用也很方便。
hexo-image-caption
hexo-image-caption
在原先的 landscape 里，图片下方可以显示一段文字，这段文字就是在写 markdown 时插入图片时的说明文字。为了实现这个功能，我再次偷懒，搜到了这个插件。使用后的效果就是这样: 这是一张 350 * 150 的图片？
fontawesome
一开始不知道一些图标是如何显示在 blog 上的，后来我知道了 fontawesome。使用没什么难度，效果可以参考现在页面 footer 上的那几个图标的样子，唯一我个人不满意的地方就在于没有网易云音乐的图标，所以用了一个其它图标代替。
share.js
share.js 用于分享功能。这个功能原本不在计划之内，但在逛 GitHub 时偶然看到了，而且确实简单好用，于是加上了。目前我选择了四个社交应用的分享，显示在文章之后。
Thanks
这次主题的创建比我想象的简单了很多，一个很重要的原因就在于 GitHub 上丰富的资源，包括各种教程，为我节省了很多精力和时间，允许我偷懒。我必须要向这些资源们的作者表示感谢。
同时我不得不说，有些 blog 也带给了我一些灵感。jquery-backstretch 是我在看了艾克斯の編碼者的 blog 才知道的，另外也从这个 blog 的主题上也知道了如何单独建立 Categories 和 Tags 的页面。同时， 网页下滑后导航栏透明的设计是在看了 Dedication 之后才想到要做。而在 footer 上加图标的方法则是参考了 Morris’ Blog 的设计。
关于 mls
主题的代码这几天我会在 GitHub 上开源。
至于为什么叫 mls，其实很简单，m 代表了 materialize 框架；ls 代表 landscape，代表了上一个主题，因为最初的想法不是从头写，而是想在 landscape 上修改。