hexo 搭建静态博客－中级篇（主题和 org 支持）

2016-09-20

hexo 是一款很强大的静态博客生成系统。对于一般用户，可能觉得默认的配置已经足够了，默认主题够漂亮，使用 markdown 格式书写博文也是很不错的搭配。

但是对我而言，首先，对于一个 emacs 用户而言，用 org-mode 写博文那是必须的。然而 hexo 默认是不支持 org 文件的，所以我得去需求支持 org 文件的方法。然后就是主题了。类似于各种软件的换肤功能，去找一个漂亮的主题换上去总是那么的有吸引力！

在配置完我的 hexo 博客后，我把笔记中的相关部分整理出来。考虑到使用 emacs 的基本都是喜欢折腾的人，所以这篇博文也就不多废话了，力求简洁明了。

1. 主题

先说主题吧，毕竟一个博客中，最先被别人和看到的就是主题了。先弄一个漂亮优雅的主题，自己看起来更舒服，博客写起来也更有劲了。

hexo 的大量主题在这里能找到：http://hexo.io/themes

想找一个满意的主题，你不仅要从外观的角度考虑，还得兼顾功能和技术上的一些问题。我来列一些指标：

美观简洁大方，这个主观性比较强。
响应式主题。这样你的博客在电脑和手机上都能美观的排版。
要对中文有良好的支持。所以尽量找中国人写的主题。
最好能集成进常用的分享和评论系统，稍微配置下就能开心的使用了:smiley:。
主题不要使用 google 字体和国外的 cdn 源。不然，卡成狗是轻，博客页面不正常就很尴尬了。一般来说，中国人写的主题都会注意这一点。

我这个博客使用的是 yilia 主题，github 上的源在这：https://github.com/litten/hexo-theme-yilia。页面简洁大方，没有太花哨的玩意闪眼，设计理念就是专注于阅读。而且这个主题集成了多说的评论功能和 jiathis 的分享功能。作者是腾讯的前端工程师，我看了下代码结构，非常优秀。如果你要扩展它的功能自己改起来应该会轻松很多。

1.1. 安装

首先安装 yilia 主题。 hexo 的博客目录下的 themes 文件夹，就是专门存放主题的。从 github 上把源文件克隆进去就行。在博客目录执行：

1	git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

之后去修改主题目录下的 _config.yml 文件，如果你没改过主题的话默认的主题是 landscape。找到类似下面这行：

1	theme: landscape

改成：

1	theme: yilia

之后重新生成静态 HTML 页面，预览下看看效果吧！

1
2
3

hexo clean
hexo g
hexo s

1.2. 主题特色配置

前面说过，好的主题都会自带一些自己的个性化配置，这些配置是放在主题自己的文件夹里的_config.yml 中。 yilia 主题的特色配置，是放在博客目录下 themes/yilia/_config.yml 中的。

左边栏中有两个可以自定义的部分：menu 和 subNav。

menu 里你可以定义一些链接。比如 /tags/随笔 就能跳转到博客的一个页面，里面全是 tag 中包含 随笔 的博文。

subNav 在页面里显示的是一系列的图标，是你在其它社交网站的页面，像微博，知乎什么的。特别注意的是 mail 的写法。因为在这里的配置会作为链接的，所以需要用到协议 mailto: 。

比如以下就是配置的一部分：

# Header
menu:
  主页: /
  所有文章: /archives
  # 随笔: /tags/随笔
# SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  zhihu: "#"
  mail: "mailto:yourname@example.com"
  #douban: "#"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

配置中的 avatar: 后面配置上图片的地址，设置的是博客的头像。在配置底部还能配置友链和关于我的文字说明。这些简单的修改下就知道了。

1.2.1. 多说评论

yilia 主题已经集成了多说评论功能，简单的配置下就能使用了。首先如果你没有多说帐号的话，你得先去 http://duoshuo.com 注册一个。我在注册的时候没有找到直接注册的按钮，只能通过第三方帐号注册，不知道是没提供还是我眼神不好。

