更多详细配置请访问Butterfly官方文档

https://butterfly.js.org/

创建页面

hexo new page “页面名称”

创建完成后进入命令输出的路径把md文件加入type: "你的页面名称"

把页面加入导航栏菜单

菜单/目录

修改 主题配置文件

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

页面加载等待动画 preloader

当进入网页时,因为加载速度的问题,可能会导致 top_img 图片出现断层显示,或者网页加载不全而出现等待时间,开启preloader后,会显示加载动画,等页面加载完,加载动画会消失。

主题支持 pace.js 的加载动画,具体可查看 pace.js

1
2
3
4
5
6
7
8
9
10
# 加载动画 Loading Animation
preloader:
enable: false
# source
# 1. fullpage-loading
# 2. pace (progress bar)
source: 1
# pace theme (see https://codebyzach.github.io/pace/)
pace_css_url:

页面美化

会改变ol、ul、h1-h5的样式,field配置生效的区域,post 只在文章页生效,site 在全站生效,修改 主题配置文件

1
2
3
4
5
6
# 美化页面显示
beautify:
enable: true
field: site # site/post
title-prefix-icon: '\f0c1'
title-prefix-icon-color: "#F47466"

配置本地搜索

你需要安装 hexo-generator-searchdb ,根据它的文档去做相应配置

修改 主题配置文件

1
2
3
4
5
6
7
8
9
10
11
# Local search
local_search:
enable: false
# Preload the search data when the page loads.
preload: false
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
CDN:

访问人数 busuanzi (UV 和 PV)

推荐关闭,busuanzi的接口时常出问题会导致页面加载缓慢

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