基础设置

安装butterfly主题

参考资料：
Butterfly 安裝文檔(一) 快速開始
Hexo博客搭建基础教程(二)

1.从主题仓库克隆最新版本主题文件
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
或者
git clone -b master git@github.com:jerryc127/hexo-theme-butterfly.git

2.修改 Hexo 根目錄下的 _config.yml，把主題改為 butterfly

1
theme: butterfly

3.安装pug 以及 stylus 的渲染器

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

4.移动_config.butterfly.yml
在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 里面。

添加标签页、分类页、友情链接等

标签页

hexo new page tags，打开\source\tags\index.md，添加type: "tags"

1
2
3
4
5
---
title: tags
date: 2024-08-18 12:00:00
type: "tags"
---

分类页

做法与上述相同，hexo new page categories,添加type: "categories"

友情链接

如添加友情链接，打开\source，新建文件夹_data,创建一个文件link.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- class_name: 1.技术支持
  class_desc: 本网站的搭建由以下开源作者提供技术支持
  link_list: 
    - name: Hexo 
      link: https://hexo.io/zh-cn/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架
      siteshot: https://source.fomal.cc/siteshot/hexo.io.jpg
  
- class_name: 2.友情链接
  class_desc: 一些好朋友~~
  link_list:
    - name: Fomalhaut🥝
      link: https://fomal.cc/
      avatar: /assets/head.jpg
      descr: Future is now 🍭🍭🍭
      siteshot: https://source.fomal.cc/siteshot/www.fomal.cn.jpg

添加图库

hexo new page gallery,随后复制老博客内容

添加电影、音乐等其它页面

与上述操作相同。

添加说说页面

butterfly5.0新增功能。
hexo new page shuoshuo创建新页面，打开source/shuoshuo/index.md，添加type: "shuoshuo"
在_config.butterfly.yml中修改菜单相关内容：

1
2
3
menu:
  首页: / || fas fa-home
  说说: /shuoshuo/ || fa-blog

打开source/_data,创建文件shuoshuo.yml

