Butterfly 主题配置详解（下）

本文继续介绍 Butterfly 主题的高级配置选项。

侧边栏设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
aside:
  # 是否启用侧边栏
  enable: true
  # 是否默认隐藏侧边栏
  hide: false
  # 是否在右下角显示隐藏侧边栏的按钮
  button: true
  # 移动设备上是否启用侧边栏
  mobile: true
  # 侧边栏位置：left / right
  position: right
  display:
    # 归档页面是否显示侧边栏
    archive: true
    # 标签页面是否显示侧边栏
    tag: true
    # 分类页面是否显示侧边栏
    category: true

侧边栏卡片配置

作者信息卡片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
card_author:
  # 是否显示作者信息卡片
  enable: true
  # 作者描述
  description:
  button:
    # 是否显示按钮
    enable: true
    # 按钮图标
    icon: fab fa-github
    # 按钮文本
    text: Follow Me
    # 按钮链接
    link: https://github.com/xxxxxx

公告卡片

1
2
3
4
5
card_announcement:
  # 是否显示公告卡片
  enable: true
  # 公告内容
  content: This is my Blog

最近文章卡片

1
2
3
4
5
6
7
8
card_recent_post:
  # 是否显示最近文章卡片
  enable: true
  # 显示文章数量，0 表示显示所有
  limit: 5
  # 排序方式：date / updated
  sort: date
  sort_order:

最新评论卡片

1
2
3
4
5
6
7
8
9
10
card_newest_comments:
  # 是否显示最新评论卡片
  enable: false
  sort_order:
  # 显示评论数量
  limit: 6
  # 单位：分钟，保存数据到 localStorage
  storage: 10
  # 是否显示头像
  avatar: true

分类卡片

1
2
3
4
5
6
7
8
card_categories:
  # 是否显示分类卡片
  enable: true
  # 显示分类数量，0 表示显示所有
  limit: 8
  # 选择：none / true / false
  expand: none
  sort_order:

标签卡片

1
2
3
4
5
6
7
8
9
10
11
12
card_tags:
  # 是否显示标签卡片
  enable: true
  # 显示标签数量，0 表示显示所有
  limit: 40
  # 是否启用颜色
  color: false
  # 标签排序方式：random / name / length
  orderby: random
  # 排序顺序：1 表示升序，-1 表示降序
  order: 1
  sort_order:

归档卡片

1
2
3
4
5
6
7
8
9
10
11
12
card_archives:
  # 是否显示归档卡片
  enable: true
  # 归档类型：monthly / yearly
  type: monthly
  # 日期格式，例如：YYYY 年 MM 月
  format: MMMM YYYY
  # 排序顺序：1 表示升序，-1 表示降序
  order: -1
  # 显示归档数量，0 表示显示所有
  limit: 8
  sort_order:

系列文章卡片

1
2
3
4
5
6
7
8
9
card_post_series:
  # 是否显示系列文章卡片
  enable: true
  # 标题显示系列名称
  series_title: false
  # 排序方式：title 或 date
  orderBy: 'date'
  # 排序顺序：1 表示升序，-1 表示降序
  order: -1

网站信息卡片

1
2
3
4
5
6
7
8
9
10
11
12
card_webinfo:
  # 是否显示网站信息卡片
  enable: true
  # 是否显示文章数量
  post_count: true
  # 是否显示最后推送日期
  last_push_date: true
  sort_order:
  # 发布日期与当前日期的时间差
  # 格式：Month/Day/Year Time 或 Year/Month/Day Time
  # 如果不启用此功能，请留空
  runtime_date:

右下角按钮设置

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
# 右下角按钮与底部的距离（默认单位：px）
rightside_bottom:

# 简繁转换设置
translate:
  # 是否启用简繁转换
  enable: false
  # 按钮文本
  default: 繁
  # 网站语言（1 - 繁体中文 / 2 - 简体中文）
  defaultEncoding: 2
  # 转换延迟
  translateDelay: 0
  # 按钮在简体中文时的文本
  msgToTraditionalChinese: '繁'
  # 按钮在繁体中文时的文本
  msgToSimplifiedChinese: '简'

# 阅读模式
readmode: true

# 暗黑模式设置
darkmode:
  # 是否启用暗黑模式
  enable: true
  # 切换暗黑/明亮模式的按钮
  button: true
  # 是否自动切换暗黑/明亮模式
  # autoChangeMode: 1  跟随系统设置，如果系统不支持暗黑模式，则在晚上 6 点到早上 6 点之间切换暗黑模式
  # autoChangeMode: 2  在晚上 6 点到早上 6 点之间切换暗黑模式
  # autoChangeMode: false  不自动切换
  autoChangeMode: false
  # 设置明亮模式时间，值在 0 到 24 之间。如果未设置，默认值为 6 和 18
  start:
  end:

# 在返回顶部按钮中显示滚动百分比
rightside_scroll_percent: false

# 右侧项目顺序设置
rightside_item_order:
  # 是否启用右侧项目顺序
  enable: false
  # 隐藏的默认项目：readmode,translate,darkmode,hideAside
  hide:
  # 显示的默认项目：toc,chat,comment
  show:

# 右下角配置按钮动画效果
rightside_config_animation: true

全局设置

锚点设置

1
2
3
4
5
anchor:
  # 滚动时，URL 将根据标题 ID 更新
  auto_update: false
  # 点击标题滚动并更新锚点
  click_to_scroll: false

