有没有觉得在访问一个不存在的页面时,默认的Cannot GET /XXX
或者 Github 自带的 404 页面太丑?那就快点进来吧(仅针对 Hexo)
成功后的效果图:
找模板
不会写代码?没关系,网上有一大堆 404 页面模板供你选
百度404模板
,选一个你喜欢的,下载下来
配置模板
在你网站的source
目录下新建一个404
文件夹
把你刚刚下载的模板解压,复制到里面
(注意:文件应该和下面的差不多)
打开你的主题配置文件
,找到Meun Settings
,把commonweal
前面的#
去掉,把路径改为404/index.html
(注意:||
后面的是图标名称,你可以在FontAwesome找到对应的图标名字)
修改模板
hexo s
打开来实验一下,你可以看到在菜单栏上面多出来一个公益404
,点开
WTF?
问题
别着急,我们一个一个来解决
1.底下的这行字肯定要去掉
2.英文要汉化成中文
3.还有奇怪的字体
解决方法
网站标记
打开index.html
,Ctrl + F
搜索模板
,也就是刚刚那行字里面的关键字,如果找到了,就把那行全部删掉
英文
先把开头的<html lang="en">
删掉(如果有)
然后是<title>
,这是网页的标题,把<title>
和</title>
中间的字改成404
,其他名字的也行
再就是内容了,先说一下主要的几个标签:
(下面的标签要改文字都是改中间的内容,比如<h1>
和</h1>
中间的内容)
<h>
:h
后面会接 1 - 6 之间的数字,这个标签的作用是生成一个标题
(和<title>
不一样,<h>
是普通的标题,而<title>
是浏览器标签上的标题)
<p>
:就是一个段落
<a>
:链接,href
后面的是链接
然后就可以改了
字体
打开你的 404 页面,按F12
,左边会出现一个控制台(我用的是 Chrome,其他浏览器可能会有点不一样),你要做的是把<head>
标签里引入 CSS 样式的元素都一个一个删掉,用排除法
前面三个都删了,字体还是没有变,所以我们就打开最后一个CSS文件
找到有font
的地方,把后面用单引号引起来的改成微软雅黑
。
当然,其他字体也行(应该要你电脑里装了的字体)
如果直接输入名字,则需要浏览者的电脑/手机里装有这个字体才行
解决方法:
把要用的字体放在fonts
文件夹里,将font-famliy
后面的,cursive
去掉,在下面加一行
(字体不要太大了,不然加载速度会很慢!)
是不是好看多了?
提交404页面
既然都弄好了,那就hexo d -g
放到 GitHu b上去
随便访问一个错误的站内链接。怎么还是 GitHub 的 404 页面?
在 GitHub 的官方文档里面有下面这么一段话
意思是要你在404.html
最前面加上一句permalink: /404.html
(最好在permalink: /404.html
的上下两行加上---
,不加的话好像不起作用)
改完了,提交,刷新(要等一会再刷新),终于可以了!!!