之后记住你的 shortname, 在多说后台你会看见的的多说二级域名，比如我的是 frapples.duoshuo.com。二级域名的第一个部分就是 shortname，比如我的就是 frapples。之后，你只需要在配置中的 duoshuo: 后面写上你的多说 shortname 就行了。

就是这么简单，清除缓存，重新生成静态页面，预览下看看吧！

1
2
3

hexo clean
hexo g
hexo s

你可以尝试评论一下，在多说后台的评论管理就能看到所有的评论了！

1.2.2. 多说 css 配置

类似的换肤功能多说也不例外。在多说后台你可以看到，有个外观主题可以设置不同的皮肤。然而寒酸是那里面只有仅仅三款主题让你选择。我选择了 BlueBox，是这三款里面唯一一款扁平风格的。

好在后台提供了自定义 css 样式，不然就那几款默认主题，可定制性太差了。我稍微在网上找了些 css，微微调整了下。以下是我的 css 配置，把背景改成白色，把评论头像改成圆的：

 #ds-thread {background: #ffffff;}
#ds-reset .ds-avatar img{  
width:54px;height:54px; /*设置图像的长和宽*/  
border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过 width/2 的像素，即为圆形了*/  
-webkit-border-radius: 27px;/*圆角效果：兼容 webkit 浏览器*/
-moz-border-radius:27px;
box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/  
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
}

我没学过前端，对 css 不熟，关于多说 css 配置方面的更多资料，可参考官方文档： http://dev.duoshuo.com/docs/4ff1cfd0397309552c000017

1.2.3. jiathis 分享

如果你眼神好，你会发现在我的博客下方有大大的一排按钮，有 QQ 空间的，有新浪微博的，等等，应有尽有。这个就是分享功能了。点击一下，就能轻松的把博文分享到社交网站上去。

仔细看 yilia 主题的配置文件，会发现里面有两个配置选项：

1 2	share_jia: false share_addthis: false

实际上这是 yilia 集成了 jiathis 和 addthis 两大的分享功能。

addthis 是国外的社会化分享产品，分享到的平台是 google 啊，推特啊，facebook 啊这种大部分国人听都没听过的东西。 jiathis 是国内的同类产品，更本土化，能分享到 QQ 空间，微博，豆瓣等等各种社交网站上去。

yilia 已经集成了这两大功能，你只需要把对应的配置选项改成 true 即可。

1.2.4. https 支持问题和多说分享

我在 github 上搭建使用 jiathis 分享的博客的时候，我发现了一个问题。

由于 github.io 是强制使用 https 的，本来这也挺好，更安全。但是和 jiathis 放在一起就出问题了。博文里嵌入的 jiathis 功能会请求 jiathis 的服务器，但是这个请求 是 http 而不是 https 。

一些浏览器如 chrome，firefox 是禁止 https 的网页请求非 https 的资源，于是这个请求会被浏览器拦截，这个功能也就失效了。解决这个问题有两个思路，第一个思路是关掉 github.io 的强制 https，第二个思路是让页面去请求 jiathis 的 https 服务器。

但是经过我的尝试发现，这两个思路都不行。github.io 强制 https 在 github 中的设置里是关不掉的。 jiathis 也没有提供 https 的服务器。

最终我的解决方法是，放弃 jiathis 分享，改用支持 https 的多说分享。 yilia 没集成多说分享不要紧，我 fork 了 yilia 的代码，给它添加了多说分享的功能： https://github.com/frapples/hexo-theme-yilia

只需在配置中把 share_duoshuo: 设置为 true 就行了！

2. org 文件支持

