要自定义hexo的404页面，只要根目录下只要个404.html页面就行了。创建404页面的方法同样适用于创建hexo所有自定义页面。

方法一

来自于知乎贴https://www.zhihu.com/question/21650209，直接在主题的source文件夹下面创建404.html页面。

  • 优点：基于主题的，简单，直接了当
  • 缺点：页面内容只能是独立的，无法共享主题资源和数据，也是不好使用主题css、js以及loyout这些，只适合外链页

如404页面为腾讯公益404页面。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html> 
<html> 
<head>
	<meta charset="utf-8">
	<title>404</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="renderer" content="webkit">    
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head> 
<body> 
	<script src="http://www.qq.com/404/search_children.js" homePageUrl="http://yourdomain.com" homePageName="回到主页"></script> 
</body> 
</html>

方法二

进入命令行，创建类型为page页面

1
2
hexo new page 404

在项目source目录为生成一个404/index.md的页面，内容如下：

1
2
3
4
5
---
title: 404
date: 2015-12-26 09:16:44
---

测试一下，运行hexo s，打开http://localhost:4000/404/看能否浏览，修改一下404.md：

1
2
3
4
5
6
7
---
title: 404
date: 2015-12-26 09:16:44
comments: false #禁止评论
permalink: 404.html #设为固定链接
---

修改这后404页面的链接变成了http://localhost:4000/404.html，这样链接是正确了，但是页面用的是page的布局，怎么才能自定义？

可以在404.md中添加html代码,css样式，折腾出你想要的样式

1
2
3
4
5
6
7
8
9
10
---
title: 404
date: 2015-12-26 09:16:44
comments: false #禁止评论
permalink: 404.html #设为固定链接
---

{% raw %}
<div style="border: 1px solid #ddd">not found</p>
{% endraw %}

这样只能说，太僵硬……要自定义，用的是hexo的layout。每个page或者post都有个layout字段，404.md默认layout为page，修改404.md的layout字段为404：

1
2
3
4
5
6
7
8
---
layout: 404
title: 404
date: 2015-12-26 09:16:44
comments: false #禁止评论
permalink: 404.html #设为固定链接
---

主题中每个页面都有个page.layout的变量，这个的值是我们在markdown文件中定义的layout字段，利用这个变量想怎么改都行了，方法很多，只介绍一种：

_partial文件夹中新建个404.ejs文件，内容就是你自定义的；找到layout/layout.ejs文件，找到<%- body %>，修改成这样：

1
2
3
4
5
6
<%if(page.layout=='404'){%>
	<%- partial('_partial/404') %>
<%}else{%>
<%- body %>
<%}%>

根据自己喜好，原理是判断page.layout变量的值，输出相应的内容。请看我的博客404页面。