Butterfly主题中实现二级分类独立导航栏页面的方法

问题背景

环境信息

1 2	Hexo 版本：7.2.0 Butterfly 主题版本：5.5.1

在使用 Hexo Butterfly 主题搭建博客时，很多朋友都会遇到这样一个需求：希望将某个二级分类作为独立的菜单项显示在导航栏上，点击后直接进入该二级分类的专属页面。

网上查找的教程可能要你修改butterfly主题代码，其实大可不必这么复杂，只需要在主题配置文件中稍作调整即可。

比如，你的分类结构可能是这样的：

教程
- Hadoop教程
- Flink教程
文档
- XXX操作文档
- XXXX操作文档

你希望「教程」这个二级分类能够拥有自己的独立入口，而不是仅仅在总分类页面中展示。

解决方案

其实实现方法非常简单，只需要在主题配置文件中稍作调整即可。

修改菜单配置

在 _config.butterfly.yml 配置文件中，找到 menu 配置项：

修改前：

menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open

修改后：

menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  教程: /categories/教程/ || fas fa-laptop-code
  文档: /categories/操作文档/ || fas fa-book

我的网址是这样的：

menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/|| fas fa-folder-open
  教程 || fas fa-laptop-code:
    飞牛os: /categories/教程/fnos系列教程/
    大数据平台搭建教程: /categories/教程/大数据平台搭建教程/
  文档: /categories/操作文档/ || fas fa-book

预览图如下：

修改完后记得重启你的hexo服务，让主题生效。

关键说明

路径配置规则

在菜单配置中，使用 /categories/你的分类名称/ 的格式来直接指向特定分类页面。例如：

教程: /categories/教程/ || fas fa-laptop-code
文档: /categories/操作文档/ || fas fa-book

图标选择

fas fa-laptop-code 和 fas fa-book 是 Font Awesome 图标
可以根据个人喜好替换其他图标，格式为 fas fa-图标名称
图标部分为可选，如果不需要可以省略 || 及后面的内容

分类一致性要求

确保菜单中使用的分类名称与文章 Front-matter 中设置的分类名称完全一致，包括：

中文/英文大小写
特殊符号
空格格式

文章分类设置方法

方式一：数组格式（推荐）

---
title: 你的文章标题
categories: 
    -[教程, Hadoop教程]
---

方式二：嵌套格式

---
title: 你的文章标题  
categories:
  - 教程
  - Hadoop教程
---

方式三：多分类设置

如果一篇文章需要归属到多个分类：

---
title: 你的文章标题
categories:
  - [教程, Hadoop教程]
  - [文档, 大数据文档]
---

效果展示
完成配置后，你将获得：

✅ 导航栏显示独立的「教程」和「文档」菜单项

✅ 点击菜单直接进入对应分类的文章列表

✅ 自动筛选显示该分类下的所有相关文章

✅ 保持原有的分类层级结构不变