一、默认主题

在完成 Hexo + GitHub Pages 的方案搭建,也进行了一些基础的配置(工程_config.yml配置),现在已经能够新建文章。然而看着这个页面,总感觉哪里不对…

最后发现原来是页面不够好看!相信大部分人都是追求美好事物的,当然我也不例外。但是我并不熟悉 CSS、JavaScript 之类的语言,如何才能达到美化网站的目的呢?这时候就需要 Hexo主题 出场了。

原来在我们创建的 Hexo 工程,默认使用了一个名为 landscape 的主题,在工程 _config.yml 文件中是这样配置的:

1
theme: landscape

而这个主题是通过 npm 安装的:

二、配置主题

那么同理,我们可以通过 npm 安装更多的主题,然后通过 _config.yml 文件进行配置来切换主题。

可以看到有非常多的主题可供选择,当然主题中有许多都是社区贡献的,并不是由 Hexo 组织维护,Hexo 组织不保证其可用性和安全性。因此在选择主题上,我认为应该在个人喜好的基础上,选择一些热门的,而且现在还在维护中的,遇到问题会便于解决。

三、我的选择

基于以上,以下是我可能会选择的主题:

1、NexT

高品质优雅的主题。
文档
示例

2、Butterfly

简约的卡片UI设计的主题。
文档
示例

3、Fluid

优雅轻盈的主题。
文档
示例

4、Icarus

简约的、精致的、现代的主题。
文档
示例

5、Stellar

内置文档系统的简约商务风主题,支持丰富的标签和动态数据组件,可以从容应对各种表达需求。
文档
示例

四、实践

1、安装主题

这里我以安装 Butterfly 主题为例。
首次安装,在我的 Hexo 工程根目录,执行(此方法只支持 Hexo 5.0.0 以上版本)

1
npm install hexo-theme-butterfly

如果是升级

1
npm update hexo-theme-butterfly

2、应用主题

修改下 Hexo 工程根目录的 _config.yml

1
theme: butterfly

3、安装插件

安装 pug 和 stylus 的渲染器

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

4、主题配置文件

将主题的配置文件 _config.yml (本例子中在 /vampire-locker.github.io/node_modules/hexo-theme-butterfly/_config.yml 路径下,注意不是 Hexo 工程的 _config.yml) 复制并改名为 _config.butterfly.yml,放到 Hexo 工程根目录下

这样的话 _config.butterfly.yml 的配置会优先于主题的 _config.yml 中的配置,以后都在 _config.butterfly.yml 中进行修改,主题的 _config.yml 需要保留。在这之后,就算后面需要升级 butterfly,也可以直接升级,然后根据文档对 _config.butterfly.yml 进行修改即可。

查看结果

1
hexo clean && clean g && clean s


好看多了!后面就是根据主题的文档,进行更多的个性化配置。