创建Hexo主题

2021-03-195 分钟

突然想到，我获取的有效信息，主要来自Google出来的博客文章，而不是微信公众号或今日头条。

所以，还是搭建个博客吧。

1. 选型

搭博客的主要目的，是在网络上留一块地方写些东西。所以，选型的基本要求是「简单」，以专注写作。

Wordpress等重量级CMS可以排除了，选一个静态站点框架即可。根据Wappalyzer的排名，结合个人偏好，选择了基于Node.js的Hexo。

搜索到了从 0 到 1 开发 Hexo 主题杂谈这篇文章，很有帮助。

我的选择是：

安装一下插件：

npm install --save hexo-renderer-pug

npm install --save hexo-renderer-less

从零开始做主题比较麻烦，可以先使用Yeoman生成主题的框架，然后再做定制化的工作。

安装一下：

npm install --global yo

npm install --global generator-hexo-theme

然后在hexo的themes目录内创建一个新的主题目录，在该主题目录内执行：

yo hexo-theme

选择自己想要的模版引擎和CSS预处理器：

Yeoman就会生成好主题的相关文件了。

我希望主题具备以下功能：

这些插件可以完成任务：

npm install --save hexo-excerpt

npm install --save hexo-reading-time

npm install --save hexo-generator-feed

npm install --save hexo-prism-plugin

阅读时间和RSS Feed没有什么问题，但摘要和代码高亮值得一说。

直接在主题的_config.yml配置auto_excerpt没用，因为Hexo已经移除了这个功能，需要自行安装插件实现。

有2个备选：

对比显示效果之后，选择hexo-excerpt。

如果摘要插件不生效的话，可以执行一下：

hexo clean

安装hexo-prism-plugin这个插件后，需要在hexo根目录的_config.yml配置才有用，否则会报错。

categories数组里面究竟是什么？

经过自行测试，categories数组里面是对象，其属性为：

如果要展示文章的分类，并且点击分类能展示该分类下的所以文章的话，用pug可以这样写：

each categorie in post.categories.toArray()
  a(href=url_for(categorie.path))= categorie.name

为了便于引用图片，可以在hexo根目录的_config.yml配置：

post_asset_folder: true

配置之后，执行hexo new [layout] <title>命令创建新文章时，就会自动生成一个与文章同名的文件夹，用于放置文章内的图片。

引用图片时，不要使用Markdown语法。否则，首页的文章摘要无法正常显示图片。

应该使用hexo专用的图片引用语法：

{% asset_img example.jpg This is an example image %}

我实现了一套模仿Medium风格的极简主题，命名为Moderate。

就是本站正在使用的主题。