创建了适用于 hexo 的一个主题 mls

之前用的主题是基于 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 的图片?这是一张 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 上修改。

LICENSED UNDER CC BY-NC-SA 4.0