t太久没有用hexo上传我的文章了,这次一口气从语雀搬运了很多文章到博客里面来,苦于分类和标签归档,了解了一下hexo在这方面的便捷方法

除了 tags 和 categories，Hexo + Butterfly 主题还有很多实用的 Front-matter 配置项（就是文章开头 --- 之间的内容），这些配置能帮你自定义文章的展示效果、功能开关，甚至优化阅读体验。

一、常用

这些是最基础也最常用的配置，比分类/标签更影响文章展示：

1. 文章封面图（Butterfly 核心特色）

给文章加封面图，列表页/详情页都会显示，视觉效果更好：

1
2
3
4
5
6
7
8
9
---
title: Qt MQTT 实战教程
cover: /img/qt_mqtt_cover.png  # 图片路径（public/img 下的文件直接写 /img/xxx.png）
# 进阶：封面图显示规则（可选）
cover_alt: Qt MQTT 封面图  # 图片加载失败时显示的文字
cover_width: 1000px        # 封面图宽度
cover_height: 500px       # 封面图高度
cover_radius: 10px        # 封面图圆角（Butterfly 支持）
---

2. 文章目录

Butterfly 支持自动生成文章目录（基于标题层级 ##/###），可自定义开关和位置：

1
2
3
4
5
6
---
title: Qt MQTT 实战教程
toc: true  # 开启目录（默认开启，设为 false 关闭）
toc_number: true  # 目录是否显示序号（比如 1.1、2.2）
toc_style_simple: true  # 简约风格目录（可选）
---

✅ 效果：目录会显示在文章右侧（PC端）/ 顶部（移动端），点击可跳转到对应标题位置。

3. 文章摘要/截断（列表页不显示全文）

默认情况下，Hexo 列表页会显示文章全文，加这个配置可以只显示摘要，提升加载速度：

1
2
3
4
5
6
---
title: Qt MQTT 实战教程
# 写法1：手动指定摘要（推荐）
description: 本文讲解 Qt 对接 MQTT 协议的实战步骤，包括环境配置、代码编写、问题排查。
# 写法2：自动截断（在文章中加 <!-- more --> 标记，标记前的内容为摘要）
---

⚠️ 注意：<!-- more --> 要写在文章正文里（不是 Front-matter），比如：

1
2
3
4
5
## 前言
本文讲解 Qt MQTT 的使用方法。
<!-- more -->
## 一、环境配置
这里是正文内容，列表页不会显示...

4. 文章置顶/推荐

让重要文章显示在博客列表页顶部：

1
2
3
4
5
---
title: Qt MQTT 实战教程
sticky: 100  # 数字越大，置顶优先级越高（比如其他置顶文章设 90，这篇就排前面）
top_img: /img/top_bg.png  # 置顶文章的顶部横幅图（可选）
---

5. 禁用评论/阅读量

如果某篇文章不想显示评论区或阅读量统计（比如笔记类），可以关闭：

1
2
3
4
5
---
title: 私人笔记
comments: false  # 关闭评论区（Butterfly 集成的 Valine/Giscus 等评论插件都会失效）
views: false     # 关闭阅读量统计（比如不蒜子、LeanCloud 统计）
---

二、进阶

这些配置能优化阅读体验或适配特殊需求：

1. 数学公式支持（写技术/学术文章必备）

Butterfly 内置 MathJax/KaTeX 支持，开启后可写 LaTeX 公式：

1
2
3
4
5
6
---
title: 算法笔记：线性代数
math: true  # 开启数学公式支持（默认关闭）
mathjax: true  # 用 MathJax 渲染（二选一）
# katex: true   # 用 KaTeX 渲染（更轻量，推荐）
---

✅ 用法：在文章中写 $E=mc^2$（行内公式）或 $$\sum_{i=1}^n i = \frac{n(n+1)}{2}$$（块级公式）。

2. 代码块优化

自定义代码块的展示效果，比如显示行号、复制按钮、语言标识：

1
2
3
4
5
6
---
title: Qt 代码实战
highlight_shrink: false  # 代码块是否默认折叠（true=折叠，false=展开）
highlight_copy: true     # 显示代码复制按钮（Butterfly 默认开启）
highlight_lang: true     # 显示代码语言标识（比如 Python/Qt）
---

3. 文章版权声明

Butterfly 会自动生成版权声明，可自定义内容：

1
2
3
4
5
6
7
8
---
title: Qt MQTT 实战教程
copyright: true  # 开启版权声明（默认开启）
copyright_author: Chellin  # 作者名
copyright_author_href: https://你的博客地址  # 作者链接
copyright_url: https://你的博客地址/qt-mqtt.html  # 文章链接
copyright_info: 本文为原创文章，转载请注明出处～  # 自定义版权文字
---

4. 自定义文章样式

给单篇文章加自定义 CSS，比如改字体、背景：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 个性化文章
style: |
  /* 自定义 CSS 代码 */
  .post-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
  }
  h2 {
    border-left: 4px solid #0078e7;
    padding-left: 10px;
  }
---

三、小众特殊场景

这些用得少，但遇到需求时能解决大问题：

1. 隐藏文章

想写草稿/私密文章，不希望别人看到，只自己能通过链接访问：

1
2
3
4
5
6
---
title: 私密笔记
published: false  # 设为 false 后，文章不会生成到列表页，仅本地/链接可访问
# 或用 hidden（完全隐藏，不会生成页面）
hidden: true
---

2. 自定义文章链接

默认文章链接是 标题拼音.html，可自定义更简洁的 URL：

1
2
3
4
---
title: Qt MQTT 实战教程
permalink: /qt/mqtt.html  # 自定义链接，访问时用 博客地址/qt/mqtt.html
---

3. 移动端适配（图片/排版）

针对移动端优化图片显示，避免图片溢出：

1
2
3
4
5
---
title: 多图片文章
img_width: 100%  # 文章内所有图片宽度自适应
img_align: center  # 图片居中显示（left/right/center）
---

4. 音乐/视频嵌入

Butterfly 支持一键嵌入网易云音乐/B站视频，不用写复杂代码：

1
2
3
4
5
6
7
8
9
10
11
12
---
title: 我的收藏
# 网易云音乐（单曲/歌单）
music:
  id: 123456  # 音乐ID（网易云音乐链接里的数字）
  type: song  # song/playlist/album
# B站视频
bilibili:
  aid: 123456  # 视频AV号
  bvid: BV1xx411c7m9  # 视频BV号（二选一）
  page: 1  # 分P数（可选）
---

总结

  1. 核心必用：cover（封面）、toc（目录）、description/<!-- more -->（摘要）、sticky（置顶）是提升博客体验的关键；
  2. 进阶优化：math（公式）、copyright（版权）、style（自定义样式）适配技术/原创文章；
  3. 小众场景：published/hidden（隐藏文章）、permalink（自定义链接）解决特殊需求。

这些配置都写在文章开头的 --- 之间，和 tags/categories 同级