Hexo自定义404页面

发表于 分类于 ， 本文字数： 382 阅读时长 ≈ 1 分钟

自定义 404 页面

首先，创建一个名为 404 的 post

1
hexo new 404

在对应的 md 文件中，我们可以自定义 404 页面。由于 Hexo 框架的特性，我们可以编写 JS 脚本，让页面动起来。

这里给出我的 404 页面。可以看到，上面有一个倒计时。当倒计时为 0 时，会自动跳转到首页。当然，用户也可以手动点击，从而返回首页。

下面是对应的代码，直接放在 md 文件中即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="./../js/jquery-3.3.1.min.js"></script>

<div align="center">您正在访问一个不存在的地址🤔</div>
<div align="center">系统会在 <span id="seconds">10</span> 秒后自动跳转到首页,</div>
<div align="center"> 您也可以点此 <a target="_self" href="/" >链接</a>, 手动跳转!</div>

<script>
    $(function () {
        setInterval(function () {
            var seconds = $("#seconds").text();
            $("#seconds").text(--seconds);
            if (seconds == 0) {
                location.href = "/";
            }
        }, 1000);
    });
</script>

我选择将 jQuery 代码放在本地，这样页面响应更快。

jQuery 在这里只是用于获取 DOM 对象，因此也完全可以用原生 JS 函数来写。

如何让网站跳转到自定义页面？

注意：以下方法仅限于 Github Pages，其他平台的方式可能不同。

在front-matter中添加如下内容，Github Pages 就能设置该页面为 404 页面

1
permalink: /404.html

不妨随机访问一个不存在的网页？看看效果如何：▶ 点我

参考文章

Creating a custom 404 page for your GitHub Pages site

theme-next: custom-pages