一、Front-matter

Front-matter 是 markdown 文件最上方以 — 分隔的区域，用于指定个别档案的变数。

  • Page Front-matter 用于 页面 配置
  • Post Front-matter 用于 文章页 配置

1.1 Page Front-matter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title: {{ title }}
date: {{ date }}
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
random:
limit:
  type:
  value:
---

1.2 Post Front-matter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
abcjs:
noticeOutdate:
---

二、菜单栏

2.1 标签页

需同步主题配置 /_config.butterfly.yml 的 menu 配置才能生效。

1
hexo new page tags
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
title: 标签
limit:
  type: null
  value: null
date: 2026-05-04 16:46:47
updated:
type: 'tags'
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
orderby: random
order: 1
random:
1
_config.butterfly.yml
1
2
3
menu:
  ## 2026-0504 添加标签页
  标签: /tags/ || fas fa-tags

2.2 分类页

同理，需同步主题配置 /_config.butterfly.yml 的 menu 配置才能生效。

1
hexo new page categories
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
title: 分类
limit:
  type: null
  value: null
date: 2026-05-04 16:58:36
updated:
type: 'categories'
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
random:

2.3 友情链接

2.3.1 创建页面

1
hexo new page link
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
title: 友链
limit:
  type: null
  value: null
date: 2026-05-04 17:00:52
updated:
type: 'link'
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
random:

2.3.2 数据来源

本地生成

  1. 在 Hexo 根目录中的 source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件 link.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-cn/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

2.4 404 页面

主题配置中开启即可

1
2
3
4
error_404:
  ## enable: false
  ## 2026-0504 开启404页面
  enable: true

三、主题配置

  1. 修改 Hexo 的配置文件 _config.yml
1
2
3
## 2026-0504修改语言配置
## language: en
language: zh-CN
  1. 网站资料 _config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Site
## 2026-0504 修改站点配置
title: 一世贪欢的私域
subtitle: '浅空碎碎念'
description: '记录云原生技术探索、自动化运维实践，以及折腾开源项目的日常碎碎念。'
keywords: 浅空, 博客, 云原生, 运维, Kubernetes, K8s, Docker, 自动化, 开源折腾
author: qian kong
## 2026-0504修改语言配置
## language: en
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
## 2026-0504 修改站点配置
url: http://www.bravexist.cn
  1. 导航参数，_config.butterfly.yml
1
2
3
4
5
6
7
8
## 2026-0504 配置导航设置
nav:
  # Navigation bar logo image
  logo: https://img.bravexist.cn/avatar/Logo.png
  display_title: true
  display_post_title: true
  # Whether to fix navigation bar
  fixed: false
  1. 配置目录
1
2
3
4
5
6
7
8
menu:
  # Home: / || fas fa-home
  ## 2026-0504 添加标签页
  ## 图标网站，https://fontawesome.com/search
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-layer-group
  友链: /link/ || fas fa-link
  瞬间: https://moments.bravexist.cn/ || fas fa-leaf
  1. 代码块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
## 2026-0504 修改代码块配置
code_blocks:
  # Code block theme: darker / pale night / light / ocean / false
  theme: light
  macStyle: false
  # Code block height limit (unit: px)
  # height_limit: false
  height_limit: 300
  word_wrap: false

  # Toolbar
  copy: true
  language: true
  # true: shrink the code blocks | false: expand the code blocks | none: expand code blocks and hide the button
  shrink: false
  ## fullpage: false
  fullpage: true
  1. 社交媒体
1
2
3
4
5
6
## 2026-0504 添加社交媒体
social:
  # fab fa-github: https://github.com/xxxxx || Github || '#24292e'
  fab fa-github: https://github.com/lightsky9627 || Github || '#24292e'
  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email || '#4a7dbe'
  fas fa-envelope: mailto:qiaoxiong9626@gmail.com || Email || '#4a7dbe'
  1. 修改头像
1
2
3
4
5
6
7
8
## 2026-0504 修改头像
# favicon: /img/favicon.png
favicon: https://img.bravexist.cn/avatar/favicon.ico