对于我这样的一个 emacs 用户来说，写文档记笔记都用 org-mode。 org-mode 是 emacs 的一个非常棒的功能，和 emacs 集成的很好。 org 格式 markdown 格式很像，都是一种标记语言，主张样式和内容分离。但是 org 格式的功能比标准 markdown 要强大。像标准 markdown 连表格都没有，只能通过各种扩展的 markdown 来做到了。

样式和内容分离的一大好处，你可以专心的把注意力放在内容编辑上，而不用管各种复杂花哨的样式。这也是 markdown 受欢迎的原因。但是 org 文件除此之外，由于和 emacs 集成的很好，所以能利用 emacs 强大的编辑功能，来更舒服的手不离键盘的编辑 org 文件。

总之，用 org-mode 来写博客，是肯定要有的。

2.1. 安装 hexo-renderer-org

像我这种有这种需求的人当然不止一个，现在已经有了 emacser 开发出了 hexo 的 org 插件了，hexo-renderer-org。这是它的 gitub 地址：https://github.com/CodeFalling/hexo-renderer-org

你不用担心它对 org 文件解析的不好，因为它根本就不是自己写代码解析的！它使用了一种很聪明的方法，直接调用 emacs 来解析 org 文件。所以说，你的电脑上要安装 emacs，而且最好添加到环境变量里面。

首先安装插件， 在博客目录下 ，执行以下命令：

1	npm install hexo-renderer-org --save --registry=https://registry.npm.taobao.org

2.2. 配置 hexo-renderer-org

在博客目录下的_config.yml 加入：

org:
  emacs: 'emacs'
  common: |
          #+OPTIONS: toc:nil
          #+OPTIONS: ^:nil
  cachedir: './hexo-org-cache/'

可以看到，以上对导出的 org 做了两点默认设置：关闭 toc，禁用下划线转义。也就是说，如果你的 org 文件里没有单独配置，就用这上面的配置。

org-mode 导出的 toc，也就是文章目录，由于实在太丑，所以关闭了。而对我这样一个经常写代码的人，在博客里写各种下划线是再平常不过的事情了。 org-mode 默认会把下划线作为下标的默认语法，这个必须得关闭。

2.3. 使用 org 书写博客

使用 markdown 写博客是一样的，只不过把 md 文件换成了 org 文件了。

在博客目录下的 source/_posts 里面，建立如 xxx.org 文件。之后只管使用 emacs 的强大编辑功能，去认真的组织和书写博文内容。

在使用 markdown 书写博文时，会用到叫做 front-matter 的一种语法。它能在 markdwon 文件里设定这篇博文的一些属性，像文章标题，发布时间，tag（标签），分类等等。

这些在 org 文件里都能支持，只不过换了一种 org 支持的语法。来看一个例子：

#+TITLE: org-mode 写博客示例
#+DATE:<2016-09-15 四 10:11>
#+TAGS: emacs, orgmode, hexo
#+CATEGORIES: orgmode

这是一份写博客的示例。

我们可以看到，使用 orgmode 支持的语法就能够设置文章的标题，日期，标签和分类等属性。

这都得归功于我们的安装的 org 插件。除此之外，还有其它的属性支持：

类型	值示例	说明
#+TITLE	stirng	文章标题
#+DATE	<2015-11-16 一 20:45>	文章发布日期
#+TAGS	eamcs, orgmode, hexo	分类
#+CATEGORIES	orgmode	tag 标签
#+COMMENTS	yes/no	是否打开评论
#+LAYOUT	post/page	布局
#+OPTIONS	toc:t/nil	是否在文章前面插入目录

标题，tag，分类这些很大众化的文章属性就不说了。关于布局，一般没必要管它，详情请阅读 hexo 的官方文档。

关键是发布日期。我建议每次写博客时都最好加上当前的日期。因为如果你不加的话，hexo 会根据 org 文件的文件系统时间作为发布日期。这是很不靠谱的，鬼知道哪天这些属性在你复制过来粘贴过去的时候就被哪个软件修改了。使用 (org-time-stamp t) 命令插入当前日期和时间，你可以把它绑定喜欢的快捷键上去。

