1.前言

  1. 这个系列是关于如何基于hexo框架以及GitHub Pages搭建自己的博客网站。
  2. ❗创建本系列博客的初衷也只是为了记录一下自己的学习过程,以防之后健忘❗。
  3. 虽说如此,但是本系列博客已经写的很详细了,可能后面的内容会比较简略,就算是零基础也能懂大部分。
  4. 关于butterfly配置文件中的参数说明,可以参考官方,这里只讲述自己使用的部分。

2.导航栏

每一项前为项的名称,中英文都可以,后面的参数分别为source文件夹中的对应的标签页路径和对应的图标,以||来分隔,列表项要在最后添加||hide,使列表保持隐藏。

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
休闲||fas fa-list||hide:
音乐: /music/ || fas fa-music
照片: /gallery/ || fas fa-images
视频: /movies/ || fas fa-video
友链: /link/ || fas fa-link
关于: /about/ || fas fa-heart

3.代码相关

这一部分是关于代码块的设置,每一项参数的对应含义:

  • highlight_theme:
    代码高亮主题,有六种可选的或者选择不使用,分别为:darker / pale night / light / ocean / mac / mac light / false
  • highlight_copy:
    代码复制按钮,默认为true
  • highlight_lang:
    代码语言类型显示,默认为true
  • highlight_shrink:
    代码块折叠选项,false为展开,true为折叠,none为不展开并不显示折叠按钮
  • highlight_height_limit:
    代码块高度限制,单位为px
  • code_word_wrap:
    是否强制换行,默认为false
    1
    2
    3
    4
    5
    6
    highlight_theme: mac
    highlight_copy: true
    highlight_lang: true
    highlight_shrink: false
    highlight_height_limit: 200
    code_word_wrap: false

4.社交图标

社交平台链接,格式为:
icon: link || the description || color

1
2
social:
fas fa-envelope: mailto:1157559178@qq.com || Email || '#4a7dbe'

5.图片设置

  • favicon:
    网站图标
  • avatar:
    头像,effect为旋转效果
  • disable_top_img:
    关闭banner图片,默认为false
  • index_img:
    home page的banner图片的路径
  • default_top_img:
    默认的banner图片,当对应的标签页的banner图片没有设置时应用此项
  • archive_img:
    archive page的banner图片的路径
  • tag_img:
    tag page的banner图片的路径
  • tag_per_img:
    每一项标签的banner图片的路径
  • category_img:
    category page的banner图片的路径
  • category_per_img:
    每一项分类的banner图片的路径
  • cover:
    文章封面设置
    • index_enable:
    • aside_enable:
    • archives_enable:
    • position:
    • default_cover:
      文章封面路径
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
favicon: /img/favicon.png
avatar:
img: /img/avatar.png
effect: false
disable_top_img: false
index_img: none
default_top_img: none
archive_img:
tag_img:
tag_per_img:
category_img:
category_per_img:
cover:
index_enable: true
aside_enable: true
archives_enable: true
position: both
default_cover:
- /img/1.jpg
- /img/2.jpg
- /img/3.jpg
- /img/4.jpg
- /img/5.jpg
- /img/6.jpg
- /img/7.jpg
- /img/8.jpg
- /img/9.jpg
- /img/10.jpg
- /img/11.jpg
- /img/12.jpg
- /img/13.jpg
- /img/14.jpg
- /img/15.jpg
- /img/16.jpg
- /img/17.jpg
- /img/18.jpg
- /img/19.jpg
- /img/20.jpg
- /img/21.jpg

6.文章目录设置

1
2
3
4
5
6
7
toc:
post: true
page: false
number: false
expand: false
style_simple: false # for post
scroll_percent: true

7.打赏设置

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

8.分页设置

文章页底下的下一篇链接的是新的一篇还是旧的一篇

1
2
3
4
5
# 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: 2

9.页脚设置

1
2
3
4
5
6
footer:
owner:
enable: true
since: 2024
custom_text: 一个讨论技术和作为个人知识库的小站
copyright: true

10.侧边栏设置

