Butterfly 主题配置详解（上）

本文详细说明 Butterfly 主题的各项配置选项。所有配置都在 _config.butterfly.yml 文件中进行。

导航栏设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav:
  # 导航栏 Logo 图片
  logo:
  # 是否显示网站标题
  display_title: true
  # 滚动时是否显示文章标题
  display_post_title: true
  # 是否固定导航栏
  fixed: false

menu:
  # 首页: / || fas fa-home
  # 列表||fas fa-list:
  #   音乐: /music/ || fas fa-music
  #   电影: /movies/ || fas fa-video

代码块设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
code_blocks:
  # 代码块主题: darker / pale night / light / ocean / false
  theme: light
  # 是否使用 Mac 风格
  macStyle: false
  # 代码块高度限制（单位: px）
  height_limit: false
  # 是否自动换行
  word_wrap: false

  # 工具栏
  # 是否显示复制按钮
  copy: true
  # 是否显示语言标签
  language: true
  # true: 收缩代码块 | false: 展开代码块 | none: 展开代码块并隐藏按钮
  shrink: false
  # 是否显示全屏显示代码块按钮
  fullpage: false

社交媒体链接

1
2
3
social:
  # fab fa-github: https://github.com/xxxxx || Github || '#24292e'
  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email || '#4a7dbe'

格式为：图标: 链接 || 描述 || 颜色

图片设置

基本图片配置

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
# 网站的 favicon 图标
favicon: /img/favicon.png

# 头像设置
avatar:
  # 头像图片链接
  img: /img/avatar.png
  # 是否启用头像效果
  effect: false

# 禁用所有横幅图片
disable_top_img: false

# 如果页面未设置横幅，则显示默认的横幅图片
default_top_img:

# 首页的横幅图片
index_img:

# 归档页的横幅图片
archive_img:

# 标签页的横幅图片（注意：是单个标签页，不是标签列表页）
tag_img:

# 为每个标签设置不同的横幅图片
# 格式:
#  - 标签名: 图片链接
tag_per_img:

# 分类页的横幅图片（注意：是单个分类页，不是分类列表页）
category_img:

# 为每个分类设置不同的横幅图片
# 格式:
#  - 分类名: 图片链接
category_per_img:

# 页脚的背景图片
footer_img: false

# 网站背景
# 可以设置为颜色或图片 URL
# 图片格式: url(http://xxxxxx.com/xxx.jpg)
background:

封面设置

1
2
3
4
5
6
7
8
9
10
11
12
cover:
  # 首页是否显示封面
  index_enable: true
  # 侧边栏是否显示封面
  aside_enable: true
  # 归档页是否显示封面
  archives_enable: true
  # 首页封面的位置: left / right / both
  position: both
  # 当未设置封面时，显示默认封面
  default_cover:
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

错误图片替换

1
2
3
4
5
error_img:
  # 友链页面的错误图片
  flink: /img/friend_404.gif
  # 文章页面的错误图片
  post_page: /img/404.jpg

404 页面

1
2
3
4
5
6
7
error_404:
  # 是否启用 404 页面
  enable: false
  # 404 页面的副标题
  subtitle: 'Page Not Found'
  # 404 页面的卡片背景图片
  background: /img/error-page.png

文章元数据设置

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
post_meta:
  # 首页页面
  page:
    # 日期类型: created / updated / both
    date_type: created
    # 日期格式: date / relative
    date_format: date
    # 是否显示分类
    categories: true
    # 是否显示标签
    tags: false
    # 是否显示文字标签
    label: true
  # 文章页面
  post:
    # 元数据位置: left / center
    position: left
    # 日期类型: created / updated / both
    date_type: both
    # 日期格式: date / relative
    date_format: date
    # 是否显示分类
    categories: true
    # 是否显示标签
    tags: true
    # 是否显示文字标签
    label: true

首页设置

首页头图设置

1
2
3
4
5
6
# 首页头图的设置
# 默认: 头图全屏，站点信息在中间
# 站点信息的位置，例如: 300px/300em/300rem/10%
index_site_info_top:
# 头图的高度，例如: 300px/300em/300rem
index_top_img_height:

首页副标题设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
subtitle:
  # 是否启用副标题
  enable: false
  # 是否启用打字机效果
  effect: true
  # 自定义 typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # 来源 - 调用第三方服务 API（仅限中文）
  # 它将首先显示来源，然后显示副标题内容
  # 选择: false/1/2/3
  # false - 禁用此功能
  # 1 - hitokoto.cn（一言）
  # 2 - yijuzhan.com
  # 3 - jinrishici.com（今日诗词）
  source: false
  # 如果关闭打字机效果，副标题将仅显示 sub 的第一行内容
  sub:

首页文章布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 首页文章布局
# 1: 行布局
# 2: 列布局
index_layout: 1

# 在首页显示文章简介
# 1: 描述
# 2: 两者（如果存在描述，将显示描述，否则显示自动摘要）
# 3: 自动摘要（默认）
# false: 不显示文章简介
index_post_content:
  method: 3
  # 如果设置 method 为 2 或 3，需要配置长度
  length: 500

文章设置

目录（TOC）设置

1
2
3
4
5
6
7
8
9
10
11
12
13
toc:
  # 是否在文章中显示目录
  post: true
  # 是否在页面中显示目录
  page: false
  # 是否显示目录编号
  number: true
  # 是否默认展开目录
  expand: false
  # 是否使用简洁风格（仅适用于文章）
  style_simple: false
  # 是否显示滚动百分比
  scroll_percent: true

文章版权设置

1
2
3
4
5
6
7
8
9
10
11
post_copyright:
  # 是否启用版权声明
  enable: true
  # 是否进行文章 URL 解码
  decode: false
  # 作者链接
  author_href:
  # 许可证类型
  license: CC BY-NC-SA 4.0
  # 许可证链接
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

打赏设置

1
2
3
4
5
6
7
8
9
10
11
12
reward:
  # 是否启用打赏
  enable: false
  # 打赏案例文本
  text:
  QR_code:
    # - img: /img/wechat.jpg
    #   link:
    #   text: 微信
    # - img: /img/alipay.jpg
    #   link:
    #   text: 支付宝

文章编辑

1
2
3
4
5
6
post_edit:
  # 是否启用在线编辑
  enable: false
  # url: https://github.com/用户名/仓库名/edit/分支名/子目录名/
  # 例如: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

相关文章

1
2
3
4
5
6
7
related_post:
  # 是否显示相关文章
  enable: true
  # 显示的文章数量
  limit: 6
  # 选择: created / updated
  date_type: created

文章分页

1
2
3
4
5
# 选择: 1 / 2 / false
# 1: "下一篇文章"将链接到旧文章
# 2: "下一篇文章"将链接到新文章
# false: 禁用分页
post_pagination: 1

文章过期提醒

1
2
3
4
5
6
7
8
9
10
11
noticeOutdate:
  # 是否启用过期提醒
  enable: false
  # 样式: simple / flat
  style: flat
  # 多少天后显示提醒
  limit_day: 365
  # 位置: top / bottom
  position: top
  message_prev: 已经过了
  message_next: 天自上次更新，文章内容可能已过时。

页脚设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
footer:
  # 页脚导航栏配置
  nav:
  owner:
    # 是否启用所有者显示
    enable: true
    # 网站创建年份
    since: 2019
  # 自定义文本
  custom_text:
  # 主题和框架的版权声明
  copyright:
    enable: true
    # 显示版本号
    version: true

下篇预告

下篇将继续介绍侧边栏设置、右下角按钮、全局设置、数学公式、搜索、评论系统等配置选项。