前言

butterfly是基于melody主题的基础上开发的主题,UI界面非常好,本博客就采用butterfly主题。

安装主题

请详见:Hexo安装Butterfly主题

将 butterfly/_config.yml 文件复制,重命名为 _config.butterfly.yml 放在hexo根目录下,在这个文件里做修改。

配置主题

设置导航栏

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
友链: /link/ || fas fa-link
关于: /about/ || fas fa-heart
清单||fas fa-list:
- 音乐 || /music/ || fas fa-music
- 电影 || /movies/ || fas fa-video
- 照片 || /Gallery/ || fas fa-images

可以在不需要的项目前加 # 来注释代码,使其不出现在导航栏中。

配置网站图标和头像

1
2
3
4
5
6
7
8
9
10
11
12
13
# Image (圖片設置)
# --------------------------------------

# Favicon(網站圖標)
favicon: /img/favicon.png

# Avatar (頭像)
avatar:
img: /img/avatar.png
effect: false

# The banner image of home page
index_img: /img/img.jpg

图片最好不要太大,不然可能导致加载太慢。

配置副标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
subtitle:
enable: true
# Typewriter Effect (打字效果)
effect: true
# Effect Speed Options (打字效果速度參數)
startDelay: 300 # time before typing starts in milliseconds
typeSpeed: 150 # type speed in milliseconds
backSpeed: 50 # backspacing speed in milliseconds
# loop (循環打字)
loop: true
# source 調用第三方服務
# source: false 關閉調用
# source: 1 調用一言網的一句話(簡體) https://hitokoto.cn/
# source: 2 調用一句網(簡體) http://yijuzhan.com/
# source: 3 調用今日詩詞(簡體) https://www.jinrishici.com/
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果關閉打字效果,subtitle 只會顯示 sub 的第一行文字
sub:
- 风来疏竹,风过而竹不留声;雁度寒潭,雁去而潭不留影。故君子事来而心始现,事去而心随空。
- 有志者事竟成,破釜沉舟,百二秦关终属楚;苦心人天不负,卧薪尝胆,三千越甲可吞吴。
- 欢迎您来到竹山一叶的小家(❁'◡'❁)
- 希望您有快乐的一天,也欢迎常来竹山一叶的小家串串门(●'◡'●)

也可以考虑开启和调用第三方的服务。

侧边栏

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
aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: left # 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: 欢迎光临小站,这里是我日常收集和整理的总结,希望能对你有所帮助:)<br/><br/>本站的内容经过个人加工总结而来,也参考了网友们分享的资料,如有侵权,请第一时间联系我,我将及时进行修改和删除😊
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: true
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

不需要的按钮可以用 false 关闭

配置友链

新建source/_data/link.yml文件,添加如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- class_name: 友情链接
class_desc: 那些人,那些事
link_list:
- name: JerryC
link: https://jerryc.me/
avatar: https://jerryc.me/image/avatar.png
descr: 今日事,今日毕
- name: Hexo
link: https://hexo.io/zh-tw/
avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
descr: 快速、简单且强大的网誌框架
- name: 大宇
link: https://confucianmen.gitee.io/blog/
avatar: https://s1.ax1x.com/2020/08/11/aX3EsP.gif
descr: 热爱分享 热爱学习

配置社交图标

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

统计分析

我这里用百度统计

1
2
3
4
5
# Analysis
# --------------------------------------

# Baidu Analytics
baidu_analytics: {百度统计的号码}

纯色背景

_config.butterfly.yml 下找到 theme_color :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
theme_color:
enable: true
main: "#49B1F5"
paginator: "#00c4b6"
button_hover: "#FF7242"
text_selection: "#00c4b6"
link_color: "#99a9bf"
meta_color: "#858585"
hr_color: "#A4D8FA"
code_foreground: "#F47466"
code_background: "rgba(27, 31, 35, .05)"
toc_color: "#00c4b6"
blockquote_padding_color: "#49b1f5"
blockquote_background_color: "#49b1f5"
scrollbar_color: "#49b1f5"

可自行更换主题中上述元素的颜色。

彩带背景

_config.butterfly.yml 下找到 canvas_ribbon :

1
2
3
4
5
6
7
8
9
# canvas_ribbon (静止彩带背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
enable: false
size: 150
alpha: 0.6
zIndex: -1
click_to_change: true #点击鼠标更换彩带
mobile: false

图片背景

将自己喜欢的图片放入 theme/butterfly/source/img

在 _config.butterfly.yml 下找到 background :

1
background: url(/blog/img/bg.jpg)

自定义渐变背景

需要在 theme/butterfly/source/css 中新建一个 css 文件,文件名自取

之后在 _config.butterfly.yml 下找到 inject :

1
2
3
4
5
6
7
8
# Inject
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
- <link rel="stylesheet" href="/css/mycss.css">
# - <link rel="stylesheet" href="/xxx.css">
bottom:
# - <script src="xxxx"></script>

在 head 中插入 - <link rel="stylesheet" href="/css/mycss.css">

页脚

默认页脚为主题色。可在 _config.butterfly.yml 下找到 footer ,

其中包含页脚设置:

1
2
3
4
5
6
7
8
# Footer Settings
# --------------------------------------
footer:
owner:
enable: true
since: 2022
custom_text:
copyright: true # Copyright of theme and framework

可以配置页脚显示的内容

还有页脚背景:

1
2
# Footer Background
footer_bg: false

打开后页脚图片将与主页图片(index_img)底部一致;

也可进行自定义渐变页脚:

在原本配置渐变背景的 css 文件下复制代码:

1
2
3
4
5
6
7
8
9
/* 页脚footer */
#footer {
/* 与背景渐变效果一致*/
background-image: linear-gradient(-225deg, #d6badf 0%, #B8DCFF 28%, #58abf3 100%);
}

#footer:before {
background-color: rgba(0, 0, 0, 0);
}

渐变效果可以自己配置。

文章的封面

每篇文章都可以设置自己的封面,或者统一使用一个封面,这些都可以在 _config.butterfly.yml 下找到;

1
2
3
4
5
6
7
8
9
10
11
cover:
# display the cover or not (是否显示文章封面)
index_enable: false
aside_enable: false
archives_enable: false
# the position of cover in home page (封面显示的位置)
# left/right/both
position: both
# When cover is not set, the default cover is displayed (当没有设置cover时,默认的封面显示)
default_cover:
# - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

建议没有文章封面时,将上述几个开关可以考虑关闭掉。

文章基本设置

在 _config.butterfly.yml 下找到 post_meta :

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

主页文章显示高度,显示篇数:

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

字数统计

1
2
3
4
5
6
# wordcount (字数统计)
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true