1
2
3
4
5
6
7
8
- author: 黑心の南瓜🎃
  avatar: https://pic.imgdb.cn/item/66c605b4d9c307b7e9a53ea1.jpg
  date: 2024-07-07 09:00:00
  key: key-1
  tags: 
  content: |
    我是一条说说。
    ![我是配图](https://xxx.com/xxx.png)

公告栏

公告栏需要显示的内容过长不好编辑，可以通过添加“|”和div解决。

1
2
3
4
5
6
7
8
9
10
11
12
aside:
  card_announcement:
    enable: true
    content: |
      <div style="text-align: center;">
        --- 主域名 ---<br>
        <a href="https://www.blackpumpkin.cc.cd" title="主线路部署于Vercel">blackpumpkin.cc.cd</a><br>
        --- 备用域名 ---<br>
        <a href="https://blackpumpkin.netlify.app" title="此线路部署于Netlify">blackpumpkin.netlify.app</a><br>
        <a href="https://4everland.blackpumpkin.cc.cd" title="此线路部署于4EVERLAND">4everland.blackpumpkin.cc.cd</a><br>
        <a href="https://tencent.blackpumpkin.cc.cd" title="此线路部署于腾讯云">tencent.blackpumpkin.cc.cd</a><br>
      </div>

页脚

1
2
3
4
5
6
7
8
9
10
11
12
13
footer:
  custom_text: |
    <p>
      🚀 本站由 <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 驱动 ·
      🎨 主题 <a href="https://github.com/jerryc127/hexo-theme-butterfly" target="_blank" rel="noopener">Butterfly</a>
    </p>
    <p>
      📍 主站：<a href="https://blackpumpkin.cc.cd" target="_blank">blackpumpkin.cc.cd</a> ·
      🔄 备站：<a href="https://blackpumpkin.netlify.app" target="_blank">Netlify</a>
    </p>
    <p>
      <span id="busuanzi_value_site_pv">👀 总访问量：加载中...</span> 次
    </p>

_config.yml 和 _config.butterfly.yml 设置

参考基于 Hexo 从零开始搭建个人博客（五）
2024.11.10更新：butterfly版本更新至5.2.2，参考Butterfly 文档(三) 主题配置

博客魔改（重要）

生成文章唯一链接

参考基于 Hexo 从零开始搭建个人博客（六）

  1. 安装npm install hexo-abbrlink --save
    2.修改_config.yml内容
1
2
3
4
5
6
- permalink: :year/:month/:day/:title/
#上面一行删除，修改为
permalink: post/:abbrlink.html # post为自定义前缀
abbrlink:
  alg: crc32   #算法： crc16(default) and crc32
  rep: hex     #进制： dec(default) and hex

外挂标签（重要，涉及到文章的迁移）

参考Tag Plugins Plus
1.安装npm install hexo-butterfly-tag-plugins-plus --save
2.安装hexo-renderer-marked,卸载hexo-renderer-kramed(后者支持复杂的数学公式，mathjax的渲染方式)

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

3.在_config.yml中添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true # 开关
  priority: 5 #过滤器优先权
  issues: false #issues标签依赖注入开关
  link:
    placeholder: /img/link.png #link_card标签默认的图标图片
  CDN:
    anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
    issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
    iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
    tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

一图流

设置后图片不随鼠标滚动而变化，且每一页都是一张相同的图片
2024.11.10 butterfly更新至5.2.2版本，修改内容
1.source文件夹下新建一个文件夹css，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，在里面写入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

2.在_config.butterfly.yml添加

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

3.取消头图与页脚图的加载项避免冗余加载
在_config.butterfly.yml中修改

1
2
3
4
5
# The banner image of home page
index_img: #留空

# The background image of footer
footer_img: #留空

4.一图流改完了背景图也没了，那大概率是之前没设置背景图

1
2
3
# Website Background
# Can set it to color or image url
background: https://pic.imgdb.cn/item/66c19556d9c307b7e9a78550.jpg

每页单独背景

2026.07.21 butterfly更新至5.5.5版本，修改内容
1.修改\themes\butterfly\layout\includes\layout.pug

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
if theme.background
  if page.background
    - var pageBg = page.background.startsWith('#') || page.background.startsWith('url') || page.background.startsWith('linear-gradient') ? page.background : `url(${page.background})`
    #web_bg.bg-animation(style=`background: ${pageBg}; background-attachment: local; background-position: center; background-size: cover; background-repeat: no-repeat;`)
  else if !Array.isArray(theme.background)
    #web_bg.bg-animation(style=getBgPath(theme.background))
  else
    #web_bg.bg-animation
    - const bgStyleArr = theme.background.map(getBgPath)
    script.
      (() => {
        const arr = !{JSON.stringify(bgStyleArr)}
        const webBgDiv = document.getElementById('web_bg')

        const setRandomBg = () => {
          webBgDiv.style = arr[Math.floor(Math.random() * arr.length)]
          requestAnimationFrame(() => webBgDiv.classList.add('bg-animation'))
        }

        document.addEventListener('pjax:send', () => {
          webBgDiv.style = ''
          webBgDiv.classList.remove('bg-animation')
        })

        document.addEventListener('pjax:complete', setRandomBg)
        document.addEventListener('DOMContentLoaded', setRandomBg)
      })()

2.在每篇文章的front-matter里添加background

1
2
3
4
5
6
---
title: 
cover: 'xxx.png'
background: url(xxx.png)
description: 
---

3.修改\themes\butterfly\layout\includes\third-party\pjax.pug，添加'#web_bg'项

1
- let pjaxSelectors = ['head > title', '#config-diff', '#body-wrap', '#rightside-config-hide', '#rightside-config-show', '#web_bg', '.js-pjax']

页面样式调节（透明度）

通过css样式调节各个页面透明度、模糊度（亚克力效果）、圆角、边框样式等，看起来会更加舒适。
2026.07.05 butterfly更新至5.5.5版本，修改内容
添加以下内容至custom.css

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* 页面样式调节开始 */
:root {
  --trans-light: rgba(255, 255, 255, 0.75);
  --trans-dark: rgba(25, 25, 25, 0.6);
  --border-style: 1px solid rgb(169, 169, 169);
  --backdrop-filter: blur(5px) saturate(150%);
}

/* 首页文章卡片 */
#recent-posts .recent-post-item {
  background: var(--trans-light) !important;
  backdrop-filter: var(--backdrop-filter) !important;
  -webkit-backdrop-filter: var(--backdrop-filter) !important; /* 兼容 Safari */
  border-radius: 25px !important;
  border: var(--border-style) !important;
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light) !important;
  backdrop-filter: var(--backdrop-filter) !important;
  -webkit-backdrop-filter: var(--backdrop-filter) !important;
  border-radius: 18px !important;
  border: var(--border-style) !important;
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light) !important;
  backdrop-filter: var(--backdrop-filter) !important;
  -webkit-backdrop-filter: var(--backdrop-filter) !important;
  border: var(--border-style) !important;
  border-radius: 20px !important;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark) !important;
}

