虽然 Hexo-Matery 主题自带有一个 404 页面,但是不得不说这个页面真的不是很好看,而且在渲染的时候使用的和主题是几乎一模一样的样式,显得很单调而且没有新意。所以,自己研究了一下怎么添加一个自定义的 404 页面。

一、编写 404 页面

因为是自定义的 404 页面,大家可以发挥自己的创造力或者借鉴大佬的作品(我就不重复造轮子了,我挑了个自己喜欢的模板,嘿嘿~)。

  1. 首先,在根目录source 文件夹下新建一个 404.html 文件(当然你也可以 hexo new page 404 ,但是本篇将不会针对此操作进行讲解,可以自行研究 <因为那样无法本地预览> )。
  2. 然后把准备好的代码复制进刚刚新建的 404.html 文件,保存即可。

后面会给大家几个比较好看的 404 页面,大家可以直接拿去用哦~
详情请见补充!

二、排除 404 页面的渲染

排除 404 页面的渲染有两种方法:

2.1 全局配置

这个比较适合排除大量文件的渲染,一般用于文件较多的时候。但是啊,我是一个有一丢丢强迫症的孩子啊,所我果断选择把所有的需要排除渲染的文件都在全局配置里声明,哪怕目前只有一个这样的文件。

  1. 打开根目录下的 _config.yml 文件,找到 skip_render: 配置项(大概在30行左右)。
  2. 然后加上 [404.html] 即可(可使用正则表达式)。

注意:Hexo 会渲染所有在 source 文件夹里的文件,在根目录下的 _config.yml 文件里的 skip_render 配置项可指定跳过渲染的文件。并且,该配置项支持正则表达式。详情见以下代码。

1
2
3
4
5
skip_render: [
demo/*, # 不渲染 demo 文件夹下所有文件(不包括子文件夹中的文件)
demo/**, # 不渲染 demo 文件夹下所有文件及子文件夹中文件
demo/*.html # 不渲染 demo 文件夹下所有 html 文件
]

还有一点也非常重要:如果你选择用全局配置来忽略某些文件的渲染的话,请务必在本地预览前执行 hexo cl && hexo g 重新生成静态文件,以保证你的修改生效。

2.2 单页面配置

  1. 打开编写好的 404.html 文件。
  2. 在顶行添加代码 layout: false 即可:
1
2
3
4
5
6
layout: false

---

<html>
...

三、部署

最后,一键三连即可(hexo cl && hexo g && hexo d)。

前面提过,如果是新建 404.html 文件的话,是可以进行本地预览的。但是这个预览不能使用 http://localhost:4000/任意字符 来查看,必须使用 http://localhost:4000/404 来进行本地预览。

四、404 页面模板

百度网盘(提取码: gt1h)

预览如下:

图4.1 预览
图4.2 预览
图4.3 预览
图4.4 预览