创建Hexo主题

5 分钟

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

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

1. 选型

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

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

2. 创建主题

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

2.1. 选择模版引擎和CSS预处理器

我的选择是:

  • 模版引擎:Pug(曾用名:Jade)
  • CSS预处理器:Less

安装一下插件:

npm install --save hexo-renderer-pug
npm install --save hexo-renderer-less

2.2. 生成主题

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

安装一下:

npm install --global yo
npm install --global generator-hexo-theme

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

yo hexo-theme

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

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

3. 个性化主题

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

  • 首页展示文章的摘要
  • 每篇文章都有预计阅读的时间
  • 可以输出RSS Feed
  • 代码高亮

这些插件可以完成任务:

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没有什么问题,但摘要和代码高亮值得一说。

3.1. 摘要

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

有2个备选:

  • hexo-auto-excerpt
  • hexo-excerpt

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

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

hexo clean

3.2. 代码高亮

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

4. Hexo文档的模糊之处

categories数组里面究竟是什么?

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

  • name:分类的名称
  • path:分类的路径

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

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

5. 图片

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

post_asset_folder: true

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

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

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

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

6. 最后

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

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

版权所有 © 2021 Shiau. 以商业目的使用本网站内容需获许可。非商业使用本网站内容需遵循知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议。All content is made available under the CC BY-NC-ND 4.0 for non-commercial use. Commercial use of this content is prohibited without explicit permission.

Powered by hexo with theme moderate.