一、背景
我在部署基于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"
skip_render:
- "404.html"最后：打开cmd依次输入下述代码，在本地浏览器查看渲染结果。
hexo clean
hexo generate
hexo s可直接在localhost:4000后添加/404.html来查看自己的个性化404页面效果。
三、个性化404页面代码
<!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>