hexo博客做一个404界面

hexo的是支持404界面的，使用起来很简单，只需要在hexo的source文件里面创建一个404.md 以及在主题的layout文件夹下创建一个404.ejs文件，然后想显示的内容直接填写在404.ejs里面就行了。
在404界面是在matery主题上做的，对于不同的主题方法类似，要根据具体的主题而定。

欢迎访问我的博客hehung：如何做一个好看的404界面

 

先展示一下效果：

 

显示效果

 

新建一个404.md文件

  在hexo的souce文件夹下创建一个404.md，之后输入如下内容：

 

markdown

 

---
title: 404
date: 2019-11-23 21:10:10
type: "404"
layout: "404"
---

  如下图所示：

 

创建404.md

 

新建一个404.ejs文件

  在layout文件夹下创建404.ejs文件，可以在这里写入html，CSS和JS内容，也就是要在网页上进行显示的页面。

 

新建404.ejs文件

 

  写入如下内容就可以在页面上显示404的内容了：

 

html

 

 

  
    
 
        

            

                

                    

                        404
                    
                    

                    

                        你要找的页面飞走了
                    
                
            
        

    
 

 

但是这个页面不好看，所以我就在网上找到了一个比较好看的404页面，就是上面展示的那种，下面就讲解如何将这个页面嵌入到我们的网页中去。

下载404特效

点击下载代码:点我去代码出处

移植

放入js文件到主题中

  将下载的压缩包解压，会发现里面有两个js文件和一个html页面，重要的就是js文件，将文件移植到主题的source文件的libs文件夹下，需要自己创建一个文件夹，我给文件夹取的名字叫做my404。

 

移动js文件

 

导入js文件

  因为该主题的js文件都是写_config.yml文件里面的，为了规范，也需要将文件的路径写到该文件夹下

  如下，之后导入js文件的时候就可以使用my404bodymovin和my404data来代替了

 

写入路径

 

  现在可以打开404.ejs文件开始移植该特效了。

编辑404.ejs文件

  在该文件里面写入如下代码：

 

html

 

  现在就移植成功了，使用下面命令上传，之后输入一个错误的页面就可以查看到了

 

hexo

 

hexo cl && hexo g -d

 

PS:不要再本地试验，本地的时候输入错误的页面不会显示404页面的。
对页面显示的宽和高是可以进行调整的，最开始不是100%，我是为了美观改成了100%，直接调整选择器svgContainer里面的内容就行了

写在最后

由于我把该主题的图片显示的遮罩去掉了，导致显示404页面的时候导航栏的文字看不见，因为字是白色的，所以需要修改导航栏的字体颜色，但是有不希望修改全局的主题颜色，所以就在该404.ejs文件夹下加入几个CSS选择器内容就行修改就行了。如下所以，加入如下内容即可：

 

CSS

 

    header .brand-logo .logo-span {
      color: #222;
    }

    header .nav-menu li i {
      color: #222;
    }

    header .nav-menu li span {
      color: #222;
    }

    header .button-collapse i {
      color: #222;
    }