图片标题

1
2
# 是否显示图片标题
photofigcaption: false

复制设置

1
2
3
4
5
6
7
8
copy:
  # 是否启用复制功能
  enable: true
  # 在复制的内容后添加版权信息
  copyright:
    enable: false
    # 当复制字符数超过 limit_count 时添加版权信息
    limit_count: 150

字数统计

1
2
3
4
5
6
7
8
9
10
# 需要安装 hexo-wordcount 插件
wordcount:
  # 是否启用字数统计
  enable: false
  # 在文章元信息中显示字数统计
  post_wordcount: true
  # 在文章元信息中显示阅读时间
  min2read: true
  # 在侧边栏网站信息中显示总字数
  total_wordcount: true

网站统计

1
2
3
4
5
6
7
8
# 不蒜子 PV / UV 统计
busuanzi:
  # 网站 UV 统计
  site_uv: true
  # 网站 PV 统计
  site_pv: true
  # 页面 PV 统计
  page_pv: true

数学公式设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
math:
  # 选择：mathjax, katex
  # 如果不需要数学公式，保持为空
  use:
  # 是否在每个页面加载脚本
  per_page: true
  # 是否隐藏滚动条
  hide_scrollbar: false

  mathjax:
    # 启用上下文菜单
    enableMenu: true
    # 选择：all / ams / none，这控制是否对公式编号以及如何编号
    tags: none

  katex:
    # 启用复制 KaTeX 公式
    copy_tex: false

搜索设置

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
search:
  # 选择：algolia_search / local_search / docsearch
  # 如果不需要搜索功能，保持为空
  use:
  placeholder:

  # Algolia 搜索
  algolia_search:
    # 每页搜索结果数量
    hitsPerPage: 6

  # 本地搜索
  local_search:
    # 页面加载时预加载搜索数据
    preload: false
    # 每篇文章显示前 n 个结果，设置为 -1 显示所有结果
    top_n_per_article: 1
    # 将 HTML 字符串转义为可读的字符串
    unescape: false
    # 启用搜索结果分页
    pagination:
      enable: false
      # 每页搜索结果数量
      hitsPerPage: 8
    CDN:

  # Docsearch
  # https://docsearch.algolia.com/
  docsearch:
    appId:
    apiKey:
    indexName:
    option:

分享系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
share:
  # 选择：sharejs / addtoany
  # 如果不需要分享，保持为空
  use: sharejs

  # Share.js
  # https://github.com/overtrue/share.js
  sharejs:
    sites: facebook,x,wechat,weibo,qq

  # AddToAny
  # https://www.addtoany.com/
  addtoany:
    item: facebook,x,wechat,sina_weibo,facebook_messenger,email,copy_link

评论系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
comments:
  # 最多两个评论系统，第一个将作为默认显示
  # 如果不需要评论，保持为空
  # 选择：Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  # 两个评论系统的格式：Disqus,Waline
  use:
  # 在按钮旁边显示评论名称
  text: true
  # 懒加载：当评论元素进入浏览器视口时才加载评论系统
  # 如果设置为 true，评论计数将无效
  lazyload: false
  # 在文章的 top_img 中显示评论计数
  count: false
  # 在首页显示评论计数
  card_post_count: false

聊天服务

1
2
3
4
5
6
7
8
9
chat:
  # 选择：chatra / tidio / crisp
  # 如果不需要聊天，保持为空
  use:
  # 聊天按钮（推荐）
  # 它将在网站右下角创建一个按钮，并隐藏原始按钮
  rightside_button: false
  # 向上滚动时显示原始聊天按钮，向下滚动时隐藏按钮
  button_hide_show: false

分析统计

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
# 百度统计
baidu_analytics:

# Google Analytics
google_analytics:

# Cloudflare 分析
cloudflare_analytics:

# Microsoft Clarity
microsoft_clarity:

# Umami 分析
umami_analytics:
  enable: false
  # 对于自托管设置，配置 Umami 实例的主机名
  serverURL:
  script_name: script.js
  website_id:
  option:
  UV_PV:
    site_uv: false
    site_pv: false
    page_pv: false
    # Umami Cloud（API 密钥）/ 自托管 Umami（令牌）
    token:

# Google Tag Manager
google_tag_manager:
  tag_id:
  # 可选
  domain:

广告设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Google Adsense
google_adsense:
  enable: false
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client:
  enable_page_level_ads: true

# 手动插入广告
# 如果不需要广告，保持为空
ad:
  # 在首页插入广告（每三篇文章）
  index:
  # 在侧边栏插入广告
  aside:
  # 在文章中插入广告（分页之前）
  post:

CDN 设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
CDN:
  # 内部和第三方脚本的 CDN 提供商
  # 两者的选项：local / jsdelivr / unpkg / cdnjs / custom
  # 注意：开发版本只能对内部脚本使用 'local'
  # 注意：将第三方脚本设置为 'local' 时，需要安装 hexo-butterfly-extjs
  internal_provider: local
  third_party_provider: jsdelivr

  # 向 URL 添加版本号，true 或 false
  version: true

  # 自定义格式
  # 例如：https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
  custom_format:

  option:
    # 这里可以配置各个库的 CDN 地址

总结

通过合理配置这些选项，你可以完全自定义 Butterfly 主题的外观和功能，打造一个独特的博客。建议根据自己的需求逐步调整配置，以获得最佳的用户体验。