本文章最初发表在XJHui’s Blog，未经允许，任何人禁止转载！

为使您获得最好的阅读体验，强烈建议您点击这里前往 XJHui’s Blog 查看！

前言

本教程仅适用于部署在Zeit.co的个人网站。

我的博客使用的是Hexo框架+Butterfly主题+GitHub仓库+Zeit.co部署+又拍云CDN（这不是在打广告，很认真的在写博客），主题配置文件中有404页面的具体设置：

这样配置能渲染出404页面：

但当你真正404时：

配置好404后也没有测试过，一直以为我的404页面是正常的…

踩坑经历

这里记录踩坑经历，想跳过的可以直接传送到这里。

百度找到Yavin的这篇文章中有说解决方法：

创建now.json文件：
```
{"version": 2,"routes": [{ "handle": "filesystem" },{ "src": "/(.*)", "status": 404, "dest": "/404.html" }]
}
```
并把它放到根目录（我当时认为是Hexo的根目录），hexo g 后自动在/public下生成now.json文件：

于是我兴奋的hexo d后发现提交至Zeit.co仓库失败了：

英文看不懂？就是说生成的json文件不符合规范（存在语法错误），仔细看上图会发现json文件中包含了JavaScript，至于为什么会这样至今我也不知道，如果您知道原因欢迎到评论区留言（失败）。
于时更换了now.json文件位置，把他放在了主题的根目录，结果发现hexo g后在/public文件夹下未生成now.json文件（失败）。
既然无法生成，那我就直接到GitHub仓库，创建now.json文件并把上面的代码沾了进去，再次提交竟然成功了，这才明白原来Yavin说的根目录是指仓库根目录，但这样做存在的问题是下次hexo d后now.json文件会直接被删掉（失败）。
我知道hexo d其实就是把/public中的文件上传到仓库。想把json文件放到仓库根目录其实就是先放到/public中，于时开始想哪里的文件hexo g后能直接生成在/public中，看了一眼仓库中的文件：

有点熟悉呀，这三个文件夹不就是主题根目录/source（不是hexo根目录下的/source）中的三个文件夹？：

于时我很开心的把now.json文件放进了/source中

哈哈，测试没问题，终于解决了。

解决404页面无法显示

本博客提供的方法仅在Hexo博客框架下Butterfly主题测试，其余框架或主题可自行尝试。

若您的主题使用了页面压缩（gulp…），需要先排除掉conf.json这个文件。

在主题根目录/source下新建now.json文件，粘贴下面的代码：

{"version": 2,"routes": [{ "handle": "filesystem" },{ "src": "/(.*)", "status": 404, "dest": "/404.html" }]
}

注：该json文件会调用404.html，所以要保证仓库根目录有404.html文件，当然也可以写成其他文件（也为下面自定义404页面创造可能）。

感谢：Yavin

自定义404页面

主题404页面可配置项不多（仅支持修改背景图片），但你可以按照本教程让你的博客拥有喜欢的404页面

当然你可以去修改404的pug文件，但我实在是不想动源代码（主要是怕博客报错，然后gg）

先上gif，看看我的404页面：

404页面代码来自CodePen，感谢！

其实很简单，大致思路是新建page页面 -> 禁止渲染该页面 -> 修改json.now文件。

新建page页面

怎么创建应该都会吧，这里以404为例：

hexo new page 404

别担心这个404会渲染出404.html然后与原有的404.html冲突，因为page页渲染出来的是/404/index.html

创建后的文件：

禁止渲染

为什么要禁止渲染？如果不禁止会像其他页面那样被加上顶部图、页脚…

主要有两种方法，想具体学习的可以看这篇文章，本篇教程指介绍一种我认为简单的：

index.md中添加：
```
layout: false
```
插入html代码时，使用标签：
```
{% raw %}
...
html
...
{% endraw %}
```

例如：

如果喜欢我的404页面，可以使用下面的代码（太长了，使用PasteMe平台）：

点击查看代码，点击该位置可以直接复制哦：

说起PasteMe，又让我想起来iamzxf，还是很感谢他…

修改`now.json`文件

来到了最后一步，离成功又近了一步。

将原now.json文件中的：

"dest": "/404.html"

修改为：

"dest": "/404/"

至于为什么这样修改，应该很好理解，不多解释了。

不足之处，欢迎留言，评论会及时回复，错误会及时更正！

创作不易，感谢支持！

最后的最后，欢迎访问我的个人博客XJHui’s Blog。

给你的Zeit page自定义404页面相关推荐

【Laravel】自定义404页面
前言: 查看了一些网上的方法,很多都是使用自定义异常类来处理自定义404页面,我只是想用 Laravel8自带异常类来进行处理,所以记录一下自己的方法. 方法: 文件: app\Exceptions\ ...
html页面在ie上出现404怎么解决,如何解决自定义404页面在IE等浏览器中无法显示问题...
网站设置自定义404页面之后(如何在IIS下正确设置404页面?),如无法在浏览器中正常显示,可能是以下原因: 1.404页面文件权限设置错误我们需要为404页面文件添加上用户everyone的可读 ...
怎么自定义服务器的404,如何自定义404页面
404错误页面是WWW网站访问比较经常出现的错误.大家最熟悉的也是最常见的出错提示:404 not found.404页面就是当用户输入了错误的链接时,返回的页面.而默认的404错误页面呆板麻木,让访 ...
自定义404页面并打包docker部署项目
前言最近看了docker的用法,对于容器的理解感觉还行,当是自我感觉总是不靠谱的.所以现在就来使用docker容器实际部署一下项目,检验自己对于知识的掌握. SpringBoot项目和docker的 ...
Magento如何自定义404页面？
Magento修改404页面 Magento有默认的404页面,如果想自定义一个404页面,又该如何做呢? 方法一首先,先来看下默认的404页面: 1.Magento的CMS部分,可以通过定义它来改 ...
html404页面怎么添加,网站要如何设置自定义404页面？
之前我们讲述过网站设置404页面对于优化或是用户体验的重要意义,大家可移步到<网站为什么要设置404页面>查看,今天我们讲解的是网站要如何设置自己的404页面. 现在大多数空间商都有了40 ...
linux中httpd错误页面图片,自定义404页面
呵呵,我看大前端上没有404的相关文章,于是就拿过来了. 自定义404界面.懂得人可以无视,毕竟我是初学者哈. 看我的这个图片: 当然,上面的东西是我自己编的,在出现无法找到所请求的页面的时候,会进行 ...
Django 自定义404页面
目录结构特别说明:我的views.py 已做了拆分 myproject/myproject/settings.pyurls.pymyapp/templates/myapp/404.htmlviews ...
网站怎么自定义404页面
404页面是客户端在浏览网页时,服务器无法正常提供信息,或是服务器无法回应,且不知道原因所返回的页面,简单的说就是当别人访问你网站的某一个已经删除或不存在的网页的时候,服务器自动显示的页面.404页面 ...

给你的Zeit page自定义404页面

前言

踩坑经历

解决404页面无法显示

自定义404页面

新建page页面

禁止渲染

修改`now.json`文件

给你的Zeit page自定义404页面相关推荐

最新文章

热门文章

给你的Zeit page自定义404页面

前言

踩坑经历

解决404页面无法显示

自定义404页面

新建page页面

禁止渲染

修改now.json文件

给你的Zeit page自定义404页面相关推荐

最新文章

热门文章

修改`now.json`文件