/* 阅读模式 */
.read-mode #aside-content .card-widget {
  background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
/* 页面样式调节结束 */

页脚遮罩

2026.07.05 butterfly更新至5.5.5版本，修改内容
添加css

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/* 页脚遮罩开始 */
.footer-other a {
  border-radius: 30px;
}

#footer {
  background: transparent !important; 
  padding-top: 20px; 
}

/* 取消宽度限制，实现全屏铺满 */
.footer-other {
  /* 维持你满意的白天深灰色半透明垫底 */
  background: rgba(30, 30, 30, 0.5) !important; 
  
  /* 毛玻璃特效 */
  backdrop-filter: var(--backdrop-filter) !important;
  -webkit-backdrop-filter: var(--backdrop-filter) !important; 
  
  /* 边框微调：因为要全屏铺满，所以去掉左右边框，只留一条顶部的分割线，和页首逻辑一致 */
  border-top: var(--border-style) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  
  /* 圆角微调：去掉圆角，让它成为一个标准的贯穿长方形 */
  border-radius: 0 !important; 
  
  /* 关键改动：宽度100%，去掉居中限制，撑满屏幕 */
  width: 100% !important;
  max-width: none !important; 
  margin: 0 !important;  
  
  padding: 30px 20px;
  text-align: center; 
  box-sizing: border-box; /* 确保 padding 不会撑裂屏幕宽度 */
}

/* 确保页脚文字清晰 */
.footer-other,
.footer-other a,
.footer-other span {
  color: #ffffff !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); 
}

/* 干掉官方伪元素干扰 */
#footer::before,
.footer-other::before {
  background: transparent !important;
  content: none !important;
}

/* 夜间模式适配：彻底去掉夜间模式的独立遮罩、毛玻璃与边框线条 */
[data-theme="dark"] .footer-other {
  background: transparent !important;       /* 去掉白天设置的 rgba(30, 30, 30, 0.5) 背景 */
  backdrop-filter: none !important;         /* 关闭毛玻璃效果，防止和全屏遮罩叠加导致太糊 */
  -webkit-backdrop-filter: none !important; 
  border-top: none !important;              /* 移除顶部的白天边框线 */
}
/* 页脚遮罩结束 */

文章置顶滚动栏(2026.8.13 已卸载并更换为新版)

参考Swiper Bar
1.安装npm install hexo-butterfly-swiper --save
2.添加以下内容至_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  timemode: date #date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  default_descr: 再怎么看我也不知道怎么描述它的啦！
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法

3.在需要置顶滚动的文章的front_matter内添加以下内容

1
2
3
---
swiper_index: 1  #置顶轮播图顺序，非负整数，数字越大越靠前
---

文章置顶滚动栏新版

