在Hexo博客上创建一个有趣的404页面

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 6.1k 阅读时长 ≈ 6 分钟

By LongLuo

一、什么是404页面？

想必大家都有过这样的经历，好不容易看到搜索引擎出现了我们想要找了很久的内容，兴冲冲点进去，然而出现在屏幕上的却是一个大大404？仿佛在逗你玩？WTF？

不用怀疑，你想要的页面丢失了。

404错误信息通常是在目标页面被更改或移除，或客户端输入页面地址错误后显示的页面。

那么，404除了代表你所要浏览的页面丢失外，你是否知道它的产生原理呢？

不仅如此，在庞大的互联网中除了404还有哪些HTTP状态码？它们又分别代表着什么？

正如上面所述，404是一种标准的HTTP返回代码，官方称其为HTTP状态码，用来表示网页服务器HTTP的响应状态。

由于网站日志通常会记录下HTTP状态码，因此通过查看网站日志中的HTTP状态码，便可清楚地看到网站服务器与客户端之间的信息交换情况。

1.1 HTTP状态码

下面是常见的HTTP状态码：

  • 200 - 请求成功
  • 301 - 资源（网页等）被永久转移到其它URL
  • 404 - 请求的资源（网页等）不存在
  • 500 - 内部服务器错误

1.1.1 HTTP状态码分类

HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。

HTTP状态码共分为5种类型：

分类分类描述
1xx信息，服务器收到请求，需要请求者继续执行操作
2xx成功，操作被成功接收并处理
3xx重定向，需要进一步的操作以完成请求
4xx客户端错误，请求包含语法错误或无法完成请求
5xx服务器错误，服务器在处理请求的过程中发生了错误

HTTP状态码列表:

状态码状态码英文名称中文描述
100Continue继续。客户端应继续其请求
101Switching Protocols切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
200OK请求成功。一般用于GET与POST请求
201Created已创建。成功请求并创建了新的资源
202Accepted已接受。已经接受请求，但未处理完成
203Non-Authoritative Information非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204No Content无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205Reset Content重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206Partial Content部分内容。服务器成功处理了部分GET请求
300Multiple Choices多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301Moved Permanently永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302Found临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303See Other查看其它地址。与301类似。使用GET和POST请求查看
304Not Modified未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305Use Proxy使用代理。所请求的资源必须通过代理访问
306Unused已经被废弃的HTTP状态码
307Temporary Redirect临时重定向。与302类似。使用GET请求重定向
400Bad Request客户端请求的语法错误，服务器无法理解
401Unauthorized请求要求用户的身份认证
402Payment Required保留，将来使用
403Forbidden服务器理解请求客户端的请求，但是拒绝执行此请求
404Not Found服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置”您所请求的资源无法找到”的个性页面
405Method Not Allowed客户端请求中的方法被禁止
406Not Acceptable服务器无法根据客户端请求的内容特性完成请求
407Proxy Authentication Required请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
408Request Time-out服务器等待客户端发送的请求时间过长，超时
409Conflict服务器完成客户端的 PUT 请求时可能返回此代码，服务器处理请求时发生了冲突
410Gone客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
411Length Required服务器无法处理客户端发送的不带Content-Length的请求信息
412Precondition Failed客户端请求信息的先决条件错误
413Request Entity Too Large由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
414Request-URI Too Large请求的URI过长（URI通常为网址），服务器无法处理
415Unsupported Media Type服务器无法处理请求附带的媒体格式
416Requested range not satisfiable客户端请求的范围无效
417Expectation Failed服务器无法满足Expect的请求头信息
500Internal Server Error服务器内部错误，无法完成请求
501Not Implemented服务器不支持请求的功能，无法完成请求
502Bad Gateway作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503Service Unavailable由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504Gateway Time-out充当网关或代理的服务器，未及时从远端服务器获取请求
505HTTP Version not supported服务器不支持请求的HTTP协议的版本，无法完成处理

