搭建 Github 个人博客(三):设置 hexo 博客主题

之前写了两篇文章来教大家怎么去创建 GitHub 个人博客,然后再怎么配合 hexo 去开发博客。

本来这个教程到此也差不多结束了。但是后来有些笨鸡娃子找到我说,不会设置博客主题,所以还是决定再写最后一篇教程讲一下怎么去用 hexo 去设置博客的主题。

选择主题

在设置主题之前,首先需要去找一款喜欢的主题样式。hexo 有自己的博客主题官网 Themes | Hexo,可以在官网里去找喜欢的主题样式。百度上也可以搜到一些开发者们自己写的一些好看主题。具体的自行百度,随便一搜就出来很多了。

选择好主题后,找到该主题的地址。我们用官网的一个主题为例:

(1)点击主题名字进入主题详情页面。

  • 详情页面里有一个README.md的主题说明的文档。大部分的主题在这个文档里都会有下载安装配置的流程说明。

    例如我们当前选择的这个主题,详情页面往下拉就能看到下载安装主题需要执行的相关命令,直接按照文档里给出的命令依次去执行就可以了。

    如果遇到文档没有写安装教程的,或者 … 看不懂英文的 … 那就继续看我们这个教程的下一步吧。

(2)点击详情页面的绿色按钮,复制红框中的主题地址。

在其他网站找的主题也一样的会有一个主题的地址,同样的复制下来就行。

主题安装

有了主题地址之后,接下来我们就可以开始安装了。

(1)打开命令行工具,进入到你的博客文件夹。然后执行以下格式的命令,将选中的主题克隆下来。

1
git clone "url" themes/"themeName" // 不要复制这一行!!!看下面解释!!!
  • "url"就是我们刚刚复制的主题地址。
  • "themeName"是我们当前选择的主题名字

将你找到的主题地址和主题名字替换掉上面的"url""themeName"

例如我们刚刚在官网找到的那个主题,执行命令如下:

1
git clone https://github.com/levblanc/hexo-theme-aero-dual.git themes/aero-dual
  • themes/aero-dual前面的themes是存储所有主题文件的文件夹名字,aero-dual是当前主题文件夹的名字,也是当前主题的名字。

(2)看到出现类似下面这种 100% 的命令,就表示主题下载成功了。

(3)下载成功之后,在我们的博客文件目录就可以看到我们刚刚下载好的主题文件。

(4)用编辑器打开博客文件目录中的_config.yml文件。将主题配置改为当前选择的主题名字。

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: aero-dual

(5)通过命令进入到当前主题文件夹,例如:

1
cd themes/aero-dual

aero-dual这是我的主题名字!你们自己换成你们自己选择的主题名字。

(6)然后再执行下面的代码,将当前更改的信息进行合并。

1
git pull

(7)最后,主题配置完成。回到博客文件目录执行以下命令重新部署整个博客。

1
2
hexo g
hexo d

好,完成。重新打开博客就可以发现新的主题已经生效了。

功能配置

到上一步,我们的主题其实就已经安装好了。博客基本上也可以正常使用了。

但是有的时候,博客或者主题的一些默认配置并不是我们想要的,所以我们还可以根据自己的需求去更改一些配置。这里简单梳理几个常用的配置信息。

博客配置

找到博客目录下的_config.yml文件。

注意:以下所有配置,冒号后面都要有一个空格。

1
2
3
title: ## 博客主标题
subtitle: ## 博客副标题
language: zh-CN ## 语言 中文

主题配置

每一个主题的文件目录下也都有一个_config.yml文件,这个就是主题配置文件。不同的主题配置信息也不一样。

评论功能

因为添加评论功能的配置比较复杂,所以单独写了一篇博客来讲解。

《搭建 Github 个人博客(四):配置博客评论功能》

其他配置

文章摘要

有一些主题博客首页默认显示全文,如果只希望现实某一个段落在首页,可以在文章内容中插入<!--more-->以隐藏后面的内容。


所有关于博客搭建的教程就写到这了。以后想到还有什么漏掉的再来修改。

我 秦始皇 打钱