前言
书接上文,制作一个简单的404页面,只有倒计时功能,倒计时结束返回上一页,如果没有上一页,就回到首页
创建404页面
- 在source目录下创建一个404.html的文件
源代码
hexo/source/404.html1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
| <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>404</title> <style type="text/css"> * { padding: 0; margin: 0; }
body { background: #fff; font-family: '微软雅黑'; color: #333; font-size: 16px; }
.system-message { padding: 24px 48px; }
.system-message h1 { font-size: 100px; font-weight: normal; line-height: 120px; margin-bottom: 12px; }
.system-message .jump { padding-top: 10px }
.system-message .jump a { color: #333; }
.system-message .success, .system-message .error { line-height: 1.8em; font-size: 36px }
.system-message .detail { font-size: 12px; line-height: 20px; margin-top: 12px; display: none } </style> </head> <body> <div class="system-message"> <h1>:(</h1> <p class="error">404 Page Not Found !</p> <p class="detail"></p> <p class="jump"> 您访问的页面不存在 还有 <b id="wait">10</b>s 自动返回 [ 上一页 ] </p> <p class="jump"> [ <a href="/">首页传送门</a> ] </p> <br/> </div> <script type="text/javascript"> (function () { let wait = document.getElementById('wait') let interval = setInterval(function () { let time = --wait.innerHTML;
if (time == 0) { window.history.back(); }
if (time < 0) { window.open("/", "_self"); } }, 1000); })(); </script> </body> </html>
|
完成