自定义404页面

本博客主题 ~~pure，个性化配置可参考 pure主题个性配置~~

已使用hexo-theme-matery主题，发现404效果也可以

看看404效果先

新建 404.html

路径：Hexo根目录/ source 文件夹下

在站点配置文件 `_config.yml` 中设置 404.html 跳过渲染

格式如下：

# 跳过某文件
skip_render: 
# 本例中只有单个文件404.html
# - "404.html"
  - "文件名.文件格式"

# 跳过文件夹下的某个文件
skip_render: 
  - "文件夹名/文件名.文件格式"

# 跳过文件夹下所有文件
skip_render: 
  - "文件夹名/*"

# 跳过文件夹下所有子文件夹和文件
skip_render: 
  - "文件夹名/**"

选择喜欢的404效果html模板

这些模板一般包含index.html、*.js、*.css文件

打开index.html

js替换

在index.html找到*.js

<script src="js/*.js"></script>

将*.js中的代码复制，并将上面的代码改为

<script> *.js文件中的代码 </script>

css替换

在 index.html 找到 *.css

<link rel="stylesheet" href="css/*.css">

将 *.css 中的代码复制，并将上面的代码改为

<style> *.css文件中的代码 </style>

优化

从模板网站下载的的404.html里可能会带其他链接或者不想要的文案，可以简单的更改下。

不想要的链接——删除或者更改为自己blog的链接
不想显示的内容——可以找到该内容的div进行一个隐藏操作

# div的visibility属性可以控制div的显示和隐藏，但是隐藏后页面显示空白
style="visibility: none"

# div的display属性可以使div隐藏后释放占用的页面空间
style="display: none"

# 例子
<div id="lb" style="display:none">
	<font>div属性：style ="display:none" 默认隐藏div</font>
</div>