参考如何使用hexo-butterfly-swiper-x
1.安装npm install hexo-butterfly-swiper-x --save
2.添加以下内容至_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# hexo-butterfly-swiper-x 配置
swiper:
  enable: true                    # 开启轮播图
  priority: 5                     # 优先级，数字越小越靠前
  enable_page: /                  # '/' 表示仅在首页显示
  timemode: date                  # 显示日期（date=创建日期）
  layout:
    type: id                      # 挂载容器类型（id 或 class）
    name: recent-posts            # 挂载到 id 为 recent-posts 的元素之前
    index: 0
  # ✨ 增强版特有：默认图（当文章没有封面时使用）
  default_img: https://cdn.jsdelivr.net/gh/你的用户名/图片仓库/default.jpg
  default_img_mode: false         # 设为 true 则强制所有文章都用默认图
  # CDN 链接
  swiper_css: "https://cdn.jsdelivr.net/npm/hexo-butterfly-swiper-x/lib/swiper.min.css"
  swiper_js: "https://cdn.jsdelivr.net/npm/hexo-butterfly-swiper-x/lib/swiper.min.js"
  custom_css: "https://cdn.jsdelivr.net/npm/hexo-butterfly-swiper-x/lib/swiperstyle.css"
  custom_js: "https://cdn.jsdelivr.net/npm/hexo-butterfly-swiper-x/lib/swiper_init.js"

3.在需要置顶滚动的文章的front_matter内添加以下内容

1
2
3
---
swiper_index: 1  #置顶轮播图顺序，非负整数，数字越大越靠前
---

页脚徽标(2024.11.10 已卸载)

参考Add Github Badge
1.安装npm install hexo-butterfly-footer-beautify --save
2.添加以下内容至_config.yml

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# footer_beautify
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
  enable:
    timer: true # 计时器开关
    bdage: true # 徽标开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude: #屏蔽页面
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: id
    name: footer-wrap
    index: 0
  # 计时器部分配置项
  runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js
  runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
  # 徽标部分配置项
  swiperpara: 3 #若非0，则开启轮播功能，每行徽标个数
  bdageitem:
    - link: https://hexo.io/ #徽标指向网站链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API
      message: 博客框架为Hexo_v5.4.0 #徽标提示语
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本Butterfly_v3.8.2
    - link: https://www.jsdelivr.com/
      shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
      message: 本站使用JsDelivr为静态资源提供CDN加速
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
      message: 本站采用双线部署，默认线路托管于Vercel
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
      message: 本站采用双线部署，联通线路托管于Coding
    - link: https://github.com/
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
      message: 本站项目由Github托管
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
      shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
      message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
  swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

3.徽标制作：shields.io

文章标题居中(2024.11.10 已取消)

2024.11.10 butterfly更新至5.2.2，主题设置文件中已添加相关功能。

旧版写法，已废弃

参考【hexo】关于butterfly主题的文章标题及其相关信息布局的修改位置
打开\themes\butterfly\source\css\_layout\head.styl，修改以下内容：

1
2
3
4
5
6
7
8
9
#post-info
  position: absolute
  // 修改bottom值
- bottom: 30px   
+ bottom: 100px   
  padding: 0 8%
  width: 100%
  // 添加下面一行使文章标题居中
+ text-align: center

文章评论（twikoo+MongoDB+netlify）

参考资料：
基于 Hexo 键入评论功能
Twikoo网站评论系统 快速上手

1.注册MongoDB Atlas账号
参见MongoDB Atlas，按照此教程内容，保存好MongoDB连接字符串。

2.在netlify上部署
参见Netlify 部署，完成后envId为https://xxx.netlify.app/.netlify/functions/twikoo，xxx为自己设置的三级域名。

3.修改_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Comments System
# --------------------------------------
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
  use:
    # - Disqus
    # - Valine
    - Twikoo # 选择Twikoo作为评论系统
  text: true # Display the comment name next to the button
  # 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: true
  count: true # Display comment count in post's top_img
  card_post_count: true # Display comment count in Home Page

