一、主题插件

1.搜索插件

我们在这里选择本地搜索插件,需要在博客中进行搜索插件的安装:

1
npm install hexo-generator-search --save

然后再网站配置 _config.yml 文件中添加代码

1
2
3
4
5
6
# hexo-generator-search
search:
path: search.xml
field: post # 可选值:post(文章)、page(页面)、all(所有)
format: html
limit: 10000

然后再主题配置 _config.yml 文件中,找到如下代码,并修改其中的 use 后面的内容为 local_search

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
# --------------------------------------
# Search
# --------------------------------------

search:
# Choose: algolia_search / local_search / docsearch
# leave it empty if you don't need search
use: local_search
placeholder:

# Algolia Search
algolia_search:
# Number of search results per page
hitsPerPage: 6

# Local Search
local_search:
# 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
# Enable pagination for search results
pagination:
enable: false
# Number of search results per page
hitsPerPage: 8
CDN:

# Docsearch
# https://docsearch.algolia.com/
docsearch:
appId:
apiKey:
indexName:
option:

其他任何地方不做修改,最后重新生成网站内容。

二、主题页面

1.友情链接

使用如下代码创建友情链接的页面文档

1
hexo new page link

然后进入博客的根目录中,找到你會找到 source/link/index.md 文件,并修改为如下

1
2
3
title: 友情鏈接
date: 2026-09-24 10:24:40
type: 'link'

然后,在博客的根目录中的 source/_data(如果沒有 _data 文件夹,自行创建这个文件夹),在文件夹中创建 link.yml 文件,然后借助演示数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- class_name: 友情鏈接
class_desc: 那些人,那些事
link_list:
- name: Hexo
link: https://hexo.io/zh-tw/
avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
descr: 快速、簡單且強大的網誌框架

- class_name: 精彩網站
class_desc: 值得推薦的網站
link_list:
- name: Youtube
link: https://www.youtube.com/
avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
descr: 視頻網站
- name: Weibo
link: https://www.weibo.com/
avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
descr: 中國最大社交分享平台
- name: Twitter
link: https://twitter.com/
avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
descr: 社交分享平台

三、主题美化

给Hexo + Butterfly添加雪花动态效果背景,效果很炫酷,操作很简单。

首先在\themes\butterfly\source\js目录下新建一个snowflake.js文件,然后将以下内容写入该文件:

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
// 移动端不显示
}
else{
document.write('<canvas id="snow" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;pointer-events:none"></canvas>');

window && (()=>{
let e = {
flakeCount: 50,
minDist: 150,
color: "255, 255, 255",
size: 2,
speed: .5,
opacity: .2,
stepsize: .5
};
const t = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(e) {
window.setTimeout(e, 1e3 / 60)
}
;
window.requestAnimationFrame = t;
const i = document.getElementById("snow"),
n = i.getContext("2d"),
o = e.flakeCount;
let a = -100,
d = -100,
s = [];
i.width = window.innerWidth,
i.height = window.innerHeight;
const h = ()=>{
n.clearRect(0, 0, i.width, i.height);
const r = e.minDist;
for (let t = 0; t < o; t++) {
let o = s[t];
const h = a,
w = d,
m = o.x,
c = o.y,
p = Math.sqrt((h - m) * (h - m) + (w - c) * (w - c));
if (p < r) {
const e = (h - m) / p,
t = (w - c) / p,
i = r / (p * p) / 2;
o.velX -= i * e,
o.velY -= i * t
} else
o.velX *= .98,
o.velY < o.speed && o.speed - o.velY > .01 && (o.velY += .01 * (o.speed - o.velY)),
o.velX += Math.cos(o.step += .05) * o.stepSize;
n.fillStyle = "rgba(" + e.color + ", " + o.opacity + ")",
o.y += o.velY,
o.x += o.velX,
(o.y >= i.height || o.y <= 0) && l(o),
(o.x >= i.width || o.x <= 0) && l(o),
n.beginPath(),
n.arc(o.x, o.y, o.size, 0, 2 * Math.PI),
n.fill()
}
t(h)
}
, l = e=>{
e.x = Math.floor(Math.random() * i.width),
e.y = 0,
e.size = 3 * Math.random() + 2,
e.speed = 1 * Math.random() + .5,
e.velY = e.speed,
e.velX = 0,
e.opacity = .5 * Math.random() + .3
}
;
document.addEventListener("mousemove", (e=>{
a = e.clientX,
d = e.clientY
}
)),
window.addEventListener("resize", (()=>{
i.width = window.innerWidth,
i.height = window.innerHeight
}
)),
(()=>{
for (let t = 0; t < o; t++) {
const t = Math.floor(Math.random() * i.width)
, n = Math.floor(Math.random() * i.height)
, o = 3 * Math.random() + e.size
, a = 1 * Math.random() + e.speed
, d = .5 * Math.random() + e.opacity;
s.push({
speed: a,
velX: 0,
velY: a,
x: t,
y: n,
size: o,
stepSize: Math.random() / 30 * e.stepsize,
step: 0,
angle: 180,
opacity: d
})
}
h()
}
)()
}
)();
}

找到主题配置文件_config.butterfly.yml,在inject的bottom引入该js文件:

1
2
3
4
5
6
7
8
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
bottom:
# - <script src="xxxx"></script>
- <script src="/js/snowflake.js"></script>

顺便分享其他的雪花效果,操作过程也很简单,修改新建的snowflake.js文件:

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
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 1000,
flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
},
options = $.extend({}, defaults, options);
var interval= setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
});
}, options.newOn);
};
})(jQuery);
$(function(){
$.fn.snow({
minSize: 5, /* 定义雪花最小尺寸 */
maxSize: 50,/* 定义雪花最大尺寸 */
newOn: 300 /* 定义密集程度,数字越小越密集 */
});
});

然后跟新,可以看到效果。