avatar:
  # img: /img/butterfly-icon.png
  img: https://img.bravexist.cn/2026/05/6e64b686f34d0e367656c1bfa35dc3e8.jpg
  effect: false
  1. 配置首页图片
1
2
## 2026-0504 配置首页图片
index_img: https://img.bravexist.cn/2026/05/d5c01a5bc050bc7da363e1df4ee7807c.jpg
  1. 设置背景图
1
2
3
## 2026-0504 配置首页图片
## background:
background: https://img.bravexist.cn/2026/05/907a4607ead108fffbaee10a601fc43f.png
  1. 添加子标题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
## 2026-0504 添加子标题，打字机效果。
subtitle:
  # enable: false
  enable: true
  # Typewriter Effect
  effect: true
  # Customize typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # Source - Call the third-party service API (Chinese only)
  # It will show the source first, then show the content of sub
  # Choose: false/1/2/3
  # false - disable the function
  # 1 - hitokoto.cn
  # 2 - https://api.aa1.cn/doc/yiyan.html
  # 3 - jinrishici.com
  source: false
  # If you close the typewriter effect, the subtitle will only show the first line of sub
  sub:
    - Anything is Nothing !
    - 境随心转。
    - 外力的压迫永远战胜不了内心的渴求。
    - 没有打不到的敌人，没有闯不过的难关。
    - 当你经过七重的孤独，才能够成为真正的强者。
    - 天堂和地狱没有我选择的权利，只有我被选择的命运。
    - Never put off till tomorrow what you can do today
    - 人的欲望，就如同高山滚石一般，一旦开始，就再也停不下来了。
  1. 隐藏章节数
1
2
3
4
5
6
toc:
  post: true
  page: false
  ## 隐藏章节数
  ## number: true
  number: false
  1. 显示编辑文章的按钮
1
2
3
4
5
6
7
## 2026-0504 显示编辑文章的按钮
post_edit:
  ## enable: false
  enable: true
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url: https://github.com/lightsky9627/www.bravexist.cn/edit/main/source/
  1. 禁用侧边栏公告
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
## 2026-0504 禁用侧边栏公告
aside:
  enable: true
  hide: false
  # Show the button to hide the aside in bottom right button
  button: true
  mobile: true
  # Position: left / right
  position: right
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/lightsky9627
  card_announcement:
    enable: false
    ## enable: true
    content: This is my Blog
  1. 开启标签颜色
1
2
3
4
5
6
7
card_tags:
  enable: true
  # If set 0 will show all
  limit: 40
  ## 开启标签颜色
  ## color: false
  color: true
  1. 开启滚动条百分比
1
2
3
## 2026-0504 开启滚动条百分比
# rightside_scroll_percent: false
rightside_scroll_percent: true
  1. 开启图片描述
1
2
3
## 2026-0504 开启图片描述
# photofigcaption: false
photofigcaption: ture
  1. 添加字数统计
1
pnpm install hexo-wordcount --save
1
2
3
4
5
6
7
8
9
10
## 2026-0504 开启字数统计
wordcount:
  # enable: false
  enable: true
  # Display the word count of the article in post meta
  post_wordcount: true
  # Display the time to read the article in post meta
  min2read: true
  # Display the total word count of the website in aside's webinfo
  total_wordcount: true
  1. 添加数学公式支持
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
## 2026-0504 开启数学公式支持
math:
  # Choose: mathjax, katex
  # Leave it empty if you don't need math
  use: katex
  per_page: true
  hide_scrollbar: false

  mathjax:
    # Enable the contextual menu
    enableMenu: true
    # Choose: all / ams / none, This controls whether equations are numbered and how
    tags: none

  katex:
    # Enable the copy KaTeX formula
    ## copy_tex: false
    copy_tex: true

​ 卸载 marked 插件

1
2
3
4
5
pnpm un hexo-renderer-marked --save # 如果有安装这个的话，卸载
pnpm un hexo-renderer-kramed --save # 如果有安装这个的话，卸载

pnpm i hexo-renderer-markdown-it --save # 需要安装这个渲染插件
pnpm install katex @renbaoshuo/markdown-it-katex #需要安装这个katex插件

​ 在 hexo 的根目录的 _config.yml 中配置（追加配置）

