L
O
A
D
I
N
G

自定义404页面

404
hexo
发布日期:   2024-02-01
更新日期:   2024-05-22
文章字数:   2k
阅读时长:   10 分
阅读次数:  

自定义404

一个好的404页面能够友好地向用户解释页面未找到的原因，帮助用户继续浏览网站，从而提升用户体验。当用户访问到404页面时，如果页面设计得吸引人、有趣或富有创意，用户可能会停留更长时间，从而减少用户的流失。

虽然matery主题自带有404页面，但是不够好看，可玩性也不足。所以我决定修改404页面，大家可以选择自己DIY或者借鉴网络上大佬的作品。经过我的精挑细选，我选用的是Andrew Lawendy大佬的作品

演示效果

404

修改步骤

  1. 将原来source目录下的404.md文件删除，新建404.html

    原404.md代码：

    ---
title: 404
date: 2019-07-19 16:41:10
type: "404"
layout: "404"
description: "你似乎来到了没有知识的荒原~~~"
---

    粘贴以下代码

    <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Parallax 404 page</title>
    <link rel="stylesheet" href="css/404.css" />
    <script type="text/javascript" src="js/404.js"></script>
</head>

<body>
    <div id="not-found" class="not-found parallax">
        <div class="sky-bg"></div>
        <div class="wave-7"></div>
        <div class="wave-6"></div>
        <a href="index.html" class="wave-island">
            <img src="http://res.cloudinary.com/andrewhani/image/upload/v1524501929/404/island.svg" alt="Island">
        </a>
        <div class="wave-5"></div>
        <div class="wave-lost wrp">
            <span>4</span>
            <span>0</span>
            <span>4</span>
        </div>
        <div class="wave-4"></div>
        <div class="wave-boat">
            <img class="boat" src="http://res.cloudinary.com/andrewhani/image/upload/v1524501894/404/boat.svg"
                alt="Boat">
        </div>
        <div class="wave-3"></div>
        <div class="wave-2"></div>
        <div class="wave-1"></div>
        <div class="wave-message">
            <p>You seem lost</p>
            <p>Click on the island to return</p>
        </div>
    </div>
</body>

</html>

    注意：<a href="index.html" class="wave-island">，请将href设置为想要跳转的页面

  2. 将CSS代码添加到主题中：

    在matery/source/css下，新建404.css，粘贴以下代码(注意修改图片的路径)

    body {
    overflow: hidden;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
}

.not-found {
    position: relative;
    overflow: hidden;
    margin: -1vh -20vw;
    height: 110vh;
}

.not-found [class*=wave] {
    position: absolute;
}