1.2 404页面的作用

  1. 避免出现死链接 网站设置404页面后，如果网站出现死链接，搜索引擎蜘蛛爬行这类网址得到“404”状态回应时，即知道该URL已经失效，便不再索引该网页，并向数据中心反馈将该URL表示的网页从索引数据库中删除。避免因为死链接影响网站收录。

  2. 提升用户体验 404页面通常为用户访问了网站上不存在或已删除的页面，服务器返回404错误页面，告诉浏览者其所请求的页面不存在或链接错误，同时引导用户使用网站其他页面而不是关闭窗口离开，消除用户的挫败感。

  3. 避免信任度下降 搜索引擎通过HTTP状态码来识别网页的状态。当搜索引擎获得了一个错误链接时，网站应该返回404状态码，告诉搜索引擎放弃对该链接的索引。而如果返回200或302状态码，搜索引擎就会为该链接建立索引，这导致大量不同的链接指向了相同的网页内容。结果是，搜索引擎对该网站的信任度大幅降低。很多网站存在这个问题：404页面返回的是200或302状态码而不是404状态码。

  4. 避免被惩罚 有些网站由于应用了一些错误的服务器配置，导致返回的是200状态码或是302状态码，虽然这些状态码对访问网站的用户没有影响，但是却会误导搜索引擎，使搜索引擎认为该页面是有效页面，从而抓取下来。如果404页面过多，就造成了大量的重复页面，很有可能被搜索引擎认为是作弊而遭到惩罚

二、在Hexo上创建404页面

直接在命令行输入：

1
hexo new page "404"

或者直接在博客根目录source文件夹下建立一个404文件夹，再新建一个index.md的文件，文件内容为:

1
2
3
4
5
---
title: '404 Not Found：该页无法显示'
comments: false
permalink: /404
---

index.md是可以添加html页面，比如添加一个公益寻人页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: '404 Not Found：该页无法显示'
comments: false
permalink: /404
---
<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8" />
         <title>404</title>                            
    </head>
    <body>
         <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回首页" homePageUrl="http://longluo.me"></script>
	</body>
</html>

部署在我的个人网站上效果如下：博客上的404

三、有趣的404页面

上述404页面太简单的，实际上网络有很多有创意的404页面，比如：

The Best 404 Pages: 37 Examples You Need to See

404 page design: best practices and awesome examples

20 Top Examples of 404 Error Pages

我个人比较喜欢这个超级简洁的：

Designernews

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>(404) The page you were looking for doesn't exist.</title>
  <link rel="stylesheet" type="text/css" href="//cloud.typography.com/746852/739588/css/fonts.css" />
  <style type="text/css">
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    body {
      font-family: "Whitney SSm A", "Whitney SSm B", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
      background-color: #2D72D9;
      color: #fff;
      -moz-font-smoothing: antialiased;
      -webkit-font-smoothing: antialiased;
    }

    .error-container {
      text-align: center;
      height: 100%;
    }

    @media (max-width: 480px) {
      .error-container {
        position: relative;
        top: 50%;
        height: initial;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }

    .error-container h1 {
      margin: 0;
      font-size: 130px;
      font-weight: 300;
    }

    @media (min-width: 480px) {
      .error-container h1 {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }

    @media (min-width: 768px) {
      .error-container h1 {
        font-size: 220px;
      }
    }

    .return {
      color: rgba(255, 255, 255, 0.6);
      font-weight: 400;
      letter-spacing: -0.04em;
      margin: 0;
    }

    @media (min-width: 480px) {
      .return {
        position: absolute;
        width: 100%;
        bottom: 30px;
      }
    }

    .return a {
      padding-bottom: 1px;
      color: #fff;
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.6);
      -webkit-transition: border-color 0.1s ease-in;
      transition: border-color 0.1s ease-in;
    }

    .return a:hover {
      border-bottom-color: #fff;
    }
  </style>
</head>

<body>

<div class="error-container">
  <h1>404</h1>
  <p class="return">Take me back to <a href="/">designernews.co</a></p>
</div>

</body>
</html>