Hexo 自定义主题和菜单

文章目录

* 一、更换 Hexo 主题及样式
<https://blog.csdn.net/lijing742180/article/details/85622524#_Hexo__1>
* 1、默认主题 <https://blog.csdn.net/lijing742180/article/details/85622524#1_3>
* 2、更换主题 <https://blog.csdn.net/lijing742180/article/details/85622524#2_6>
* 2.1 下载新主题
<https://blog.csdn.net/lijing742180/article/details/85622524#21__10>
* 2.2 修改站点配置文件
<https://blog.csdn.net/lijing742180/article/details/85622524#22__18>
* 2.3 修改 next 主题的样式
<https://blog.csdn.net/lijing742180/article/details/85622524#23__next__24>
* 二、自定义主题菜单 <https://blog.csdn.net/lijing742180/article/details/85622524#_39>
* 1、配置主题菜单 <https://blog.csdn.net/lijing742180/article/details/85622524#1_41>
* 2、设置标签和分类 <https://blog.csdn.net/lijing742180/article/details/85622524#2_57>
* 2.1 菜单 404 报错问题
<https://blog.csdn.net/lijing742180/article/details/85622524#21__404__59>
* 2.2 创建标签和分类文件夹
<https://blog.csdn.net/lijing742180/article/details/85622524#22__65>
* 2.3 在 index.md 中增加 type 属性
<https://blog.csdn.net/lijing742180/article/details/85622524#23__indexmd__type__81>
* 2.4 在文章中加入 tags 和 categories 属性
<https://blog.csdn.net/lijing742180/article/details/85622524#24__tags__categories__88>


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

<>1、默认主题

我们通过 hexo init 初始化的网站，使用的是 hexo 默认的主题样式 lanscape，位于 xxx/themes/lanscape
目录，我们可以到官网的主题市场 <https://hexo.io/themes/> 根据自己的喜好更换其它的主题。

<>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 <https://fontawesome.com/?from=io>
，可以在这个网站找到自己喜欢的图标后，把图标名称写在|| 后面即可。

<>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 <http://index.md> ：



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

此时如果重新发布网站之后，页面不会报错，但是还不能自动检索文章，需要在刚才生成的文件夹中的 index.md <http://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 时也是这样解决。

• « 上一篇：内部排序和外部排序小结
• » 下一篇：计算中本聪如何设置的比特币数量