自定义 404 页面

前言

最近在 CodePen 网站闲逛时,发现了一个命令行式的 404 页面,觉得挺 cool 的,于是我下载下来做了一些内容和样式的修改,作为新的 404 页面。

过程

接下来一我自己的为例。

步骤一

  • 新建 404 页面
位置:博客\source\404\index.html(没有则自建)
1
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
---
permalink: /404
layout: false
---

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>404 | ColdCard的小黑屋</title>
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
<link rel='stylesheet' href='https://fonts.loli.net/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=Noto+Serif+SC:wght@200;300;400;500;600;700;900'><link rel="stylesheet" href="/skip/404.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="stream"></div>
<div class="line editline">
<p class="time"></p>
<p class="name">&gt;</p>
<p contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="information edit"></p>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://codepen.io/z-/pen/dcdf9b1e328493afd4bd982ed98266d3.js'></script><script src="/skip/404.js"></script>

<script>var titleTime,OriginTitile=document.title;document.addEventListener("visibilitychange",function(){document.hidden?(document.title="警告 | "+OriginTitile,clearTimeout(titleTime)):(document.title="欢迎回来 | "+OriginTitile,titleTime=setTimeout(function(){document.title=OriginTitile},2e3))})</script>

{# 鼠标点击特效 #}
<script async src="/js/fireworks.js"></script>

{# 打字特效 #}
<script src="/js/activate-power-mode.min.js"></script>
<script>POWERMODE.colorful=!0,POWERMODE.shake=!0,document.body.addEventListener("input",POWERMODE)</script>


</body>
</html>

步骤二

  • 新建 404.css 样式文件
    注意要让 css 样式文件跳过渲染,所以最好启用skip文件夹功能。
位置:博客\_config.yml
1
2
3
4
5
6
7
8
9
10
11
  ···
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
- skip_render:
+ skip_render: "skip/**/*"
位置:博客\source\skip\404.css(没有则自建)
1
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
body {
background-color: #3A3A3A;
color: #EFEFAE;
font-family: 'Source Code Pro','Noto Serif SC';
margin: 0;
overflow-x: hidden;
}
body a {
color: #7ad8cb;
}
body a:hover {
color: #ff5b5b;
background-color: #464646;
}
body .stream {
margin-top: 8px;
}
body .line {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
margin: 0 4px;
padding-top: 2px;
width: calc(100% - 12px);
}
body .line p {
display: inline-block;
margin: 0;
padding: 0;
}
body .line .name {
max-width: 80px;
min-width: 80px;
text-align: right;
padding-right: 6px;
}
body .editline {
background-color: #262626;
padding: 2px 4px 0px 4px;
width: calc(100%);
margin: 0;
margin-bottom: 8px;
}
body .editline .edit {
min-width: calc(100% - 200px);
outline: none;
color: #ffb4b4
}
body .editline .time {
user-select: none;
cursor: default;
}
.information {
color: #a7a1d0
}
.whitet {
color: #FFFFAE;
}

.redt {
color: #d75f5f;
}

.important {
color: #E3A786;
}

.bluet {
color: #5f8787;
}

.greent {
color: #afaf00;
}

.selft {
color: #83A598;
}

::selection {
color: #5eff4f;
background: #cacaca;
}

::-webkit-scrollbar {
background-color: #3A3A3A;
width: 10px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background-color: #bcbcbc;
}

::-webkit-scrollbar-corner {
background-color: #3A3A3A;
}

::-webkit-resizer {
background-color: #3A3A3A;
}

.phjspenheader:hover {
background-color: #D44C2A;
}

步骤三

  • 新建 404.js 脚本文件
    404.css文件一样,放到skip文件夹中。
位置:博客\source\skip\404.js(没有则自建)
1
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
// JavaScript Document
$(document).ready(function(e) {
/* Todo:
• Merge this with Node.js, almost done
• Webpages in a database/more editable version
• Add cookies to track previous commands? (You can press up and down to browse previous commands this session)
*/
var faviconnumber = 1;
function favicon() {
favicon = favicon == 1 ? 2 : 1;
$('.favicon').attr('href','favicon' + favicon + ".png");
}
console.clear();
var commandlist = [ /*Can be populated with various methods*/
["/help", "Show commands"],
["/list", "List all pages on the website"],
["/nav &lt;location&gt;", "Navigate to location"],
["/gl", "Generate a url for the current page"],
["/clear", "Clear the console"],
["/login &lt;username&gt; &lt;password&gt;", "Login to your account - This is not set up and when implemeneted it'll be '/login username' then request password without printing into the cmd prompt"],
["/upload", "Upload file, must be logged in."]
];
var previouscommands = [];
var currentcommand = 0;
var pages = [ /*Can be populated with various methods*/
["index",
"",
"Welcome to ColdCard's Blog",
"",
"A!E!_________ .__ .____________ .___",
"A!E!\\_ ___ \\ ____ | | __| _/\\_ ___ \\_____ _______ __| _/",
"A!E!/ \\ \\/ / _ \\| | / __ | / \\ \\/\\__ \\\\_ __ \\/ __ | ",
"A!E!\\ \\___( <_> ) |__/ /_/ | \\ \\____/ __ \\| | \\/ /_/ | ",
"A!E! \\______ /\\____/|____/\\____ | \\______ (____ /__| \\____ | ",
"A!E! \\/ \\/ \\/ \\/ \\/ ",
"",
"本博客是我在业余时间制作,本人不擅长写日志,所以日志也没几篇,本人学习的是动画相关专业,没有学习过网页前端等专业知识,但是我比较喜欢建设博客的过程。",
"This blog is made in my spare time, I am not good at writing posts, so there are few posts, I studied animation related majors, I have not learned the front-end webpage and other professional knowledge.",
"But I prefer the process of building a blog.",
"",
"此页面是我在 [^https://codepen.io/](*CodePen*) 网站中找到,并在原有的基础上修改得到的。",
"I found this page on the [^https://codepen.io/](*CodePen*) website and modified it based on the original.",
"至于具体的修改样式及代码,可以查看[^/posts/Page_Not_Found/](*此日志*)。",
"As for the specific modification style and code, you can view [^/posts/Page_Not_Found/](*this post*).",
"",
],
["other/about",
"",
"About ColdCard's Blog",
"",
"A!E! ___ ___ ",
"A!E! / | \\ ____ ___ _______ ",
"A!E!/ ~ \\_/ __ \\\\ \\/ / _ \\ ",
"A!E!\\ Y /\\ ___/ > < <_> )",
"A!E! \\___|_ / \\___ >__/\\_ \\____/ ",
"A!E! \\/ \\/ \\/ ",
"",
"Personal power website for ColdCard.",
"",
"本博客使用 [^https://hexo.io/](*Hexo*) 的 [^https://github.com/next-theme/hexo-theme-next](*NexT*) 主题",
"This blog uses [^https://github.com/next-theme/hexo-theme-next](*NexT*) theme of [^https://hexo.io/](*Hexo*)",
"",
],
["connect",
"",
"Connect with ColdCard",
"",
"A!E! __ __ ______ __ __ ______ ",
"A!E!/\\ \\_\\ \\ /\\ ___\\ /\\ \\ /\\ \\ /\\ __ \\ ",
"A!E!\\ \\ __ \\ \\ \\ __\\ \\ \\ \\____ \\ \\ \\____ \\ \\ \\/\\ \\ ",
"A!E! \\ \\_\\ \\_\\ \\ \\_____\\ \\ \\_____\\ \\ \\_____\\ \\ \\_____\\ ",
"A!E! \\/_/\\/_/ \\/_____/ \\/_____/ \\/_____/ \\/_____/ ",
"",
"[mailto:ColdCard@qq.com](Email ColdCard@qq.com) < Maine",
"[^https://github.com/Cold-Card](GitHub)",
"[^https://cold-card.coding.net](Coding)",
"[^https://steamcommunity.com/id/ColdCard](Steam) < Always available",
"[^https://account.xbox.com/profile?gamertag=ColdCard1230](XboX)",
"[^https://my.playstation.com/profile/X-ColdCard-X](PlayStation)",
"[^https://space.bilibili.com/85970713](BiliBili) < subscribe",
"[^https://www.youtube.com/channel/UCuh30UopOLnAi39YQ3uP5Pw](YouTube) < subscribe",
"[^https://discordapp.com/channels/@ColdCard](Discord)",
"[^https://t.me/X_ColdCard_X](Telegram)",
"",
]];
var pageindex = ["index", "other/about", "connect"];
var currentpage = "404";
var url = "/"
/*
Custom Text Syntax
Links:
[URLPATH](NAME) - regular
[^URLPATH](NAME) - open in new tab

Styles:
*TEXT* - bold text
E! - Text is an error/notification
A! - spaces are converted to non-breaking spaces (it's for ascii art - after all, this is a text based website)
*/

function init() {
setInterval(time);
console.clear();
console.log(new Date().getTime());
log("Website", "A! _____ _______ _____ __________ _______ __ ___________ .___");
log("Website", "A! / | | \\ _ \\ / | | \\______ \\_____ ____ ____ \\ \\ _____/ |_ \\_ _____/___ __ __ ____ __| _/");
log("Website", "A! / | |_/ /_\\ \\ / | |_ | ___/\\__ \\ / ___\\_/ __ \\ / | \\ / _ \\ __\\ | __)/ _ \\| | \\/ \\ / __ | ");
log("Website", "A!/ ^ /\\ \\_/ \\/ ^ / | | / __ \\_/ /_/ > ___/ / | ( <_> ) | | \\( <_> ) | / | \\/ /_/ | ");
log("Website", "A!\\____ | \\_____ /\\____ | |____| (____ /\\___ / \\___ > \\____|__ /\\____/|__| \\___ / \\____/|____/|___| /\\____ | ");
log("Website", "A! |__| \\/ |__| \\//_____/ \\/ \\/ \\/ \\/ \\/ ");
log("Website", "");
log("Website", "A!E! ___ _ _ _ _ __ ___ _ _ ");
log("Website", "A!E! / __(_) |_| |_ _ _| |__ / _|___ / __|___ __| (_)_ _ __ _ ");
log("Website", "A!E! | (_ | | _| ' \\ || | '_ \\ > _|_ _| | (__/ _ \\/ _` | | ' \\/ _` |");
log("Website", "A!E! \\___|_|\\__|_||_\\_,_|_.__/ \\_____| \\___\\___/\\__,_|_|_||_\\__, |");
log("Website", "A!E! |___/ ");
log("Website", "");
log("Website", "A![^/](*ColdCard's Blog*)");
log("Website", "");
log("Website", "E!I'm no longer using this at [^/](*ColdCard's Blog*)");
log("Website", "");
log("Website", "E!嗯。。。你居然到了这里,你也看到了,这里是 404 页面,你可以有很多方法回去,不过你也可以在这个页面玩会。");
log("Website", "E!'/gl' 回到主页(如果你没用 '/nav' )");
log("Website", "");
urlvars();
log("Client", "For help say '/help'");
setInterval(favicon,500);
}

function urlvars() {
var pagelocs = window.location.pathname.replace("/","").split("/");
var pageloc = pagelocs[0];
console.log(pageloc);
//alert();
if(pageloc != "") {
if ($.inArray(pageloc, pageindex) >= 0) {
currentpage = pageloc;
}
}
log("Website", "You are currently on page: *" + currentpage + "*");
if(pageloc != "") {
if ($.inArray(pageloc, pageindex) >= 0) {
currentpage = pageloc;
loadpage($.inArray(pageloc, pageindex));
} else {
//Un-note next line to show 404 errors with wrong urls
log("Client", "404 - The page '" + pageloc + "' does not exist. To ");
}
}
if(pageloc == "") {
log("Client", "What would you like to access?");
}
}
function getParam(name){
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec (window.location.href);
if (results == null) {
return "";
}
else {
return results[1];
}
}

function log(name, information) {
var d = new Date();
var hours = ((d.getHours() < 10) ? "0" : "") + d.getHours();
var minutes = ((d.getMinutes() < 10) ? "0" : "") + d.getMinutes();
var seconds = ((d.getSeconds() < 10) ? "0" : "") + d.getSeconds();
var colour = "whitet";
var textcolour = "";
var postcolour = "";

switch (name[0]) {
case "!":
postcolour = " important";
name = name.substr(1);
break;
}
switch (name) {
case "Website":
colour = "redt";
break;
case "Server":
colour = "bluet";
break;
case "Client":
colour = "bluet";
break;
case "User":
colour = "greent";
postcolour = " selft";
break;
}
if (information[0] == "A" && information[1] == "!") {
information = information.substr(2);
information = information.replace(/ /g, '\u00A0');
}
if (information[0] == "E" && information[1] == "!") {
information = information.substr(2);
postcolour = " important";
}

while (information.indexOf("](") >= 0) { //URL parser

var NAMEregExp = /\(([^)]+)\)/;
var uname = NAMEregExp.exec(information)[1];

var URLregExp = /\[([^)]+)\]/;
var url = URLregExp.exec(information)[1];
var newpage = false;
if (url[0] == "^") {
newpage = true;
url = url.substr(1);
}
var start = information.indexOf("[");
var end = information.indexOf(")");
if (newpage) {
information = information.replace(information.substring(start, end + 1), "").splice(start, 0, '<a href="' + url + '" target="_blank">' + uname + '</a>');
} else {
information = information.replace(information.substring(start, end + 1), "").splice(start, 0, '<a href="' + url + '">' + uname + '</a>');
}
//information = '<a href="' + url + '">' + uname + '</a>'; //working

}
var tobold = true;
var boldnumber = 0;
for (var i = 0; i < information.length; i++) {
if (information[i] == "*" && information[i - 1] != "*" && information[i + 1] != "*") {
boldnumber++;
}
}
while (information.indexOf("*") >= 0) { //Bold parser
var pos = information.indexOf("*");
information = information.replace("*", "");
if (tobold) {
information = information.splice(pos, 0, '<b>');
} else {
information = information.splice(pos, 0, '</b>');
}
tobold = !tobold;
if (tobold && boldnumber <= 1) {
break;
}
//information = '<a href="' + url + '">' + uname + '</a>'; //working
}
var tounderline = true;
var underlinenumber = 0;
for (var i = 0; i < information.length; i++) {
if (information[i] == "*" && information[i - 1] != "*" && information[i + 1] != "*") {
underlinenumber++;
}
}
while (information.indexOf("**") >= 0) { //Bold parser
var pos = information.indexOf("**");
information = information.replace("**", "");
if (tounderline) {
information = information.splice(pos, 0, '<u>');
} else {
information = information.splice(pos, 0, '</u>');
}
tounderline = !tounderline;
if (tounderline && underlinenumber <= 1) {
break;
}
//information = '<a href="' + url + '">' + uname + '</a>'; //working
}
$(".stream").append('<div class="line">' +
'<p class="time">[' + hours + ":" + minutes + ":" + seconds + ']</p>' +
'<p class="name ' + colour + '">' + name + '</p>' +
'<p class="information' + postcolour + '">' + information + '</p>' +
'</div>');
$(document).scrollTop($(document).height() - $(window).height());
}
var timestring = "";
function time() {
var d = new Date();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var temptimestring = "[" + hours + ":" + minutes + ":" + seconds + "]";
if (temptimestring != timestring) {
timestring = temptimestring;
$(".editline .time").text(timestring);
}
}

var ctrldown = false;
$(".editline .edit").keydown(function(e) {
var text = $(".editline .edit").text();
console.log(e.which);
if (e.which == 13 && text !== "" && !ctrldown) {
var commands = text.split(' ');
var output = "";
if (commands[0] == "help") {
text = "/" + text;
}
$(".editline .edit").text("");
log("User", text);

previouscommands[currentcommand] = text;
currentcommand = previouscommands.length;
$(".editline .edit").keydown(35);
cmd(commands[0], text, commands);
/*Add mod commands*/
//modcmd(commands[0], text, commands);
/*Add mod commands*/

}
if (e.which == 38) { //up
if (currentcommand > 0) {
currentcommand--;
$(".editline .edit").text(previouscommands[currentcommand]);
}
}
if (e.which == 40) { //down

if (currentcommand < previouscommands.length) {
currentcommand++;
$(".editline .edit").text(previouscommands[currentcommand]);
}
}
});

function cmd(command, words, word) {
switch (word[0]) {
case "/help":
case "help":
for (var i = 0; i < commandlist.length; i++) {
output = commandlist[i][0] + " : " + commandlist[i][1];
//console.log(command[i][0]);
log("Client", output);
}
break;
case "/gl":
window.location.href = "https://coldcard.wang" + (currentpage == "404" ? "" : "/" + currentpage);
window.history.pushState(currentpage, 'InpagePage', (currentpage == "404" ? "/" : "/" + currentpage));
break;
case "/clear":
$(".stream").text("");
break;
case "/nav":
if ($.inArray(word[1], pageindex) >= 0) {
currentpage = word[1];
log("Website", "You are now in " + currentpage);
loadpage($.inArray(word[1], pageindex));
} else {
log("Client", "'" + word[1] + "' does not exist.");
}
break;
case "/list":
$.each(pageindex, function(id, content) {
log("Client", "> " + content);
});
break;
case "/login":
if (word.length >= 3) {
log("Client", "Attempting to login to " + word[1] + " with " + Array(word[2].length + 1).join("•"));
loginreturn = false;
//log("Client", "ER1");
setTimeout(loginemptyreturn, 20000);
} else {
log("Client", "Not enough arguments to log in, you need a USERNAME and a PASSWORD.");
}
break;
default:
output = "Unrecognised command '" + word[0] + "'.";
log("Client", output);
}
}

function loadpage(i) {
$.each(pages[i], function(id, content) {
if (content != pageindex[i]) {
log("Website", content);
}
});
}
var loginreturn = false;

function loginemptyreturn() {
//log("Client", "ER2");
if (!loginreturn) {
log("Client", "E![LOGIN] No Return Recieved");
}
}
String.prototype.splice = function(idx, rem, str) {
return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};
init();
});