Hexo 自定义主题和菜单

版权声明:原创不易,未经作者允许请勿随意转载!因个人能力和精力有限,难免有疏漏和不足之处,欢迎指正,谢谢~ https://blog.csdn.net/lijing742180/article/details/85622524

一、更换 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 时也是这样解决。

猜你喜欢

转载自blog.csdn.net/lijing742180/article/details/85622524