Hexo博客自定义404页面

发表于 |

前言

一个成熟的网站当然要有他独特的404页面，使用GitHub Pages部署的博客虽然有GitHub的默认404页面，但显然不够美观，也与我们的网站整体风格不搭。

要实现自定义404其实很简单，只要在网站的根目录放一个404.html文件即可。而对于我们使用的Hexo，则有更合适的处理方法。

操作步骤

第一步 创建404页面

进入hexo站点的根目录，打开终端，输入：

1
hexo n page "404"

将会在source目录下生成一个404文件夹，其中有一个index.md文件，这个文件其实就相当于是404.html了。

第二步 打开index.md，修改头部信息：
1
2
3
4
layout: false
comments: false
title: 404
permalink: /404

注意不要忘了修改permalink，不然不会在根目录下生成404.html。

第三步 编写404页面内容

由于markdown是支持插入html内容的，因此只需要在这个md文件里写入html代码即可。要注意的是html代码之间千万不能有空行，不然会标签识别错误！

类似这样

那么接下来的就是考验你前端编码的能力和审美了。可惜本人不才，让我凭空写一个美观的网页几乎不可能，那只能靠拿来了！

这里推荐一个404模板网站，有非常多美观的404页面，总能找到属于你的菜。

选模板

找一个你喜欢的模板，点击下载源码，里面一般包含了html+js+css。html刚才说了直接贴markdown文档里即可，而js和css可以放到刚才生成的404目录下。

同时别忘了修改html中的css和js引用地址：

1
2
3
4
5
6
7
<!-- 网站icon -->
<link rel="icon" href="/img/favicon.svg">
<!-- css文件 -->
<link rel="stylesheet" type="text/css" href="/404/404.css">
<!-- js文件 -->

<script type="text/javascript" src="/404/404.js"></script>

这样就基本完成了，hexo s看看效果：

404页面

有兴趣的话可以再微调下页面内容即可。

附加思考

  1. 可以直接在_post目录中添加404.md吗?

    答: 可以 不过_post目录下的文本会当做文章收入进主页中, 如果不想在主页和归档列表中看到404页面, 建议还是使用hexo n page指令, 将其单独放置在一个目录中

  2. 404页面和网站整体融合性

    我们发现 上述的方法生成的404页面和网站融合度很高, 可以保留或者移除主题布局, 如果你想单独制作一个和原网站风格不相关的404页面,那么直接自定义一个404.html文件放置到网站根目录即可

本文转载自:https://blog.luzy.top/posts/456645515/

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%