导航栏设置 (Navigation bar settings)

参数设置

主题配置文件中(注意不是根目录配置文件)

1
2
3
4
nav:
logo: #image
display_title: true
fixed: false # fixed navigation bar
参数 解释
logo 网站的 logo,支持图片,直接填入图片链接
display_title 是否显示网站标题,填写 true 或者 false
fixed 是否固定状态栏,填写 true 或者 false

菜单/目录

​ 修改 主题配置文件

1
2
3
4
5
6
7
8
9
Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
Music: /music/ || fas fa-music
Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

必须是 /xxx/,后面||分开,然后写图标名。

如果不希望显示图标,图标名可不写。

默认子目录是展开的,如果你想要隐藏,在子目录里添加 hide

1
2
3
List||fas fa-list||hide:
Music: /music/ || fas fa-music
Movie: /movies/ || fas fa-video

注意: 导航的文字可自行更改

1
2
3
4
5
6
7
8
9
10
11
menu:
首页: / || fas fa-home
时间轴: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
清单||fa fa-heartbeat:
音乐: /music/ || fas fa-music
照片: /Gallery/ || fas fa-images
电影: /movies/ || fas fa-video
友链: /link/ || fas fa-link
关于: /about/ || fas fa-heart

代码 (Code Blocks)

代码高亮主题

Butterfly 支持6种代码高亮样式:

  • darker
  • pale night
  • light
  • ocean
  • mac
  • mac light

修改 主题配置文件

1
highlight_theme: light

代码复制

主题支持代码复制功能

修改 主题配置文件

1
highlight_copy: true

代码框展开/关闭

在默认情况下,代码框自动展开,可设置是否所有代码框都关闭状态,点击>可展开代码

  • true 全部代码框不展开,需点击>打开
  • false 代码框展开,有>点击按钮
  • none 不显示>按钮

修改 主题配置文件

1
highlight_shrink: true #代码框不展开,需点击 '>' 打开

你也可以在post/page页对应的markdown文件front-matter添加highlight_shrink来独立配置。

当主题配置文件中的 highlight_shrink 设为true时,可在front-matter添加highlight_shrink: false来单独配置文章展开代码框。

当主题配置文件中的 highlight_shrink 设为false时,可在front-matter添加highlight_shrink: true来单独配置文章收缩代码框。

代码换行

在默认情况下,Hexo 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话,那么你可以考虑开启这个功能。

1
code_word_wrap: true

社交图标 (Social Settings)

Butterfly支持 font-awesome v6 图标.

书写格式 图标名:url || 描述性文字 || color

1
2
3
social:
fab fa-github: https://github.com/xxxxx || Github || "#hdhfbb"
fas fa-envelope: mailto:xxxxxx@gmail.com || Email || "#000000"

头像

修改 主题配置文件

1
2
3
avatar:
img: /img/avatar.png
effect: true # 头像会一直转圈

顶部图

如果不要显示顶部图,可直接配置 disable_top_img: true

顶部图的获取顺序,如果都没有配置,则不显示顶部图。

  1. 页面顶部图的获取顺序:

    各自配置的 top_img > 配置文件的 default_top_img

  2. 文章页顶部图的获取顺序:

    各自配置的 top_img > cover > 配置文件的 default_top_img

配置中的值:

配置 解释
index_img 主页的 top_img
default_top_img 默认的 top_img,当页面的 top_img 没有配置时,会显示 default_top_img
archive_img 归档页面的 top_img
tag_img tag 子页面 的 默认 top_img
tag_per_img tag 子页面的 top_img,可配置每个 tag 的 top_img
category_img category 子页面 的 默认 top_img
category_per_img category 子页面的 top_img,可配置每个 category 的 top_img

并不推荐为每个 tag 和每个 category 都配置不同的顶部图,因为配置太多会拖慢生成速度

文章封面

文章的 markdown 文档上,在 Front-matter 添加 cover ,并填上要显示的图片地址。

如果不配置 cover,可以设置显示默认的 cover

如果不想在首页显示 cover, 可以设置为 false

文章封面的获取顺序 Front-matter 的 cover > 配置文件的 default_cover > false

