Hexo+Next(5)Categories和Tags等自定义页面

Categories页面

Next主题默认是没有Categories页面的,只能在每篇文章里面点击对应的categories来进入页面,页面链接是http://localhost:4000/categories/Hexo/

为了能在首页左侧侧边栏添加一个快速进入categories的入口,可以增加一个Categories的页面。

首先通过hexo命令创建一个categories的page。

1
2
3
$ hexo new page categories
INFO Validating config
INFO Created: D:\workSpace\blog\hexo-blog\source\categories\index.md

默认会生成一个只有title和date的页面:

1
2
3
4
---
title: categories
date: 2023-06-21 14:12:27
---

此时可以通过链接http://localhost:4000/categories/访问到一个空页面。

因为还没有配置页面的类型,所以他里面什么内容都没有。

此时设置类型为categories,并且comments设置成false(不让评论)。

1
2
3
4
5
6
---
title: categories
date: 2023-06-21 14:12:27
type: "categories"
comments: false
---

最后需要在侧边栏左侧添加快速入口,修改_config.next.yml文件,设置menu字段的值。

1
2
3
menu:
home: / || fa fa-home
categories: /categories/ || fa fa-th

配置之后就可以通过点击页面左侧的categories进入localhost:4000/categories/分类页面了。

categories page

||标记后面的是Font Awesome标记的名称,名称可以从Font Awesome找到。

如果我们觉得这个categories的icon不好看,可以在Font Awesome网站找一个自己喜欢的。

比如找到这个鱼的icon,作为categories的icon。

Font Awesome Icon

1
2
3
menu:
home: / || fa fa-home
categories: /categories/ || fa-solid fa-fish

重新启动之后,categories的icon就变成了这个鱼。

Fish Icon

Tags页面

增加tags页面的流程和categories页面类似。

首先新增tags页面。

1
2
3
$ hexo new page tags
INFO Validating config
INFO Created: D:\workSpace\blog\hexo-blog\source\tags\index.md

设置页面类型。

1
2
3
4
5
6
---
title: tags
date: 2023-06-21 14:52:29
type: "tags"
comments: false
---

配置_config.next.yml文件。

1
2
3
menu:
home: / || fa fa-home
tags: /tags/ || fa fa-tags

AboutMe页面

上面的两个页面是有特定类型的页面,categories和tags页面类型都是系统已经定义好的,系统会自动填充内容到里面。

如果不设置type类型,这个页面的内容就需要我们自己写。

比如我们需要一个AboutMe页面,用来自我介绍,可以参照上面的方式,但是跳过中间一步。

首先创建页面。

1
2
3
$ hexo new page aboutme
INFO Validating config
INFO Created: D:\workSpace\blog\hexo-blog\source\aboutme\index.md

配置_config.next.yml文件。

1
2
3
menu:
home: / || fa fa-home
about: /aboutme/ || fa fa-user

About Me