Butterfly 主题美化与自定义配置指南

Butterfly 是 Hexo 生态中最受欢迎的主题之一，功能强大且高度可定制。本文汇总了常用的美化配置，帮助你打造独一无二的博客。

一、基础外观配置

1.1 导航栏美化

在 _config.butterfly.yml 中配置导航栏：

1
2
3
4
5
6
7
8
# 导航栏设置
nav:
  display_title: true       # 是否显示标题
  hide_on_scroll: true      # 滚动时是否隐藏
  auto_hide_showbutton:
    enable: false
    button: 早安
    button_anymore: 好梦

1.2 头像与站点图标

1
2
3
4
5
6
7
8
9
10
# 头像
avatar:
  img: /img/neko01.png
  effect: false             # 头像旋转特效

# 网站图标
favicon: /img/favicon.ico

# 主页大图
index_img: /img/background.jpg

1.3 页面背景

1
2
3
4
5
6
7
8
9
10
11
# 不同页面的顶部图片
default_top_img: /img/background.jpg
archive_img: /img/background.jpg
tag_img: /img/background.jpg
category_img: /img/background.jpg

# 404 页面
error_404:
  enable: true
  subtitle: '页面没有找到'
  background: /img/404.jpg

二、主题配色方案

2.1 暗色模式

Butterfly 支持一键切换暗色模式：

1
2
3
4
5
6
# 暗色模式
darkmode:
  enable: true
  button: true              # 显示切换按钮
  autoChangeMode: false     # 跟随系统自动切换
  start: false              # 默认开启暗色模式

2.2 自定义配色

通过注入自定义 CSS 来修改主题配色：

1
2
3
4
inject:
  head:
  bottom:
    - <link rel="stylesheet" href="/css/custom.css">

在 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
/* 主题色 */
:root {
  --theme-color: #49b1f5;
}

/* 链接悬停色 */
a:hover {
  color: #ff7242;
}

/* 卡片圆角 */
.card-widget,
.recent-post-item {
  border-radius: 12px;
  overflow: hidden;
}

/* 代码块圆角 */
#article-container figure.highlight {
  border-radius: 8px;
}

三、特效配置

3.1 背景特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Canvas 星空特效（推荐）
canvas_nest:
  enable: true
  color: '0,0,255'
  opacity: 0.7
  zIndex: -1
  count: 99
  mobile: false

# 动态彩带
canvas_fluttering_ribbon:
  enable: false
  mobile: false

# 静止彩带
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1

3.2 鼠标点击特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 点击显示文字
ClickShowText:
  enable: true
  text:
    - 富强
    - 民主
    - 文明
    - 和谐
  fontSize: 15px
  random: true
  mobile: false

# 点击爱心
click_heart:
  enable: false
  mobile: false

3.3 打字特效

1
2
3
4
5
6
# 打字粒子特效
activate_power_mode:
  enable: true
  colorful: true
  shake: true
  mobile: false

四、文章页美化

4.1 封面图

1
2
3
4
5
cover:
  index_enable: true
  aside_enable: true
  archives_enable: true
  position: both

4.2 代码块

1
2
3
4
5
highlight_theme: mac         # 代码高亮主题
highlight_copy: true          # 复制按钮
highlight_lang: true          # 显示语言
highlight_shrink: false       # 代码块默认展开
code_word_wrap: true          # 自动换行

4.3 文章版权

1
2
3
4
5
post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

4.4 相关文章

1
2
3
4
related_post:
  enable: true
  limit: 6
  date_type: created

五、社交与分享

5.1 社交图标

1
2
3
4
social:
  fab fa-github: https://github.com/ || Github
  fas fa-envelope: mailto:your@email.com || Email
  fab fa-qq: tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=your_qq || QQ

5.2 文章分享

1
2
3
sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq

六、SEO 优化

1
2
3
4
5
6
7
8
9
10
# 百度收录
baidu_push: true

# Google 收录
google_site_verification: ''

# 站点地图
sitemap:
  enable: true
  path: sitemap.xml

七、性能优化

7.1 懒加载

1
2
3
4
5
lazyload:
  enable: true
  field: site
  placeholder: /img/loading.gif
  blur: true

7.2 Pjax 无刷新加载

1
2
3
4
5
pjax:
  enable: true
  exclude:
    - /music/
    - /movies/

7.3 图片灯箱

1
2
fancybox: true
medium_zoom: false

总结

Butterfly 主题的可配置项非常丰富，本文只涵盖了最常用的部分。更多配置可以参考官方文档。

记住一个原则：少即是多。不要一次性开启所有特效，选择最适合你博客风格的配置即可。

持续更新中，欢迎收藏关注