写在前面

记得今年年初的时候开始试着搭建自己的个人博客，当时选择Hexo的原因就是简单，一键部署。很适合我这种什么都不懂的younger FE。如果你不知道什么是Hexo，请看这里。

前端是个变化很快的领域，前几天有幸能够去到杭州参加第十届D2前端交流技术论坛。在大会开场上面，一位阿里巴巴的管理层发言(原谅我忘记了名字T-T)，他说10年前作为一位前端写的代码放到今天已经无法运行(或者说性能低下)，而10年前写的java代码如今还依旧很好的运行在服务器上。从这句话大概就能简单的概述前端，变化很快，新的框架/工具层出不穷。你可以说前端的水不是很深，但是它的水一定足够广。是的，我们已经不再是以前的切图仔了，Node的如日中天和NPM包管理的主流让今天的FE能够有更多的发挥很想象的空间。全栈工程师和全端工程师的’名词’也越来越受到大家的关注，这暗示着前端已经不再局限于浏览器，不再局限于平台。今天我们可以从window这个窗口爬出来，看一看外面精彩缤纷的世界。十多年的发展，前端从刀耕火种到百家齐放。

魔法哥－重拾CSS乐趣
Tools

淘宝UED前后端分离思考
淘宝UED前后端分离思考

好像有点跑题了哈，回归主题。。。

hexo 事一: 弄清Hexo

A fast, simple & powerful blog framework. － Hexo
一款快速、简洁且高效的博客框架，这就是Hexo。下面的内容基于Node开发环境，如果你还没安装Node,点击这里进入官网(中文网在这里)按照说明进行下载。
官网上的快速start教程十分简单:

1
2
3
4
5
6
npm install hexo-cli -g  // 全局安装hexo-cli 命令行工具
hexo init blog           // 执行hexo 命令初始化[blog]文件夹
cd blog                  // cd 进刚刚通过命令行初始化完成的[blog]文件夹 
npm install              // 执行npm install 命令 下载package.json中的依赖
hexo server              // 依赖下载完全，执行hexo 自带的server命令 
                         // 此刻打开浏览器 输入 `http://localhost:4000/` 查看你的博客吧！

npm install hexo-cli -g全局安装hexo的命令行工具，这样的话在任意目录都可以识别并执行相应的hexo命令，也就是你在命令行输入的hexo ***。

hexo 事二: Hexo的渲染插件

我们先来看看都有哪些常用的官方Hexo渲染插件：

hexo-renderer-marked

众所周知，在hexo中我们可以通过markdown来写文章，那么Hexo是如何将我们写好的文章进行渲染的呢？
答案就是hexo-renderer-marked - Markdown renderer for Hexo(Hexo的markdown渲染插件)，它的作用就是把markdown内容渲染然后嵌套到模版中。在模版中我们就可以通过很简单的语法将Markdown-renderer渲染好的内容传递给模版。e.g:

1
2
3
// item means one post
.post-content
    != item.content

上面的jade模版将会简单接受hexo-renderer-marked插件渲染好的结果(也就是文章的具体内容)，将它放置于一个calss="post-content"的div内。
编译的结果是:

1
2
3
<div class="post-content">
    <!-- here is the markdown renderer  content -->
</div>

是不是和我一样爱上了这种简洁的模版语言？那还等什么 => => => jade官方文档传送门
几乎是瞬间我就喜欢上了这种简洁的语法，它让我们避免面对繁杂的符号而只需要专注于业务逻辑。
什么？你不相信？那先来看看ejs模版(Embedded JavaScript templates for node)是怎么渲染的吧！

hexo-renderer-ejs

1
2
3
4
5
6
7
8
9
// item.title = "hello ejs"
<div class="post-content">
    <% if(item.title) {%>
        <h2>(item.title)</h2>
    <% }else { %>
        <h2>(theme.title)</h2>
    <% } %>
    // other content
</div>

渲染结果:

1
2
3
4
<div class="post-content">
    <h2>hello ejs</h2>
    <!-- other content -->
</div>

hexo-renderer-jade

在jade中也许你可以这样:

1
2
3
4
5
6
7
//- item.title = "hello jade"
.post-content
    if item.title
        h2= item.title
    else 
        h2= theme.title
    // other content

渲染结果:

1
2
3
4
<div class="post-content">
    <h2>hello jade</h2>
    <!-- other content -->
</div>

如果你要定制属于你的Hexo主题，选择一个模版引擎是很重要的，关于ejs和jade我也不再细说，我们可以简单粗暴一些，对比一下它们在github上的start吧!
另外Hexo官方提供的模版插件还有Haml和Swig, 其中Haml是基于Python的一款模版引擎，十分的简洁，jade会如此的简洁就是受到了它的影响。

hexo-renderer-less && hexo-renderer-stylus

接下来就是css渲染插件了，Hexo官方提供的插件有Less 和 Stylus，这个就是纯粹因人而异了，看你熟悉哪一个了。不过这里有一个关于CSS与处理器的对比文章 => => => 传送门

Hexo 事三: hexo的生成器

以下是hexo的官方生成器，我们的博客就是由一个个的生成器来组成的：

如何编写模版?

默认的在主题目录下会有/layout文件夹，里面会存在类似下面的目录结构:

我们可以看到在/layout下有2个文件夹minxin和partial，顾名思义，里面存放的是可复用的模版和页面能用到的公共模版。
当然你也可以看到有index.jade和post.jade这两个模版，它们分别代表的是渲染主页的模版index.jade => index.html和渲染文章页面的post.jade => postname.html，而这两个模版都继承了partial/layout.jade的基础模版

所以整体的思路这里应该很清晰的，更具hexo的生成器来生成不同部分的页面，通过hexo提供的模版引擎和相应的变量来编写不同的页面，报告主页模版／分类模版／标签模版和一些其他的模版。模版之间可复用的内容，比如说DOCTYPE,head,footer等可以通过继承一个layout.jade/layout.ejs/layout.haml等来完成。

Have fun!

结语

做一个小结，本文按照hexo基础知识 => hexo渲染器 => hexo生成器 来讲述hexo博客主题的基本组成结构，最后通过一个小的图例来说明如何编写一个Hexo theme，希望本篇文章能够对你有所帮助！
稍后我会将主题做一番修改，然后发布到github上面去，欢迎关注我的github，主题名为grace取优雅的意思，我希望这个主题能足够的优雅，让开发者能专注于内容。