背景
我在部署基于Hexo框架的网页时，想加入个性化的404界面。我的网站主题是Fluid，在GitHub上的配置文件说添加404界面，只需要在网站的主目录的/source文件夹下添加404.html文件即可。
但是实际上配置之后的确可以出现个性化的404页面，但是出现了两个问题，一个是banner_img的尺寸不对，没办法像其他页面那样铺满上半部空间，导致header在某些时候被白色背景遮挡，其次页面一直显示page.title，我没有找到更改的办法。
最终通过Google找到一个解决办法，来自于鸣庚亭的方案：hexo博客自定义404页面。
解决办法
第一步：hexo new page 404创建404页面文件夹，这个文件夹会存在于网站的主目录下的/source/404。
第二步：删除/source/404文件夹下的index.md文件。
第三步：创建一个个性化的404.html文件，如果没有代码基础，可以借助ChatGPT或者Claude生成自己喜欢的404页面。
第四步：将你创建好的404.html文件放置于网站主目录的/source/文件夹下
第五步：用VS Code打开主目录下的_config.yml文件，Ctrl + F快捷键搜索skip_render:在这一行添加- "404.html"
1
2
| skip_render:
- "404.html"
|
最后：打开cmd依次输入下述代码，在本地浏览器查看渲染结果。
1
2
3
4
5
| hexo clean
hexo generate
hexo s
|
可直接在localhost:4000后添加/404.html来查看自己的个性化404页面效果。
个性化404页面代码
我是通过ChatGPT的帮助构建的404页面。
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - 页面未找到</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
font-family: 'Arial', sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
max-width: 1200px;
width: 100%;
padding: 20px;
}
.left-side {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.right-side {
flex: 1;
padding: 0 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.left-side img {
max-width: 600px;
width: 100%;
height: auto;
}
h1 {
font-size: 120px;
color: #1A1A1A;
margin: 0 0 20px;
text-align: center;
}
p {
font-size: 24px;
color: #333;
margin-bottom: 30px;
max-width: 600px;
text-align: center;
}
.btn {
display: inline-block;
padding: 16px 50px;
font-size: 20px;
background-color: white;
color: #4CAF50;
text-decoration: none;
border: 2px solid #4CAF50;
border-radius: 50px;
transition: all 0.3s ease;
cursor: pointer;
}
.btn:hover {
background-color: #4CAF50;
color: white;
}
@media (max-width: 1200px) {
h1 {
font-size: 96px;
}
p {
font-size: 20px;
}
.btn {
padding: 14px 40px;
font-size: 18px;
}
}
@media (max-width: 768px) {
.container {
flex-direction: column;
text-align: center;
}
.right-side {
padding: 0 20px;
}
h1 {
font-size: 72px;
}
p {
font-size: 18px;
}
.btn {
padding: 12px 30px;
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left-side">
<img src="#/* 添加你自己的照片（推荐大小为500px×400px） */" alt="404错误插图">
</div>
<div class="right-side">
<h1>404</h1>
<p>哎呀！您迷路了。</p>
<p>您要查看的页面不存在。您是如何到达这里的仍是个谜，不过您可以点击下面的按钮返回首页。</p>
<a href="#/* 自己的网站首页 */" class="btn">返回首页</a>
</div>
</div>
</body>
</html>
|
最后的渲染效果为：
写在最后
希望大家都能构建出自己喜欢的404页面！非常感谢鸣庚亭的解决办法。