给你的博客做个自定义404页面

有没有觉得在访问一个不存在的页面时,默认的Cannot GET /XXX或者 Github 自带的 404 页面太丑?那就快点进来吧(仅针对 Hexo
成功后的效果图:
效果图

找模板

不会写代码?没关系,网上有一大堆 404 页面模板供你选
百度404模板,选一个你喜欢的,下载下来
百度

配置模板

在你网站的source目录下新建一个404文件夹
404文件夹

把你刚刚下载的模板解压,复制到里面
(注意:文件应该和下面的差不多)
模板文件

打开你的主题配置文件,找到Meun Settings,把commonweal前面的#去掉,把路径改为404/index.html
(注意:||后面的是图标名称,你可以在FontAwesome找到对应的图标名字)
配置文件

修改模板

hexo s打开来实验一下,你可以看到在菜单栏上面多出来一个公益404,点开
WTF?
"404页面"

问题

别着急,我们一个一个来解决
1.底下的这行字肯定要去掉
字

2.英文要汉化成中文
英文

3.还有奇怪的字体
字体

解决方法

网站标记

打开index.htmlCtrl + F搜索模板,也就是刚刚那行字里面的关键字,如果找到了,就把那行全部删掉
"模板"

英文

先把开头的<html lang="en">删掉(如果有)
en

然后是<title>,这是网页的标题,把<title></title>中间的字改成404,其他名字的也行
<title>

再就是内容了,先说一下主要的几个标签:
(下面的标签要改文字都是改中间的内容,比如<h1></h1>中间的内容)

<h>h后面会接 1 - 6 之间的数字,这个标签的作用是生成一个标题(和<title>不一样,<h>是普通的标题,而<title>浏览器标签上的标题
<title>

<p>:就是一个段落

<a>:链接,href后面的是链接

然后就可以改了
代码

字体

打开你的 404 页面,按F12,左边会出现一个控制台(我用的是 Chrome,其他浏览器可能会有点不一样),你要做的是把<head>标签里引入 CSS 样式的元素都一个一个删掉,用排除法
控制台

前面三个都删了,字体还是没有变,所以我们就打开最后一个CSS文件
控制台

找到有font的地方,把后面用单引号引起来的改成微软雅黑
当然,其他字体也行(应该要你电脑里装了的字体)

如果直接输入名字,则需要浏览者的电脑/手机里装有这个字体才行

解决方法:
把要用的字体放在fonts文件夹里,将font-famliy后面的,cursive去掉,在下面加一行
(字体不要太大了,不然加载速度会很慢!)

1
src: url('fonts/你的字体.ttf');

代码

是不是好看多了?
404页面

提交404页面

既然都弄好了,那就hexo d -g放到 GitHu b上去
git控制台

随便访问一个错误的站内链接。怎么还是 GitHub 的 404 页面?
GitHub 404 页面

在 GitHub 的官方文档里面有下面这么一段话
GitHub 官方文档

意思是要你在404.html最前面加上一句permalink: /404.html
(最好在permalink: /404.html的上下两行加上---,不加的话好像不起作用)
改完了,提交,刷新(要等一会再刷新),终于可以了!!!
404页面成功