.not-found div {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

.not-found div.wave-1 {
    background: url(../404/wave-1.svg);
}

.not-found div.wave-2 {
    background: url(../404/wave-2.svg);
}

.not-found div.wave-3 {
    background: url(../404/wave-3.svg);
}

.not-found div.wave-4 {
    background: url(../404/wave-4.svg);
}

.not-found div.wave-5 {
    background: url(../404/wave-5.svg);
}

.not-found div.wave-6 {
    background: url(../404/wave-6.svg);
}

.not-found div.wave-7 {
    background: url(../404/wave-7.svg);
}

.not-found div.sky-bg {
    background: url(../404/bg.svg);
    height: 100%;
}

.not-found div[class*=wave] {
    opacity: 0.99;
}

.not-found div[class*=wave]:not(.wave-4) {
    height: calc(100% - 350px);
}

.not-found div.wave-4 {
    height: calc(100% - 530px);
}

.not-found .boat {
    position: absolute;
    top: 0;
    right: 15%;
    width: 150px;
    animation: boat 15s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

.not-found .wave-lost {
    position: absolute;
    top: 20%;
    left: 50%;
    color: #fff;
    font-size: 20rem;
    animation: surf 2s;
}

@media (max-width: 768px) {
    .not-found .wave-lost {
        font-size: 13rem;
        left: 16%;
    }
}

@media (max-width: 992px) {
    .not-found .wave-lost {
        font-size: 20rem;
        left: 22%;
    }
}

.not-found .wave-lost span {
    float: left;
    animation: float 3s ease-in infinite;
}

.not-found .wave-lost span:nth-child(2) {
    animation-delay: 2.5s;
}

.not-found .wave-lost span:nth-child(3) {
    animation-delay: 4.5s;
}

.not-found .wave-island {
    position: absolute;
    top: 40px;
    left: 20%;
    padding: 10px;
    width: 170px;
}

.not-found .wave-message {
    position: absolute;
    bottom: 100px;
    left: 50%;
    padding-right: 50%;
    height: auto !important;
    color: #fff;
    font-size: 3rem;
    text-align: left;
    animation: wave-message 1s;
}

@media (max-width: 768px) {
    .not-found .wave-message {
        left: 16%;
        font-size: 1.8rem;
    }
}

@media (max-width: 992px) {
    .not-found .wave-message {
        left: 22%;
        font-size: 3rem;
    }
}

@keyframes boat {
    0% {
        transform-origin: left;
        transform: rotate(-15deg) translate3d(400px, 0px, 0px);
    }

    20% {
        transform-origin: left;
        transform: rotate(15deg) translate3d(-20vw, 0, 0px);
    }

    25% {
        transform-origin: left;
        transform: rotate(-7deg) translate3d(-25vw, 0, 0px);
    }

    50% {
        transform-origin: left;
        transform: rotate(5deg) translate3d(-50vw, 0, 0px);
    }

    60% {
        transform-origin: left;
        transform: rotate(-1deg) translate3d(-60vw, 0, 0px);
    }

    100% {
        transform-origin: left;
        transform: rotate(2deg) translate3d(-100vw, 0, 0px);
    }
}


@keyframes float {

    0%,
    100% {
        transform: rotate(3deg) translate3d(0px, -10px, 0px);
    }

    50% {
        transform: rotate(-3deg) translate3d(0px, 10px, 0px);
    }
}

@keyframes surf {
    0% {
        transform-origin: right;
        transform: rotate(15deg) translate3d(0, 800px, 0);
    }

    30% {
        transform-origin: right;
        transform: rotate(15deg) translate3d(0, 500px, 0);
    }

    100% {
        transform-origin: right;
        transform: rotate(0) translate3d(0, 0, 0px);
    }
}

@keyframes wave-message {
    0% {
        transform: translate3d(0, 120%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

  3. 将JS代码添加到主题中：

    matery/source/js下，新建404.js，粘贴以下代码

    var parallax = function (e) {
  var windowWidth = window.innerWidth;
  if (windowWidth < 768) return;

  var parallax = document.querySelector('.parallax');
  var halfFieldWidth = parallax.offsetWidth / 2;
  var halfFieldHeight = parallax.offsetHeight / 2;
  var fieldPos = parallax.getBoundingClientRect();
  var x = e.pageX;
  var y = e.pageY - fieldPos.top;
  var newX = (x - halfFieldWidth) / 30;
  var newY = (y - halfFieldHeight) / 30;

  var waveElements = document.querySelectorAll('.parallax [class*="wave"]');
  waveElements.forEach(function (element, index) {
    element.style.transition = "";
    element.style.transform = "translate3d(" + index * newX + "px," + index * newY + "px,0px";
  })
},
  stopParallax = function () {
    var waveElements = document.querySelectorAll('.parallax [class*="wave"]');

    waveElements.forEach(function (element) {
      element.style.transform = "translate(0px, 0px)";
      element.style.transition = "all 0.7s";
    })

    setTimeout(function () {
      waveElements.forEach(function (element) {
        element.style.transition = "";
      })
    }, 700)
  }

window.onload = function () {
  document.getElementById("not-found").addEventListener("mousemove", parallax);
  document.getElementById("not-found").addEventListener("mouseleave", stopParallax);
}

  4. 配置主题以使用404页面：

    • 打开Hexo博客根目录下的 _config.yml 文件。查找是否有配置项用于指定404页面，例如not_found,将其设置为 404.html 或你的自定义404页面文件名。

    • 跳过404页面渲染，在上面打开的_config.yml中，找到 skip_render 配置项，加入404.html

      skip_render:  
  - "README.md"
  - aboutme/**  # 意思为在对文件进行渲染时跳过aboutme文件下的所有文件
  - 404.html

      请先使用hexo cl & hexo g & hexo s重新生成页面，再输入http://localhost:4000/404进行效果预览

  5. 重新生成并部署博客：

    运行以下命令重新生成并部署Hexo博客：

    hexo cl & hexo g & hexo d

    刷新你的博客，现在应该能够看到自定义的404页面了。

理解HTTP状态码

信息响应（100–199）

  • 100 Continue（继续）：服务器已收到请求头，客户端应继续发送请求体。

  • 101 Switching Protocols（切换协议）：请求者要求服务器切换协议。

成功响应（200–299）

  • 200 OK（成功）：请求成功。

  • 201 Created（已创建）：请求成功，并创建了新的资源。

  • 204 No Content（无内容）：服务器成功处理请求，但没有额外的内容要发送。

重定向消息（300–399）

  • 301 Moved Permanently（永久移动）：所请求的资源已被永久移动。

  • 302 Found（或307 Temporary Redirect）：所请求的资源暂时存放在不同的URI下。

  • 304 Not Modified（未修改）：自请求指定的版本以来，资源未被修改。

客户端错误响应（400–499）

  • 400 Bad Request（错误请求）：服务器无法理解请求。

  • 401 Unauthorized（未授权）：请求要求用户身份验证。

  • 403 Forbidden（禁止）：服务器理解请求，但拒绝授权。

  • 404 Not Found（未找到）：服务器未找到请求的资源。

  • 405 Method Not Allowed（方法禁用）：请求中指定的方法不被允许。

  • 408 Request Timeout（请求超时）：服务器等待请求时发生超时。

服务器错误响应（500–599）

  • 500 Internal Server Error（服务器内部错误）：遇到意外条件，服务器无法完成请求。

  • 502 Bad Gateway（错误网关）：服务器作为网关或代理时，从上游服务器接收到无效的响应。

  • 503 Service Unavailable（服务不可用）：服务器暂时无法处理请求。

参考文章：好看的404模板

页面升级

偶然在这个网站上看到了这个效果的404动画，感觉可以把这个404页面设置为夜间模式，之前的设为日间模式

夜间效果(暂未实现)

404_night

网站：Ecological Footprint Calculator

Tips

  • 通过了解HTTP状态码并创建自定义404错误页面，您可以提升用户体验，留住访客，并减轻网站死链对用户的影响。定期监测网站错误并根据需要更新404页面。
  • 如果是新建404.html文件的话，是可以进行本地预览的。但是这个预览不能使用 http://localhost:4000/任意字符 来查看，必须使用 http://localhost:4000/404 来进行本地预览
  • 更多模版效果：404模版展示及源码
文章作者: loyeh
文章链接: http://Lo-Y-eH.github.io/posts/e7a5.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 loyeh !
404
赏
评论
  目录