1
2
3
markdown:
  plugins:
    - '@renbaoshuo/markdown-it-katex'
  1. 设置评论区，提前准备 waline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
## 2026-0504 开启 Waline 评论区
comments:
  # Up to two comments system, the first will be shown as default
  # Leave it empty if you don't need comments
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  # Format of two comments system : Disqus,Waline
  use: Waline
  # Display the comment name next to the button
  text: true
  # Lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  # Display comment count in post's top_img
  ## 在文章顶部显示评论数
  ## count: false
  count: true
  # Display comment count in Home Page
  # 在首页文章卡片显示评论数
  ## card_post_count: false
  card_post_count: true
1
2
3
4
5
6
7
8
9
## 2026-0504 开启 Waline 评论区
waline:
  serverURL: https://waline.bravexist.cn
  bg:
  # Use Waline pageview count as the page view count
  ## 显示文章阅读数
  # pageview: false
  pageview: true
  option:
  1. 添加 Google 分析
1
2
3
4
5
6
# https://analytics.google.com/analytics/web/
# 不要开，否则一直加载不了。就会卡。
## google_analytics: G-WLQLLMB07B

# https://www.cloudflare.com/zh-tw/web-analytics/
cloudflare_analytics: 8a7eb89a66aa4f41b9f0ec101b0a45c0
  1. 开启大图模式
1
2
3
## 20260504 大图模式
# lightbox:
lightbox: fancybox
  1. Mermaid
1
2
3
4
5
6
7
8
## 20260504 开启Mermaid
mermaid:
  # enable: false
  enable: true
  # Write Mermaid diagrams using code blocks
  # code_write: false
  code_write: true
  # built-in themes: default / forest / dark / neutral

​ 需要同步修改 hexo 的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
  ## 20260504 开启Mermaid
  exclude_languages: ['mermaid']
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''
  ## 20260504 开启Mermaid
  exclude_languages: ['mermaid']
  1. 开启复制弹窗
1
2
3
4
5
6
7
8
snackbar:
  ## 2026-0504 开启复制弹窗
  ## enable: false
  enable: true
  position: bottom-left
  # The background color of Toast Notification in light mode and dark mode
  bg_light: '#49b1f5'
  bg_dark: '#1f1f1f'

四、插件

可以把链接 permalink 转为数字的插件，配置容易，生成时自动转为数字。

1
pnpm install hexo-abbrlink --save

修改根配置文件，_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
## 2026-0504 修改站点配置
url: http://www.bravexist.cn
##  permalink: :year/:month/:day/:title/
permalink: posts/:abbrlink.html
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

abbrlink:
  alg: crc32 #算法选项：crc16丨crc32
  rep: hex #输出进制：dec为十进制，hex为十六进制

4.2 hexo-generator-feed

添加 RSS 功能

1
pnpm add hexo-generator-feed

打开 Hexo 根目录下的 _config.yml，在最底部添加以下配置：

1
2
3
4
5
6
7
8
9
10
11
# RSS 订阅配置 (hexo-generator-feed)
# 2026-0504
feed:
  type: atom          # 推荐使用 atom 格式，比老式的 rss2 规范更好
  path: atom.xml      # 生成的文件名，以后你的订阅地址就是 域名/atom.xml
  limit: 20           # 订阅源里最多展示最近的几篇文章 (0 代表展示所有)
  hub:
  content: true       # 是否在 RSS 中包含文章正文内容
  content_limit: 140  # 摘要截断长度 (如果 content 设为 false，这里生效)
  content_limit_delim: ' '
  order_by: -date     # 按照日期倒序排列

打开 Butterfly 主题的配置文件 _config.butterfly.yml，搜索 rss: 配置项，把它修改为刚才配置的路径：

1
2
3
4
5
6
7
8
9
10
11
12
menu:
  # Home: / || fas fa-home
  ## 2026-0504 添加标签页
  ## 图标网站，https://fontawesome.com/search
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-layer-group
  友链: /link/ || fas fa-link
  瞬间: https://moments.bravexist.cn/ || fas fa-leaf
  RSS: /atom.xml || fas fa-square-rss

## 追加
rss: /atom.xml