更换Hexo框架主题为Next主题

Hexo框架默认使用的是landscape主题,该主题的显示效果其实大多数人是不太喜欢的。相比之下,Next主题给人的感觉则比较简洁、清爽,其在移动端的布局效果也是相当之好的,并且修改起来也十分的方便。我的这个个人网站使用的就是Next主题,本文就将介绍如何安装和配置Next主题。

一、前言

Hexo具有非常多的主题可供选择,在这其中,Next主题深受很多使用者的喜爱。当然,萝卜青菜各有所爱,您可以在Hexo主题列表中选择您喜欢的主题进行设置。不过,Next主题确实是我特别安利的一款主题。

二、Next主题安装配置

1.安装Next主题

Hexo中进行主题的安装,是非常简单和容易的。具体到Next主题,只需要在项目根目录下(我的为blog)打开Git Bash,输入以下命令,即可完成Next主题的安装。
1
git clone https://github.com/iissnan/hexo-theme-next themes/next

2.Next主题结构

Next主题下载安装完成后,可以看到,在项目根目录下的thems文件夹内,多了一个next文件夹,这就是刚才下载的next主题,进入next文件夹,我们看到,其项目结构如下所示:
1
2
3
4
5
6
.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

在这里,各位朋友们,有两个概念一定要弄清楚。在某个主题下的_config.yml文件,我们通常称之为主题配置文件。而在项目根目录下的_config.yml文件,则称之为站点配置文件。后续文章会经常提到这两个名词,请大家注意区分。

位于项目根目录下的_config.yml文件,称为站点配置文件;位于/themes/theme/下的_config.yml文件,称为主题配置文件。

3.启用并设置Next主题

打开站点配置文件,找到theme字段,将其(从原来的landscape)修改为next即可启用Next主题。
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
然后打开Next主题的主题配置文件,找到scheme字段,选择Pisces SchemeNext主题提供了4种不同的外观,您可以挨个测试,看您更喜欢哪一个效果。我个人选择的是Pisces
1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

4.查看并验证效果

分别输入以下命名,即可查看和验证Next主题效果:
1
2
hexo clean
hexo s -g
Pisces下,效果如下图所示:当然了,Next主题还可以进行很多自定义的设置,可查看Next官方文档

三、总结

本文讲解了如何进行Next主题的安装和启用,通过使用Next主题,网站已经呈现出一种清爽、简洁之美。在下一篇文章中,我将介绍如何对网站进行个性化的设置,如设置作者、网站标题、url形式等等。

四、参考链接

--本文结束 感谢阅读--
创作十分不易,原创更应鼓励