关于 Hexo 主题
一、默认主题
在完成 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
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 |
好看多了!后面就是根据主题的文档,进行更多的个性化配置。