修改 主题配置文件

1
2
3
4
5
6
7
8
9
10
cover:
# 是否显示文章封面
index_enable: true #主页是否显示文章封面图
aside_enable: true #侧栏是否显示文章封面图
archives_enable: true # 归档页面是否显示文章封面图
# 封面显示的位置
# 三个值可配置 left , right , both
position: both
# 当没有设置cover时,默认的封面显示
default_cover:

当配置多张图片时,会随机选择一张作为cover.此时写法应为

1
2
3
4
default_cover:
- https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg.png
- https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg2.png
- https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg3.png

页面 meta 显示

这个选项是用来显示文章的相关信息的。

修改 主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
page:
date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
date_format: relative # date/relative 显示日期还是相对日期
categories: true # true or false 主页是否显示分类
tags: true # true or false 主页是否显示标签
label: true # true or false 显示描述性文字
post:
date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
date_format: relative # date/relative 显示日期还是相对日期
categories: true # true or false 文章页是否显示分类
tags: true # true or false 文章页是否显示标签
label: true # true or false 显示描述性文字

主页文章节选(自动节选和文章页description)

因为主题UI的关係,主页文章节选只支持自动节选和文章页description

butterfly里,有四种可供选择

  1. description: 只显示description
  2. both: 优先选择``,如果没有配置description,则显示自动节选的内容
  3. auto_excerpt:只显示自动节选
  4. false: 不显示文章内容

修改 主题配置文件

1
2
3
index_post_content:
method: 3
length: 500 # if you set method to 2 or 3, the length need to config

页面锚点

开启页面锚点后,当你在进行滚动时,页面链接会根据标题ID进行替换
(注意: 每替换一次,会留下一个历史记录。所以如果一篇文章有很多锚点的话,网页的历史记录会很多。)

修改 主题配置文件

1
2
3
4
5
6
7
8
9
# anchor
# when you scroll in post , the url will update according to header id.
anchor:
button:
enable: false
always_show: false
icon: # the unicode value of Font Awesome icon, such as '\3423'
auto_update: false # when you scroll in post, the URL will update according to header id.

复制相关配置

可配置网站是否可以复制、复制的内容是否添加版权信息

1
2
3
4
5
6
7
# copy settings
# copyright: Add the copyright information after copied content (复制的内容后面加上版权信息)
copy:
enable: true # 是否开启网站复制权限
copyright: #复制的内容后面加上版权信息
enable: true # 是否开启复制版权信息添加
limit_count: 50 #字数限制,当复制文字大于这个字数限制时,将在复制的内容后面加上版权信息

文章页相关配置

文章版权

为你的博客文章展示文章版权和许可协议。

修改 主题配置文件

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

文章打赏

在你每篇文章的结尾,可以添加打赏按钮。相关二维码可以自行配置。

对于没有提供二维码的,可配置一张软件的icon图片,然后在link上添加相应的打赏链接。用户点击图片就会跳转到链接去。

link可以不写,会默认为图片的链接。

修改 主题配置文件

1
2
3
4
5
6
7
8
9
reward:
enable: true
QR_code:
- img: /img/wechat.jpg
link:
text: 微信
- img: /img/alipay.jpg
link:
text: 支付宝

TOC

在文章页,会有一个目录,用于显示TOC。

修改 主题配置文件

1
2
3
4
5
6
7
toc:
post: true #文章页是否显示 TOC
page: true # 普通页面是否显示 TOC
number: true # 是否显示章节数
expand: false #是否展开 TOC
style_simple: false # for post #简洁模式(侧边栏只显示 TOC, 只对文章页有效 )
scroll_percent: true # 是否显示滚动进度百分比

文章过期提醒

可设置是否显示文章过期提醒,以更新时间为基准。

1
2
3
4
5
6
7
8
# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:
enable: true
style: flat # style: simple/flat
limit_day: 365 # When will it be shown
position: top # position: top/bottom
message_prev: It has been
message_next: days since the last update, the content of the article may be outdated.

limit_day: 距离更新时间多少天才显示文章过期提醒

message_prev : 天数之前的文字

message_next:天数之后的文字

