个性化主题

首先在~/Blog的根目录中找到_config.yml，然后在#Site和#URL中添加以下内容：

yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Site
title: #博客标题
subtitle: #博客副标题
description: #博客描述 
keywords: #关键词
author: #作者
language: #语言 zh-CN
timezone: #时区 Asia/Shanghai

# URL
url: #博客地址
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

然后在~/Blog/themes中找到现在使用的主题，例如Butterfly，在Butterfly的根目录中找到_config.yml，对照Butterfly官方文档进行个性化设置。
由于大陆互联网的特殊性，建议使用url的方式添加图片。

我的个性化设置

修改网站底部的页脚

我把网站底部的页脚footer修改成了这样：
毛玻璃效果其在themes\butterfly\source\css\_layout\footer.styl的代码如下：

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#footer
  position: relative
  background-color: transparent  // 设置背景为透明
  background-attachment: scroll
  background-position: bottom
  background-size: cover

  if hexo-config('footer_img') != false && hexo-config('mask.footer')
    &:before
      position: absolute
      width: 100%
      height: 100%
      background-color: rgba(255, 255, 255, 0.5)  // 设置半透明背景
      backdrop-filter: blur(50px)  // 添加毛玻璃效果
      content: ''

加入Latex数学公式

加入了对latex数学公式的识别(参考文章)，并设置为需要在文章的 Front-matter 添加mathjax: true，对应的文章加载数学公式渲染引擎，latex效果如下：

加入字数统计和阅读时长统计

以及添加了字数统计和阅读时长统计，先安装hexo-wordcount插件yarn add hexo-wordcount --save，然后在~/Blog/theme/butterfly下的_config.yml中找到wordcount:这一行，按照注释修改即可。

加入加载动画

加入加载动画，先在~/Blog/theme/butterfly/source/css下创建flash.css并编辑，内容如下源代码链接：

css
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
.pace {
	-webkit-pointer-events: none;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.pace-inactive {
	display: none;
}

.pace .pace-progress {
	background: #29d;
	position: fixed;
	z-index: 2000;
	top: 0;
	right: 100%;
	width: 100%;
	height: 2px;
}

.pace .pace-progress-inner {
	display: block;
	position: absolute;
	right: 0px;
	width: 100px;
	height: 100%;
	box-shadow: 0 0 10px #29d, 0 0 5px #29d;
	opacity: 1.0;
	-webkit-transform: rotate(3deg) translate(0px, -4px);
	-moz-transform: rotate(3deg) translate(0px, -4px);
	-ms-transform: rotate(3deg) translate(0px, -4px);
	-o-transform: rotate(3deg) translate(0px, -4px);
	transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
	display: block;
	position: fixed;
	z-index: 2000;
	top: 15px;
	right: 15px;
	width: 14px;
	height: 14px;
	border: solid 2px transparent;
	border-top-color: #29d;
	border-left-color: #29d;
	border-radius: 10px;
	-webkit-animation: pace-spinner 400ms linear infinite;
	-moz-animation: pace-spinner 400ms linear infinite;
	-ms-animation: pace-spinner 400ms linear infinite;
	-o-animation: pace-spinner 400ms linear infinite;
	animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
	0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
	0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
	0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
	0% { transform: rotate(0deg); transform: rotate(0deg); }
	100% { transform: rotate(360deg); transform: rotate(360deg); }
}

然后在~/Blog/theme/butterfly下的_config.yml中找到preloader:编辑如下：
yml
1
2
3
4
5
6
7
# Loading Animation
preloader:
  enable: true
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 2
  pace_css_url: /css/flash.css

设置背景特效

在~/Blog/theme/butterfly下的_config.yml中找到canvas_nest:编辑如下:

yml
1
2
3
4
5
6
7
8
9
10
11
12
13
# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  # Color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  color: '240,240,240'
  # The opacity of line (0~1)
  opacity: 0.7
  # The z-index property of the background
  zIndex: -1
  # The number of lines
  count: 150
  mobile: false

效果如图：
效果如图

一些小技巧

修改hexo的_config.yml文件后，可以输入hexo config test来检查配置文件是否正确。以及输入hexo --debug可以查看调试信息，方便排查问题。
还可以使用其他命令行参数来获取特定的调试信息。例如，hexo g --debug（生成静态文件时显示调试信息）或 hexo s --debug（启动服务器时显示调试信息）。
在hexo s时可以修改目录下的配置文件，例如_config.yml，source/_posts等，来实时预览效果。