【个人网站搭建】GitHub pages+hexo框架下为next主题添加分类及标签

浅浅的花香味﹌ 2023-01-01 14:49 276阅读 0赞

# 0x00 前言 #

文章中的文字可能存在语法错误以及标点错误，请谅解；

如果在文章中发现代码错误或其它问题请告知，感谢！

Hexo博客框架版本（hexo vesion）：5.3.0

Next主题版本：v5.1.4

# 0x01 实现方法 #

## 1.增加分类功能 ##

### (1) 新建“分类”页面 ###

使用如下指令为next主题新建分类页面

$ hexo new page "categories"

此时在根目录下的`source`文件夹内会生成一个`categories`子文件夹:  
![在这里插入图片描述][20210103151729357.png_pic_center]

### (2) 设置md文件type属性 ###

打开`categories`文件夹内`md`文件，将type设置为`"categories"`：

---
    title: categories
    date: 2020-12-28 17:09:31
    type: "categories"
    comments: false
    ---

保存并关闭。

### (3) 给文章添加`categories`属性 ###

打开需要添加分类的文章，并对其添加`categories`属性，在属性下方使用`"- XXX"`设置想要的分类的内容，例如将这篇文章的设置于`生活感悟`分类下：

---
    title: 我的第一篇博客（撒花！）
    date: 2020-12-18 17:17:45
    categories:
    - 生活感悟
    ---

**注意：** hexo只能为一篇文章添加一种分类，如果在`"- XXX"`下面再增添`"- YYY"`，hexo不会为其设置两个分类，而是将`YYY`分类嵌套于`XXX`分类之下。

添加之后运行`hexo s`点击分类菜单查看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxaW5nY2h1YW45Mg_size_16_color_FFFFFF_t_70_pic_center]

## 2.增加标签功能 ##

和添加分类功能的设置方法一样，只不过是将`categories`变成`tags`。

### (1) 新建“标签”页面 ###

使用如下指令为next主题新建分类页面

$ hexo new page "tags"

此时在根目录下的`source`文件夹内会生成一个`tags`子文件夹:  
![在这里插入图片描述][20210103153802842.png_pic_center]

### (2) 设置md文件type属性 ###

打开`tags`文件夹内`md`文件，将type设置为`"tags"`：

---
    title: tags
    date: 2020-12-28 17:06:02
    type: "tags"
    comments: false
    ---

保存并关闭。

### (3) 给文章添加`tags`属性 ###

打开需要添加分类的文章，并对其添加`tags`属性，在属性下方使用`"- XXX"`设置想要的标签内容，例如将这篇文章的设置于`首篇文章`标签下：

---
    title: 我的第一篇博客（撒花！）
    date: 2020-12-18 17:17:45
    tags: 
    - 首篇文章
    categories:
    - 生活感悟
    ---

添加之后运行`hexo s`点击标签菜单查看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxaW5nY2h1YW45Mg_size_16_color_FFFFFF_t_70_pic_center 1]

# 0x02 将分类和标签添加默认模板 #

为了简化工作流程，可以通过修改将分类和标签功能添加到默认模板中。打开`scaffolds/post.md`文件，在文件后面添加`tages:`和`categories:`：

---
    title: { {  title }}
    date: { {  date }}
    tags:
    categories:
    ---

这样之后再使用`hexo new page "XXX"`生成文章就可以在页面中看到有`tages:`和`categories:`选项了。

以上。

参考为文档：  
1.[https://www.jianshu.com/p/e17711e44e00][https_www.jianshu.com_p_e17711e44e00]

[20210103151729357.png_pic_center]: /images/20221120/4e66a07d768f4ede96b1155bab1449a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxaW5nY2h1YW45Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/6e0e17e5395347cea9080845000e4b39.png
[20210103153802842.png_pic_center]: /images/20221120/23412628dd8244ea886c5cdd3eff2641.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxaW5nY2h1YW45Mg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/1636ef523902468c91ffac364bb720e6.png
[https_www.jianshu.com_p_e17711e44e00]: https://www.jianshu.com/p/e17711e44e00