文章分页按钮

当文章封面设置为 false 时,或者没有获取到封面配置,分页背景将会显示主题色。

可设置分页的逻辑,也可以关闭分页显示

1
2
3
4
5
6
# post_pagination (分页)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: false

Footer 设置

博客年份

since是一个来展示你站点起始时间的选项。它位于页面的最底部。

1
2
3
4
footer:
owner:
enable: true
since: 2018

页脚自定义文本

custom_text是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。

修改 主题配置文件

1
custom_text: Hi, welcome to my <a href="https://butterfly.js.org/">blog</a>!

对于部分人需要写 ICP 的,也可以写在 custom_text

1
custom_text: <a href="icp链接"><img class="icp-icon" src="icp图片"><span>备案号:xxxxxx</span></a>

侧边栏设置 (aside)

侧边排版

可自行决定哪个项目需要显示,可决定位置,也可以设置不显示侧边栏。

修改 主题配置文件

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
aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: right # left or 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/xxxxxx
card_announcement:
enable: true
content: This is my Blog
card_recent_post:
enable: true
limit: 5 # if set 0 will show all
sort: date # date or updated
sort_order: # Don't modify the setting unless you know how it works
card_categories:
enable: true
limit: 8 # if set 0 will show all
expand: none # none/true/false
sort_order: # Don't modify the setting unless you know how it works
card_tags:
enable: true
limit: 40 # if set 0 will show all
color: false
orderby: random # Order of tags, random/name/length
order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
sort_order: # Don't modify the setting unless you know how it works
card_archives:
enable: true
type: monthly # yearly or monthly
format: MMMM YYYY # eg: YYYY年MM月
order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
limit: 8 # if set 0 will show all
sort_order: # Don't modify the setting unless you know how it works
card_webinfo:
enable: true
post_count: true
last_push_date: true
sort_order: # Don't modify the setting unless you know how it works

访问人数 busuanzi (UV 和 PV)

访问 busuanzi 的官方网站查看更多的介绍。不蒜子 - 极简网页计数器 (ibruce.info)

1
2
3
4
busuanzi:
site_uv: true
site_pv: true
page_pv: true

运行时间

网页已运行时间

修改 主题配置文件

1
2
3
4
5
6
runtimeshow:
enable: true
publish_date: 6/7/2018 00:00:00
##网页开通时间
#格式: 月/日/年 时间
#也可以写成 年/月/日 时间

最新评论

3.1.0 起支持

最新评论只会在刷新时才会去读取,并不会实时变化

由于 API 有 访问次数限制,为了避免调用太多,主题默认存取期限为 10 分钟。也就是説,调用后资料会存在 localStorage 里,10分钟内刷新网站只会去 localStorage 读取资料。 10 分钟期限一过,刷新页面时才会去调取 API 读取新的数据。( 3.6.0 新增了 storage 配置,可自行配置缓存时间)

在侧边栏显示最新评论板块

修改 主题配置文件

1
2
3
4
5
6
7
# Aside widget - Newest Comments
newest_comments:
enable: true
sort_order: # Don't modify the setting unless you know how it works
limit: 6 #显示的数量
storage: 10 # unit: mins, save data to localStorage 设置缓存时间,单位 分钟
avatar: true # 是否显示头像

閲读模式

閲读模式下会去掉除文章外的内容,避免干扰閲读。

只会出现在文章页面,右下角会有閲读模式按钮。

1
readmode: true

夜间模式

右下角会有夜间模式按钮

1
2
3
4
5
6
7
8
9
# dark mode
darkmode:
enable: true
# dark mode和 light mode切换按钮
button: true # 是否在右下角显示日夜模式切换按钮
autoChangeMode: false
# Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18
start: # 8
end: # 22

滚动状态百分比

1
2
# show scroll percent in scroll-to-top button
rightside_scroll_percent: true

按钮排序

1
2
3
4
5
6
7
# Don't modify the following settings unless you know how they work (非必要请不要修改 )
# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
# Don't repeat 不要重复
rightside_item_order:
enable: false
hide: # readmode,translate,darkmode,hideAside
show: # toc,chat,comment