twikoo:
  envId: https://xxx.netlify.app/.netlify/functions/twikoo   #此处填写获得的环境ID
  region:
  visitor: true  #显示文章阅读数
  option:

文章显示数学公式

参考资料：Math 數學
1.修改_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
math:
  # Choose: mathjax, katex
  # Leave it empty if you don't need math
  use: mathjax
  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

2.卸载hexo自带的markdown渲染器，安装hexo-renderer-kramed

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

3.添加以下内容至_config.yml

1
2
3
4
5
6
7
8
kramed:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

给博客添加RSS订阅

参考资料：
Hexo butterfly主题添加RSS插件
hexo-generator-feed

1.安装npm install hexo-generator-feed --save
2.添加以下内容至_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
feed:
  enable: true #是否启用插件
  type: atom #有atom和rss2两个选项，使用默认atom就好了
  path: atom.xml #也用默认配置atom.xml就行
  limit: 20 #展示文章的数量,使用 0 或 false 代表展示全部
  hub: #这个我没用上，根据官网，空着就行
  content: #默认是false，true的话会在rss文件中包含整个文章内容
  content_limit: 140 #摘要长度
  content_limit_delim: ' ' #没看明白官方的意思，就跟着默认不填了
  order_by: -date #采用日期进行排序
  icon: icon.png #给rss链接配置icon
  autodiscovery: true #自动发现提要
  template: #给rss文章配置模板

3.添加以下内容至_config.butterfly.yml

1
2
3
4
5
6
7
8
#找到 social settings 项，添加以下内容
social:
  # fab fa-github: https://github.com/xxxxx || Github || '#24292e'
  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email || '#4a7dbe'
  fa-solid fa-rss: https://www.blackpumpkin.site/atom.xml || RSS

#以下为新增内容
rss: /atom.xml

头像呼吸灯

参考资料：博客魔改教程总结(四)
在/source/css/custom.css内添加以下内容：

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
28
29
/* 头像呼吸灯 */
[data-theme="light"] .avatar-img {
  animation: huxi_light 4s ease-in-out infinite;
}
[data-theme="dark"] .avatar-img {
  animation: huxi_dark 4s ease-in-out infinite;
}
@keyframes huxi_light {
  0% {
    box-shadow: 0px 0px 1px 1px #e9f5fa;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #e9f5fa;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #e9f5fa;
  }
}
@keyframes huxi_dark {
  0% {
    box-shadow: 0px 0px 1px 1px #39c5bb;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #39c5bb;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #39c5bb;
  }
}

添加搜索功能（Algolia）

参考资料：
基于 Hexo 键入搜索功能
Butterfly 文檔(三) 主題配置
1.安装npm install hexo-algoliasearch --save
2.添加以下内容至_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
algolia:
  appId: "your applicationID"
  apiKey: "your Search-Only API Key"
  adminApiKey: "your Admin API Key"
  chunkSize: 5000
  indexName: "your indexName"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title


【applicationID】填入图中位置的 Applicaiton ID，【apiKey】填入图中位置的 Search-Only API Key，【Admin API Key】填入图中位置的 Admin API Key，【indexName】填入前面创建的索引名称。
3.修改_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
search:
  # Choose: algolia_search / local_search / docsearch
  # leave it empty if you don't need search
  use: algolia_search
  placeholder:

  # Algolia Search
  algolia_search:
    # Number of search results per page
    hitsPerPage: 6

4.执行hexo algolia;hexo cl;hexo g;hexo d

搜索引擎收录

参考资料：【hexo】hexo 提交到搜索引擎收录

添加全局吸底APlayer

参考Butterfly添加全局吸底Aplayer教程
1.安装npm i hexo-tag-aplayer --save
2.在_config.yml中添加以下内容：

1
2
3
4
# APlayer音乐插件
aplayer: 
  meting: true
  asset_inject: false

3.修改_config.butterfly.yml

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

4.插入Aplayer html,在_config.butterfly.yml-inject-bottom中添加

