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

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状态码列表:

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

直接在命令行输入：

hexo new page "404"

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

---
title: '404 Not Found：该页无法显示'
comments: false
permalink: /404
---

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

---
title: '404 Not Found：该页无法显示'
comments: false
permalink: /404
---


    
         
                                     
    
    
         
    

部署在我的个人网站上效果如下：博客上的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

  
  
  
  





  
404
  
Take me back to designernews.co

原文链接：在Hexo博客上创建一个有趣的404页面