零基础搭建个人博客(伍)

设置Hexo主题

在成功安装完node.js和hexo后,博客大房子就已经搭建起来了,拥有了最基本的框架。

但是仅仅只有框架是远远不够的,我们还需要对内部进行「装修」这一项操作,换而言之就是使用主题。

主题

主题,顾名思义,是显示出一个网站风格的一段程序。

主题的主要构成是CSS和JavaScript,通过定义网页动画和行为来与用户进行交互和展示。

所以选择一个适合的主题对于网站风格来说是很关键的一步。

常用的主题

随着hexo主题的不断使用,更多的主题也随之涌现出来,目前流行的主题按流行度降序排列:

  • NexT,最为广泛使用的主题
    • 优点:广泛使用,教程丰富,步骤完善,界面美观。
    • 不足:可拓展性较差,修改复杂,站点配置文件冗长。
  • yilia和yilia-plus,简约主题
    • 优点:同样广泛使用,且站点配置文件有中文注释,非常易于上手,可拓展性高,易于自主实现想法。
    • 不足:背景的搭配决定了很大的体验感受,较为简洁(左右板块)。
  • keep,butterfly等主题
    • 适用人数居中,教程较多,若对前面均不满意可自行选择。
    • 较为美观,但同样可拓展性较差。
  • Maupassant,超简约风主题
  • Tranquilpeak
    • 类似yilia,但是展开全文后去掉了左侧的信息控制区。
    • 不足:使用者较少,拓展教程较少。

应用主题

选择完主题以后,我们就要将主题安装到自己的仓库里。

由于主题的代码位于Github的仓库,所以可以用克隆仓库的命令将其克隆到自己的博客里。

克隆主题

由于hexo要求主题必须在theme文件夹里,所以可以选择在theme文件夹里进行克隆操作。或者在博客根目录下进行克隆操作以后,将路径转换到文件夹内。

如果选择后者,就要在代码尾部加上theme/next

也就是

1
git clone (https://git) theme/next

严格来说,theme文件夹里的主题文件夹的名字并不一定要求是主题的名字,但为了使调用时代码可读性高,建议使用主题的名字。

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

NexT主题克隆命令


1
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

yilia主题克隆命令


1
git clone https://github.com/XPoet/hexo-theme-keep

keep主题克隆命令


1
git clone https://gitee.com/iamjerryw/hexo -theme -butterfly.git

butterfly主题克隆命令


其余的主题请自行搜索。

修改配置文件

配置文件的区分

现在由于克隆了主题,博客程序便会出现了两个配置文件配置文件_config.yml

第一个配置文件位于博客根目录下,其中的信息是对hexo框架的设置。

第二个配件位于主题的目录内,那个其中的信息是对主题版式的设置。

为了区分这两个配置文件,将第一个配置文件称为站点配置文件,第二个配置文件称为主题配置文件

如前文所述,站点配置文件主要负责网站的底层逻辑操控,主题配置文件主要负责对网站页面的设计和操作。

当后文或网上的教程没有指明是哪个配置文件时,请仔细思考:此操作到底是针对主题还是针对底层逻辑?

例如:后文中会有生成短链接的教程,但许多教程没有指明是哪个配置文件。

仔细思考一下,由于链接是网站的根本基础,并没有针对主题内进行特殊的样式改变,所以应该在站点配置文件修改。

修改站点配置文件中的主题信息

image-20230930094047244

在配置文件中搜索theme,在后面添加上你的主题文件的文件名

注意:如果在上一步中将文件夹命名为其他名字,如mytheme,则填写的是文件夹的名字,冒号后的字符串相当于路径中的一个目录,所以推荐文件夹名称和主题名称相符合。

注意:yml文件中冒号: 后应包含一个空格。

至此,你的主题已经成功应用,可通过hexo s查看或hexo d部署。

设置站点信息

1
2
3
4
5
6
7
8
# Site
title: #标题
subtitle: ''
description: #简介或者格言
keywords:
author: #作者
language: zh-CN #主题语言
timezone: Asia/Shanghai #中国的时区

在站点配置文件中完善这些信息便可。

关于子主题的提醒

有部分主题中还有多个主题,如NexT。

在这其中只能选择一个主题,其余的需要用#注释掉。

NexT默认选择了一个主题Muse,若你想换其他主题,又不把这里的#加上,会在hexo g这一步报错。

小结

至此,你已经完成了基于hexo的个人博客搭建!

如果对附加功能没有要求,便可投入使用。

接下来的第六章,将会讲述如何完善各个主题。

零基础搭建个人博客(陆) | Windeling


零基础搭建个人博客(伍)
https://blog.windeling.com/2023093017f4661a/
作者
黄文林
发布于
2023年9月30日
更新于
2025年5月10日
许可协议