1
2
3
4
inject:
  head:
  bottom:
  - <div class="aplayer no-destroy" data-id="497232737" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-lrctype="1" data-preload="none" data-autoplay="false" muted> </div> #全局吸底Aplayer

5.调整UI（可不做）
修改_config.butterfly.yml,在inject-head中添加

1
2
3
4
5
6
7
inject:
    head:
    #向上调整
    - '<style type="text/css">#toggle-sidebar {bottom: 80px}</style>'
    #向右调整
    - '<style type="text/css">#toggle-sidebar {left:100px}</style>'
    #上述效果二选一

APlayer美化+适配黑夜模式

参考hexo 博客 butterfly 主题 aplyer 音乐播放器美化与深色模式
在/source/css/custom.css内添加以下内容：

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/*aplayer日间模式调整*/
  /*背景色*/
.aplayer{
	background: rgba(255, 255, 255, 0.60)!important;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07),0 1px 5px 0 rgba(0,0,0,.1);
	position: relative;
}
.aplayer.aplayer-fixed .aplayer-lrc:after,.aplayer.aplayer-fixed .aplayer-lrc:before {
	display: none
}
.aplayer.aplayer.aplayer-fixed .aplayer-body{
	background:rgba(255, 255, 255, 0.60)!important;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
	position: fixed;
}
  /*毛玻璃效果*/
.aplayer-list{
	backdrop-filter: blur(3px);
}
.aplayer-info{
	backdrop-filter: blur(3px);
}
  /*滚动条*/
.aplayer .aplayer-list ol::-webkit-scrollbar {
	width: 5px
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background-color: #b0e1ff
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
	background-color: #b0e1ff
}
  /*圆角*/