大部分的侧边栏卡片都关闭了,简洁风至上🤔

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
51
52
53
54
55
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: 一个努力做全栈开发的广财er~💻
button:
enable: true
icon: fab fa-github
text: 前往小窝🚗
link: https://github.com/AnA-0823
card_announcement:
enable: true
content: 欢迎来到我的小站
card_recent_post:
enable: false
limit: 5 # if set 0 will show all
sort: updated # date or updated
sort_order: # Don't modify the setting unless you know how it works
card_categories:
enable: false
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: false
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: false
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
card_post_series:
enable: false
series_title: false # The title shows the series name
orderBy: 'date' # Order by title or date
order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending

11.访问人数

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

12.网站运行时间

1
2
3
runtimeshow:
enable: true
publish_date: 2024/05/01

13.右下角按钮设置

  • translate:
    简繁体翻译
  • readmode:
    阅读模式
  • darkmode:
    黑暗模式
  • rightside_scroll_percent:
    展示当前页面的滚动百分比,默认为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
translate:
enable: true
# The text of a button
default:
# the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese)
defaultEncoding: 2
# Time delay
translateDelay: 0
# The text of the button when the language is Simplified Chinese
msgToTraditionalChinese: '繁'
# The text of the button when the language is Traditional Chinese
msgToSimplifiedChinese: '简'
readmode: true
darkmode:
enable: true
# Toggle Button to switch dark/light mode
button: true
# Switch dark/light mode automatically (自動切換 dark mode和 light mode)
# autoChangeMode: 1 Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
# autoChangeMode: 2 Switch dark mode between 6 pm to 6 am
# autoChangeMode: false
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
rightside_scroll_percent: true

14.数学

设置页面对mathjax和katex的支持,当per_page设置为false,须在要启用的页面中的front-matter中加上对应参数

1
2
3
4
5
6
7
mathjax:
enable: false
per_page: false
katex:
enable: false
per_page: false
hide_scrollbar: true

15.搜索

  1. 添加一个本地搜索,使用命令npm install hexo-generator-search --save安装搜索插件
  2. 在配置文件底下加入local search的设置
    1
    2
    3
    4
    search:
    path: search.xml
    field: all
    content: true
  3. 在butterfly的配置中修改成以下设置
    1
    2
    3
    4
    5
    6
    local_search:
    enable: true
    preload: true
    top_n_per_article: -1
    unescape: false
    CDN:

16.分享系统

在文章页底下的分享链接,有两种,选一即可

1
2
3
4
5
6
sharejs:
enable: false
sites: facebook,twitter,wechat,weibo,qq
addtoany:
enable: false
item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

17.评论系统

支持的评论系统有:Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk

1
2
3
4
5
6
comments:
use: utterances
text: true
lazyload: false
count: false
card_post_count: false

18.在线聊天服务

展示右下角的聊天按钮,下面有几个支持的平台,去配置文件里看吧

1
2
chat_btn: true
chat_hide_show: true

19.网站UI配色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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"
meta_theme_color_light: "ffffff"
meta_theme_color_dark: "#0d0d0d"

20.网站背景和页脚背景

我想要页脚为透明的所以设置成none

1
2
3
4
5
background: url(/img/background.jpg)
footer_bg: none
mask:
header: true
footer: false

21.导航栏和页脚的蒙皮效果

透明页脚所以关闭页脚的蒙皮效果

1
2
3
mask:
header: true
footer: false

22.页面美化

在标题前加上一个小图标\f863是小风车,然后可以在inject中添加一个旋转动画使其旋转

1
2
3
4
5
beautify:
enable: true
field: post
title-prefix-icon: '\f863'
title-prefix-icon-color: '#F47466'

23.字体选择

1
2
3
4
5
font:
global-font-size: 16px
code-font-size: 15px
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
code-font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif

24.分割线图标

\f0c4是剪刀

1
2
3
4
hr_icon:
enable: true
icon: '\f0c4'
icon-top: -10px

25.主页副标题

effect为打字效果,可以改变副标题的源使其更动态

1
2
3
4
5
6
subtitle:
enable: true
effect: true
typed_option:
source: false
sub:

26.加载动画

1
2
3
4
preloader:
enable: true
source: 1
pace_css_url:

27.字数统计

在使用前需使用命令npm install hexo-wordcount --save安装插件

1
2
3
4
5
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true

28.弹窗显示

位置可选top-left / top-center / top-right / bottom-left / bottom-center / bottom-right

1
2
3
4
5
snackbar:
enable: true
position: top-right
bg_light: '#49b1f5'
bg_dark: '#1f1f1f'

29.中英文间空格

1
2
3
pangu:
enable: true
field: site