Hexo 自定义主题和菜单

发布时间：2019-01-02 16:22,

浏览次数：944

, 标签：

Hexo

文章目录

* 一、更换 Hexo 主题及样式

* 1、默认主题

* 2、更换主题

* 2.1 下载新主题

* 2.2 修改站点配置文件

* 2.3 修改 next 主题的样式

* 二、自定义主题菜单

* 1、配置主题菜单

* 2、设置标签和分类

* 2.1 菜单 404 报错问题

* 2.2 创建标签和分类文件夹

* 2.3 在 index.md 中增加 type 属性

* 2.4 在文章中加入 tags 和 categories 属性

<>一、更换 Hexo 主题及样式

<>1、默认主题

我们通过 hexo init 初始化的网站，使用的是 hexo 默认的主题样式 lanscape，位于 xxx/themes/lanscape

目录，我们可以到官网的主题市场 根据自己的喜好更换其它的主题。

<>2、更换主题

我目前使用的是 Next 主题，非常简约风。在此以 Next 主题为例，说明如何把 Hexo 的默认主题 lanscape 更换成 next 主题。

<>2.1 下载新主题

进入你本地创建的网站的 themes 目录中，在这里打开 Git Bash 命令行，使用 git clone 下载 next 主题：

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

这是将 Next 主题下载到本地 themes 目录下的 next 文件夹中。

<>2.2 修改站点配置文件

打开站点的配置文件 blog/_config.yml ，找到 theme 配置项，把值从 landscape 改为 next。

<>2.3 修改 next 主题的样式

next 主题提供了几个不同的样式可供选择。

打开主题的配置文件 blog/themes/next/_config.yml ，找到 Schemes 模块，我用的是 5.1.4 版本的主题，包含有下面 4

种样式：

* Muse：这是默认的样式，是 NexT 最初的版本，黑白主调，大量留白；

* Mist： Muse 的紧凑版本，整洁有序的单栏外观；

* Pisces： 双栏 Scheme，小家碧玉似的清新；

* Gemini： 左侧是网站信息及目录，块 + 片段结构布局；

去掉 scheme 前面的注释符 # 即可启用该样式，你可以依次试用一下，选择某一个样式之后执行 hexo g 、hexo d

重新发布即可看到新样式了，我使用的是第三种 Pisces。

<>二、自定义主题菜单

<>1、配置主题菜单

主题菜单在页面上指的就是下面这一块：

(不同的主题样式，菜单的位置不太一样，我用的是 Pisces 样式，菜单是在页面的左侧)

主题菜单是在主题的配置文件 blog/themes/next/_config.yml 中 menu 模块定义的：

上面是菜单项名称和对应的图标名称，下面是控制图标是否启用。

其中使用的菜单图标都是来自于 Font Awesome

，可以在这个网站找到自己喜欢的图标后，把图标名称写在|| 后面即可。

<>2、设置标签和分类

<>2.1 菜单 404 报错问题

此时，当我们在首页点击 标签 或 分类 时，会报 404 ，这是因为我们还没有创建对应的文件夹，所以报 404 找不到。

<>2.2 创建标签和分类文件夹

在 cmd 窗口中执行 hexo new page 'name' 命令在本地创建标签和分类文件夹：

hexo new page 'tags' # 创建tags子目录 hexo new page 'categories' # 创建categories子目录

执行成功后，如下图所示：

同时，本地的 source 目录下生成了对应的文件夹，且文件夹中都会有一个 index.md ：

<>2.3 在 index.md 中增加 type 属性

此时如果重新发布网站之后，页面不会报错，但是还不能自动检索文章，需要在刚才生成的文件夹中的 index.md

中增加对应的 type 属性，如下图所示：

<>2.4 在文章中加入 tags 和 categories 属性

在新建的文章，或者是之前创建的测试文章头部加入下面的头信息：

--- title: 脚本参数化的思考 date: 2019-01-01 11:20:32 tags: [参数化,性能测试] categories: 工作

toc: true ---

其中 tags 和 categories 属性后面的值都会被 标签 和 分类 页面检索到。

最后在 Git Bash 中执行 hexo g、hexo d 重新发布后，再点击 标签 和 分类

页面，就不会报错了，同时会检索到文章中设置的所有的对应信息，如下图所示：

同理，其它的菜单项报 404 时也是这样解决。