.aplayer.aplayer-fixed .aplayer-list{
    border-radius: 6px 6px 0 0!important;
}
.aplayer.aplayer-fixed .aplayer-miniswitcher{
    border-radius: 0 6px 6px 0!important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{
    transition: 0.28s!important;
    border-radius: 6px!important;
}
  /*选中与播放中歌曲激活颜色*/
.aplayer .aplayer-list ol li:hover{
    background: #b0e1ff!important;
}
.aplayer .aplayer-list ol li.aplayer-list-light{
    background: #ffdffa!important;
}

/*aplayer黑暗模式*/
[data-theme=dark]
.aplayer{
    background: rgba(22, 22, 22, 0.60)!important;
    color: rgb(255, 255, 255);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
}
[data-theme=dark]
.aplayer.aplayer-fixed .aplayer-body{
    background: rgba(22, 22, 22, 0.60)!important;
    color: rgb(255, 255, 255);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
}
[data-theme=dark]
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{
	fill: #d4d4d4;
}
[data-theme=dark]
.aplayer .aplayer-list ol li:hover{
    background: #407290!important;
}
[data-theme=dark]
.aplayer .aplayer-list ol li.aplayer-list-light{
    background: #9c8098!important;
}
[data-theme=dark]
.aplayer .aplayer-info .aplayer-controller .aplayer-time{
    color: #d4d4d4;
}
[data-theme=dark]
.aplayer .aplayer-list ol li .aplayer-list-index{
    color: #d4d4d4;
}
[data-theme=dark]
.aplayer .aplayer-list ol li .aplayer-list-author{
    color: #d4d4d4;
}

博客宽屏适配

参考博客魔改教程总结(四)
在/source/css/custom.css内添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 博客宽屏适配 */
.layout {
  max-width: 1400px;
}

/* 侧边卡片栏宽度 */
.aside-content {
  max-width: 318px;
  min-width: 300px;
}

/* 平板尺寸自适应(不启用侧边栏宽度限制) */
@media screen and (max-width: 900px) {
  .aside-content {
    max-width: none !important;
    padding: 0 5px 0 5px;
  }
}
/* 博客宽屏适配结束 */

右下角添加sakana弹簧(2026.07.21已取消)

1.新建sakana-init.js

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
28
29
30
function loadSakanaWidget() {
    // 1. 如果页面上不存在挂件容器，则重新创建
    if (!document.getElementById('sakana-widget')) {
      const sakanaDiv = document.createElement('div');
      sakanaDiv.id = 'sakana-widget';
      sakanaDiv.style.cssText = 'position: fixed; bottom: 10px; right: 10px; z-index: 999;';
      document.body.appendChild(sakanaDiv);
    }
  
    // 2. 如果 Sakana 库已加载，直接挂载；否则按需动态加载 CDN
    if (window.SakanaWidget) {
      // 防止重复挂载，确保节点干净
      document.getElementById('sakana-widget').innerHTML = '';
      new SakanaWidget().mount('#sakana-widget');
    } else {
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/sakana-widget@2.2.1/lib/sakana.min.js';
      script.async = true;
      script.onload = () => {
        new SakanaWidget().mount('#sakana-widget');
      };
      document.head.appendChild(script);
    }
  }
  
  // 页面首次加载完成后执行
  document.addEventListener('DOMContentLoaded', loadSakanaWidget);
  
  // 监听 PJAX 跳转完成事件，保证切换页面后挂件依旧正常
  document.addEventListener('pjax:complete', loadSakanaWidget);

2.引入js

1
2
3
inject:
  bottom:
    - <script src="/js/sakana-init.js"></script>  #右下角添加sakana弹簧

主页樱花特效(2026.07.21已取消)

1.新建sakura.js

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
// 樱花飘落 
(function () {
    // 判断是否为主页（匹配 "/" 或 "/index.html"）
    var path = window.location.pathname;
    if (path !== '/' && path !== '/index.html') {
        return; // 不是首页直接退出，不渲染樱花
    }

    // 樱花飘落
    var sakuraCount = 30; // 樱花数量，可自行微调
    var sakuraArray = [];

    function Sakura(x, y, s, r, fn) {
        this.x = x;
        this.y = y;
        this.s = s;
        this.r = r;
        this.fn = fn;
    }

    Sakura.prototype.draw = function (c) {
        c.save();
        var xc = 40 * this.s / 4;
        c.translate(this.x, this.y);
        c.rotate(this.r);
        c.beginPath();
        c.moveTo(0, 0);
        c.bezierCurveTo(xc, -xc, xc * 2, xc, 0, xc * 2);
        c.bezierCurveTo(-xc, xc, -xc, -xc, 0, 0);
        c.fillStyle = "#FFC0CB"; // 樱花颜色（粉色）
        c.fill();
        c.restore();
    };

    Sakura.prototype.update = function () {
        this.x += this.fn.x;
        this.y += this.fn.y;
        this.r += this.fn.r;
        if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight) {
            this.x = Math.random() * window.innerWidth;
            this.y = -10;
            this.r = Math.random() * 360;
        }
    };

    function startSakura() {
        var canvas = document.createElement("canvas");
        canvas.id = "sakura";
        canvas.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:9999;";
        document.body.appendChild(canvas);
  
        var ctx = canvas.getContext("2d");
        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener("resize", resize);
        resize();

        for (var i = 0; i < sakuraCount; i++) {
            sakuraArray.push(new Sakura(
                Math.random() * canvas.width,
                Math.random() * canvas.height,
                Math.random() + 0.5,
                Math.random() * 360,
                { x: Math.random() - 0.5, y: Math.random() + 1, r: Math.random() * 0.02 }
            ));
        }

        function render() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            sakuraArray.forEach(function (s) {
                s.update();
                s.draw(ctx);
            });
            requestAnimationFrame(render);
        }
        render();
    }

    if (document.readyState === "complete") {
        startSakura();
    } else {
        window.addEventListener("DOMContentLoaded", startSakura);
    }
})();

// 如果开启了 PJAX，页面切换时清除樱花
document.addEventListener('pjax:send', function () {
    var canvas = document.getElementById('sakura');
    if (canvas) {
        canvas.remove();
    }
});

2.引入js（略）