博客从 Jekyll 迁移至 Hexo 有两个主要的原因,一是喜欢的(或者说满足自己要求的)主题并不多,二是准备系统地学习一遍前端工程化,而 Hexo 正是基于 node.js。

挑选并应用当前 Hexo 主题后发现问题还是挺多,最严重的应该是代码块的样式被覆盖了导致官方的一些特性无法使用,此外还有代码风格混乱等问题。这些问题留待后续自己编写主题后再解决吧。


搭建 Hexo 环境

没什么好说的,本地安装 node.js 环境,然后按照 hexo 官方文档的步骤安装。

使用主题

基于以下要求,从 官网 中选择主题:

  • 样式简单、无需加载花里胡哨的动画
  • 行距、段距合理
  • 代码块支持语法高亮、显示行数
  • 图片尺寸可控
  • 支持 toc
  • 支持一定的扩展功能

最后选择了当前的 hexo-theme-Anatole-Core 主题:

1
2
cd your-hexo-project/
git clone https://github.com/mrcore/hexo-theme-Anatole-Core.git themes/anatole-core

git clone 命令把项目 clone 至博客项目下的 themes 文件夹,并命名为 anatole-core.

然后安装 hexo 插件:

1
npm install hexo-renderer-pug --save

最后在 _config.yml 中指定主题:theme: anatole-core

修改主题

Front-Matter 摘要字段

稍加观察会发现文章列表页显示的摘要内容混乱,而且使用了 hexo 官方文档 front-matter 定义的 excerpt (摘要) 字段也没有生效。判断为该主题的 layout 没有使用该属性。

找到并编辑 themes/anatole-core/layout/mixins.pug 文件,将第 13 行的 item.summary 改为 item.excerpt:

修改字段

注意此处可选不修改 mixins.pug 文件,而直接在文章的 front-matter 中使用 summary 属性,该属性在官方文档中没有出现,说明 hexo 是支持这样的自定义属性。但是考虑到官方的 tag plugins 支持 excerpt 字段,因此不使用该主题的 summary 属性。

代码块标签字体

原主题中代码块的内容都快挤在一起了,考虑到最重要的是显示的内容要清晰,因此使用默认字体即可。

找到 themes/anatole-core/source/css/blog_basic.css 文件,将第 44 行 font-family 注释掉(当然也可以替换为想要的字体)。

区域引用 blockquote

恢复默认样式中的 -:

1
2
3
4
cite:before {
content: '-';
padding: 0.3em;
}

TODO:

  • 移除右上角 history 按钮
  • 根据 h1 标签跳转时,标题被导航栏遮挡
  • 代码块的样式被覆盖,无法使用 tag plugins 增强

Hexo TOC 插件

在 Jekyll 中,生成目录 toc (table of contents) 使用:

1
2
* table of contents
{:toc}

在 Hexo 中则需要安装插件:

1
npm install hexo-toc --save

然后在项目配置文件 _config.yml 中指定生成标题的深度:

1
2
toc:
maxdepth: 3

最后在文章中使用如下标记即可:

1
<!-- toc -->

Hexo Tag Plugins

测试使用 Tag Plugins 对文章内容(图片、代码块等)的控制。

引用

使用 blockquote 标签,在原样式的基础上,可附带作者、书等信息。当然如果无需显示额外的信息,还是 markdown 自带的 > 方便。

显示作者:

1
2
3
{% blockquote 鲁迅 %}
“我没有说过。”
{% endblockquote %}

效果:

“我没有说过。”

鲁迅

显示作者和书名:

1
2
3
{% blockquote 鲁迅, 从百草园到三味书屋 %}
“我真的没有说过。”
{% endblockquote %}

效果:

“我真的没有说过。”

鲁迅从百草园到三味书屋

显示原文地址:

1
2
3
{% blockquote Heap Sort https://en.wikipedia.org/wiki/Heapsort %}
In computer science, heapsort is a comparison-based sorting algorithm.
{% endblockquote %}

效果:

In computer science, heapsort is a comparison-based sorting algorithm.