零基础搭建个人博客(伍)
设置Hexo主题
在成功安装完node.js和hexo后,博客大房子就已经搭建起来了,拥有了最基本的框架。
但是仅仅只有框架是远远不够的,我们还需要对内部进行「装修」这一项操作,换而言之就是使用主题。
主题
主题,顾名思义,是显示出一个网站风格的一段程序。
主题的主要构成是CSS和JavaScript,通过定义网页动画和行为来与用户进行交互和展示。
所以选择一个适合的主题对于网站风格来说是很关键的一步。
常用的主题
随着hexo主题的不断使用,更多的主题也随之涌现出来,目前流行的主题按流行度降序排列:
- NexT,最为广泛使用的主题
- 优点:广泛使用,教程丰富,步骤完善,界面美观。
- 不足:可拓展性较差,修改复杂,站点配置文件冗长。
- yilia和yilia-plus,简约主题
- 优点:同样广泛使用,且站点配置文件有中文注释,非常易于上手,可拓展性高,易于自主实现想法。
- 不足:背景的搭配决定了很大的体验感受,较为简洁(左右板块)。
- keep,butterfly等主题
- 适用人数居中,教程较多,若对前面均不满意可自行选择。
- 较为美观,但同样可拓展性较差。
- Maupassant,超简约风主题
- 优点:简约
- 不足:简约
- 配置参考:大道至简——Hexo简洁主题推荐
- Tranquilpeak
- 类似yilia,但是展开全文后去掉了左侧的信息控制区。
- 不足:使用者较少,拓展教程较少。
应用主题
选择完主题以后,我们就要将主题安装到自己的仓库里。
由于主题的代码位于Github的仓库,所以可以用克隆仓库的命令将其克隆到自己的博客里。
克隆主题
由于hexo要求主题必须在theme
文件夹里,所以可以选择在theme
文件夹里进行克隆操作。或者在博客根目录下进行克隆操作以后,将路径转换到文件夹内。
如果选择后者,就要在代码尾部加上theme/next
。
也就是
1 |
|
严格来说,theme文件夹里的主题文件夹的名字并不一定要求是主题的名字,但为了使调用时代码可读性高,建议使用主题的名字。
1 |
|
NexT主题克隆命令
1 |
|
yilia主题克隆命令
1 |
|
keep主题克隆命令
1 |
|
butterfly主题克隆命令
其余的主题请自行搜索。
修改配置文件
配置文件的区分
现在由于克隆了主题,博客程序便会出现了两个配置文件配置文件_config.yml
。
第一个配置文件位于博客根目录下,其中的信息是对hexo框架的设置。
第二个配件位于主题的目录内,那个其中的信息是对主题版式的设置。
为了区分这两个配置文件,将第一个配置文件称为站点配置文件
,第二个配置文件称为主题配置文件
。
如前文所述,站点配置文件主要负责网站的底层逻辑操控,主题配置文件主要负责对网站页面的设计和操作。
当后文或网上的教程没有指明是哪个配置文件时,请仔细思考:此操作到底是针对主题还是针对底层逻辑?
例如:后文中会有生成短链接的教程,但许多教程没有指明是哪个配置文件。
仔细思考一下,由于链接是网站的根本基础,并没有针对主题内进行特殊的样式改变,所以应该在站点配置文件修改。
修改站点配置文件中的主题信息
在配置文件中搜索theme
,在后面添加上你的主题文件的文件名。
注意:如果在上一步中将文件夹命名为其他名字,如mytheme,则填写的是文件夹的名字,冒号后的字符串相当于路径中的一个目录,所以推荐文件夹名称和主题名称相符合。
注意:yml文件中冒号: 后应包含一个空格。
至此,你的主题已经成功应用,可通过hexo s
查看或hexo d
部署。
设置站点信息
1 |
|
在站点配置文件中完善这些信息便可。
关于子主题的提醒
有部分主题中还有多个主题,如NexT。
在这其中只能选择一个主题,其余的需要用#注释掉。
NexT默认选择了一个主题Muse,若你想换其他主题,又不把这里的#加上,会在hexo g这一步报错。
小结
至此,你已经完成了基于hexo的个人博客搭建!
如果对附加功能没有要求,便可投入使用。
接下来的第六章,将会讲述如何完善各个主题。