对于 toc，你可以将它设置成一个数字，表示生成 toc 的深度。但是我建议不要使用 org-mode 的导出的 toc，因为太丑了。通过其它的一些方式，也能够在 hexo 的博文中加入 toc。

2.4. 博文摘要

如果仔细观察你会发现，在我的博客里，主页中只显示博客前面的一部分内容。或许你还惊讶的发现，哇塞，这部分内容显示的恰到好处！

实际上，这并不是 hexo 用某种神奇的算法自动做到的，而是，你手动分割的。只需要在恰到好处的地方插入以下内容，就 ok 了：

#+BEGIN_HTML
<!--more-->
#+END_HTML

注意！！！org-mode，9.0 以上的版本已经淘汰了上面的写法。请用以下写法替换：

#+BEGIN_EXPORT html
 <!--more-->
#+END_EXPORT

如果是 markdown 文件，达到同样的效果要插入以下内容：

<!--more-->

2.5. 注意事项

在安装这个插件之后我测试了这个插件对于 org-mode 的各种语法的支持。这个插件还是不错的，我发现大部分的语法都支持良好，小部分的语法不支持。

但是还有极少数的语法会造成问题！！！请记住： 不要使用分割线语法！ 不要使用分割线语法！ 不要使用分割线语法！

我发现，无论是 org 还是 markdown 中，使用分割线语法（会转成 html 标签 =

=），在生成时都会报错误。我不清楚这是 yilia 主题的问题还是 hexo 的问题。为了保险起见，最好不要使用分割线。

3. 更聪明的图片链接

无论是 markdown 还是 org，都有自己的图片语法，用以在博文中插入图片。图片可以链接到外部的网络图片，要是把图片放在外部的图床上就需要这样链接。图片也可以链接到本地的图片资源。如果你试了下，那么你会发现默认的图片支持方式非常愚蠢。不多费口水，看这里你就知道哪里愚蠢了： http://www.tuicool.com/articles/umEBVfI

上面的文章推荐了一款插件可以让 hexo 变聪明起来。关键是，它能支持我们用的 hexo-renderer-org： hexo-asset-image 。这样，我们的 org 格式书写的博文，里面的图片也能变聪明起来了！

3.1. 安装 hexo-asset-image

首先安装， 在博客目录下 执行：

1	npm install https://github.com/CodeFalling/hexo-asset-image --save

这个插件有些 bug，不过现在现在已经修复了。所以，上面的命令是从 github 上安装，这样可以确保获取到 bug 修正的版本。

之后编辑博客目录下的_config.yml，找到 post_assert_folder 一项，修改为 true ：

1	post_asset_folder:true

4. 总结

实际上经过这样的配置，我的博客已经变得更不错了。它拥有腾讯前端工程师精心设计的美观简洁的精美主题，专注于阅读。它还为静态的博客页面添加了动态的交互功能：评论和分享。最重要的，还是它现在支持使用 org-mode 书写博文，配合 emacs 强大的编辑功能，博文书写更舒服。

不过它仍然还有些小瑕疵。比如现在我就没有好的 toc 也就是文章目录功能可用，也不支持 emoji 表情语法。你能看到本文的 emoji 表情，是因为在写这博文之前，我写了一个插件解决了这个问题。不过在一开始我在配置这篇博文所说的这些的时候，是确实不支持 emoji 表情的。这个留到下篇博文再说了。

现在，一个页面漂亮，功能完善，创作方便的博客已经搭建完成啦！

5. 更新记录

<2016-11-16 三 14:10> 由于发现博客存在一个 bug，修复后对 hexo-asset-image 相关内容进行了补充。
<2017-05-12 五 12:57>
- 更新 hexo-asset-image 章节，现在它存在的 bug 已经被修复了。
- 更新 org-mode 9.0 以上版本对于插入博文摘要标记的新写法。