Skip to content

Commit fd85777

Browse files
author
wu_jia_tong
committed
style(404, blog): fix blank.
1 parent dac8038 commit fd85777

File tree

10 files changed

+269
-310
lines changed

10 files changed

+269
-310
lines changed

‎1f746dd6856042e0bc04c6c7c2c14fc2.txt ‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎404.html‎

Lines changed: 79 additions & 212 deletions
Original file line numberDiff line numberDiff line change
@@ -9,52 +9,64 @@
99
<meta name="robots" content="noindex,nofollow">
1010

1111
<link rel="shortcut icon" href="/img/logo.png">
12-
<link rel="stylesheet" href="/css/style.css">
13-
<link rel="stylesheet" href="/css/font.css">
14-
<link rel="stylesheet" href="/css/github-markdown-light.min.css">
15-
<link rel="stylesheet" href="/css/codestyle.css">
16-
17-
<script src="/js/highlight.min.js"></script>
18-
<script src="/js/reg.js"></script>
19-
<script src="/js/marked.min.js"></script>
2012

2113
<style>
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
}
19+
20+
body {
21+
font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
22+
overflow: hidden;
23+
}
24+
2225
.error-container {
23-
display: none;
24-
text-align: center;
25-
padding: 60px 20px;
26-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
27-
color: white;
28-
min-height: 80vh;
26+
position: fixed;
27+
top: 0;
28+
left: 0;
29+
width: 100vw;
30+
height: 100vh;
2931
display: flex;
3032
flex-direction: column;
3133
justify-content: center;
3234
align-items: center;
35+
text-align: center;
36+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
37+
color: white;
38+
z-index: 1000;
3339
}
40+
3441
.error-code {
3542
font-size: 8rem;
3643
font-weight: bold;
3744
margin: 0;
3845
text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
3946
animation: float 3s ease-in-out infinite;
4047
}
48+
4149
.error-title {
4250
font-size: 2.5rem;
4351
margin: 20px 0;
4452
font-weight: 300;
4553
}
54+
4655
.error-description {
4756
font-size: 1.2rem;
4857
margin: 20px 0 40px 0;
4958
opacity: 0.9;
5059
max-width: 600px;
60+
line-height: 1.6;
5161
}
62+
5263
.error-actions {
5364
display: flex;
5465
gap: 20px;
5566
flex-wrap: wrap;
5667
justify-content: center;
5768
}
69+
5870
.error-btn {
5971
padding: 12px 30px;
6072
background: rgba(255,255,255,0.2);
@@ -64,150 +76,86 @@
6476
text-decoration: none;
6577
transition: all 0.3s ease;
6678
backdrop-filter: blur(10px);
79+
font-size: 1rem;
6780
}
81+
6882
.error-btn:hover {
6983
background: rgba(255,255,255,0.3);
7084
border-color: rgba(255,255,255,0.5);
7185
transform: translateY(-2px);
7286
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
87+
color: white;
7388
}
89+
7490
.stars {
7591
position: absolute;
7692
width: 100%;
7793
height: 100%;
7894
overflow: hidden;
7995
pointer-events: none;
96+
z-index: -1;
8097
}
98+
8199
.star {
82100
position: absolute;
83101
background: white;
84102
border-radius: 50%;
85103
animation: twinkle 4s infinite;
86104
}
105+
87106
@keyframes float {
88107
0%, 100% { transform: translateY(0px); }
89108
50% { transform: translateY(-20px); }
90109
}
110+
91111
@keyframes twinkle {
92112
0%, 100% { opacity: 0.3; }
93113
50% { opacity: 1; }
94114
}
115+
95116
@media (max-width: 768px) {
96117
.error-code { font-size: 6rem; }
97118
.error-title { font-size: 2rem; }
98-
.error-description { font-size: 1rem; }
99-
.error-actions { flex-direction: column; align-items: center; }
100-
}
101-
</style>
102-
</head>
103-
<body onload="loaduser();" id="home">
104-
<div class="container">
105-
<div class="left-box" id="left-box"></div>
106-
<script>
107-
// 检测是否为移动设备
108-
function isMobileDevice() {
109-
return window.innerWidth / window.innerHeight < 1.2;
119+
.error-description { font-size: 1rem; padding: 0 20px; }
120+
.error-actions {
121+
flex-direction: column;
122+
align-items: center;
123+
padding: 0 20px;
110124
}
111-
112-
// 设置左侧栏宽度
113-
function setLeftBoxWidth() {
114-
const leftBox = document.getElementById('left-box');
115-
const handler = document.querySelector('.handler');
116-
const containerWidth = document.querySelector('.container').offsetWidth;
117-
const menuButton = document.getElementById('menu-button');
118-
119-
if (isMobileDevice()) {
120-
leftBox.style.width = '0';
121-
handler.style.left = "5px";
122-
handler.classList.add('close');
123-
menuButton.style.display = 'block';
124-
if (document.querySelector(".right-top-span-2")) {
125-
document.querySelector(".right-top-span-2").style.display = 'none';
126-
}
127-
} else {
128-
const sidebarWidth = Math.max(containerWidth * 0.02, 210);
129-
leftBox.style.width = sidebarWidth + 'px';
130-
handler.style.left = (sidebarWidth + 5) + "px";
131-
handler.classList.remove('close');
132-
menuButton.style.display = 'none';
133-
if (document.querySelector(".right-top-span-2")) {
134-
document.querySelector(".right-top-span-2").style.display = 'inline';
135-
}
136-
}
125+
.error-btn {
126+
width: 200px;
127+
text-align: center;
137128
}
138-
139-
// 加载侧边栏
140-
fetch('/leftbox.html')
141-
.then(response => response.text())
142-
.then(data => {
143-
document.getElementById('left-box').innerHTML = data;
144-
const items = document.querySelectorAll('.item');
145-
items[4].style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
146-
147-
setLeftBoxWidth();
148-
window.addEventListener('resize', setLeftBoxWidth);
149-
150-
const menuButton = document.getElementById('menu-button');
151-
const leftBox = document.getElementById('left-box');
152-
const handler = document.querySelector('.handler');
153-
154-
menuButton.addEventListener('click', function() {
155-
this.classList.toggle('active');
156-
if (leftBox.style.width === '0px') {
157-
leftBox.style.width = '210px';
158-
handler.style.left = "215px";
159-
handler.classList.remove('close');
160-
} else {
161-
leftBox.style.width = '0';
162-
handler.style.left = "5px";
163-
handler.classList.add('close');
164-
}
165-
});
166-
})
167-
.catch(error => console.error('Error loading left-box.html:', error));
168-
</script>
169-
170-
<!-- 博客页面结构 -->
171-
<div class="right-box" id="blog-container" style="display: none;">
172-
<div class="handler"></div>
173-
<div class="bg"></div>
174-
<div class="addbox"></div>
175-
<div class="right-top">
176-
<div class="menu-button" id="menu-button">
177-
<span></span>
178-
<span></span>
179-
<span></span>
180-
</div>
181-
<i class="icon-create"></i>
182-
<span>个人博客</span>
183-
<span class="right-top-span-2">寻感论剑证道</span>
184-
<p><br></p>
185-
</div>
186-
<div class="cardList"></div>
187-
<textarea id="$t" style="display:none;">
188-
*Blog* not **Found** here.
189-
</textarea>
190-
<div id="$m" class="markdown-body" style="text-align: left;margin:2%"></div>
191-
</div>
129+
}
192130

193-
<!-- 404错误页面 -->
194-
<div class="error-container" id="error-container">
195-
<div class="stars" id="stars"></div>
196-
<h1 class="error-code">404</h1>
197-
<h2 class="error-title">到达了世界的尽头</h2>
198-
<p class="error-description">
199-
您寻找的页面似乎消失在了数字世界的深处...<br>
200-
但不用担心，让我们引导您回到已知的世界
201-
</p>
202-
<div class="error-actions">
203-
<a href="/" class="error-btn">🏠 返回主页</a>
204-
<a href="/createIdea.html" class="error-btn">📖 浏览博客</a>
205-
<a href="/designIdea.html" class="error-btn">🎨 设计灵感</a>
206-
<a href="/buttonwood.html" class="error-btn">👤 关于作者</a>
207-
</div>
131+
@media (max-width: 480px) {
132+
.error-code { font-size: 4rem; }
133+
.error-title { font-size: 1.5rem; }
134+
.error-description { font-size: 0.9rem; }
135+
}
136+
</style>
137+
</head>
138+
<body>
139+
<!-- 404错误页面 -->
140+
<div class="error-container" id="error-container">
141+
<div class="stars" id="stars"></div>
142+
<h1 class="error-code">404</h1>
143+
<h2 class="error-title">到达了世界的尽头</h2>
144+
<p class="error-description">
145+
您寻找的页面似乎消失在了数字世界的深处...<br>
146+
但不用担心，让我们引导您回到已知的世界
147+
</p>
148+
<div class="error-actions">
149+
<a href="/" class="error-btn">🏠 返回主页</a>
150+
<a href="/createIdea.html" class="error-btn">📖 浏览博客</a>
151+
<a href="/designIdea.html" class="error-btn">🎨 设计灵感</a>
152+
<a href="/buttonwood.html" class="error-btn">👤 关于作者</a>
208153
</div>
209154
</div>
210155

156+
<!-- 路由处理脚本 -->
157+
<script src="/js/router.js"></script>
158+
211159
<script>
212160
// 创建星空效果
213161
function createStars() {
@@ -226,100 +174,19 @@ <h2 class="error-title">到达了世界的尽头</h2>
226174
}
227175
}
228176

229-
// 动态路由处理
230-
const path = window.location.pathname;
231-
232-
// 检查是否是博客文章路径
233-
if (path.startsWith('/blog/')) {
234-
const articleName = path.replace('/blog/', '');
235-
if (articleName) {
236-
// 显示博客容器
237-
document.getElementById('blog-container').style.display = 'block';
238-
239-
// 设置页面标题
240-
document.title = decodeURIComponent(articleName) + ' - 寻感博客';
241-
242-
// 更新SEO标签
243-
updateSEOTags(articleName);
244-
245-
// 加载文章内容
246-
loadArticle(articleName);
247-
} else {
248-
// 重定向到博客列表
249-
window.location.href = '/createIdea.html';
250-
}
251-
} else if (path === '/blog' || path === '/blog/') {
252-
// 重定向到博客列表
253-
window.location.href = '/createIdea.html';
254-
} else {
255-
// 显示404页面
256-
document.getElementById('error-container').style.display = 'flex';
257-
document.querySelector('.container').style.height = '100vh';
258-
createStars();
259-
}
260-
261-
function updateSEOTags(articleName) {
262-
const decodedTitle = decodeURIComponent(articleName);
263-
264-
// 创建或更新meta标签
265-
let metaDesc = document.querySelector('meta[name="description"]');
266-
if (!metaDesc) {
267-
metaDesc = document.createElement('meta');
268-
metaDesc.name = 'description';
269-
document.head.appendChild(metaDesc);
270-
}
271-
metaDesc.content = '寻感博客 - ' + decodedTitle + '，提供详细解决方案和技术指导';
177+
// 页面加载完成后创建星空效果
178+
document.addEventListener('DOMContentLoaded', function() {
179+
// 检查是否需要路由处理
180+
const path = window.location.pathname;
272181

273-
let metaKeywords = document.querySelector('meta[name="keywords"]');
274-
if (!metaKeywords) {
275-
metaKeywords = document.createElement('meta');
276-
metaKeywords.name = 'keywords';
277-
document.head.appendChild(metaKeywords);
182+
// 如果是博客路径，让路由处理器处理
183+
if (path.startsWith('/blog/') || path === '/blog' || path === '/blog/') {
184+
return; // 让router.js处理
278185
}
279-
const keywordsFromTitle = decodedTitle.replace(/[\[\]]/g, '').split(/[,，\s]/);
280-
const filteredKeywords = keywordsFromTitle.filter(k => k.length > 1);
281-
metaKeywords.content = filteredKeywords.join(',') + ',教程,解决方案,博客,技术分享';
282186

283-
// 更新规范链接
284-
let canonicalLink = document.querySelector('link[rel="canonical"]');
285-
if (!canonicalLink) {
286-
canonicalLink = document.createElement('link');
287-
canonicalLink.rel = 'canonical';
288-
document.head.appendChild(canonicalLink);
289-
}
290-
canonicalLink.href = 'https://buttonwood.cn/blog/' + encodeURIComponent(articleName);
291-
}
292-
293-
function loadArticle(articleName) {
294-
const filePath = '/blog/' + articleName + '.md';
295-
296-
fetch(filePath)
297-
.then(response => {
298-
if (!response.ok) {
299-
throw new Error('Article not found');
300-
}
301-
return response.text();
302-
})
303-
.then(data => {
304-
// 隐藏文章列表
305-
document.querySelector('.cardList').style.display = "none";
306-
307-
// 显示文章内容
308-
const textarea = document.getElementById('$t');
309-
textarea.value = data;
310-
document.getElementById('$m').innerHTML = marked.parse(textarea.value);
311-
hljs.highlightAll();
312-
})
313-
.catch(error => {
314-
console.error('Error loading article:', error);
315-
// 文章不存在，显示404页面
316-
document.getElementById('blog-container').style.display = 'none';
317-
document.getElementById('error-container').style.display = 'flex';
318-
document.querySelector('.container').style.height = '100vh';
319-
createStars();
320-
});
321-
}
187+
// 否则显示404页面
188+
createStars();
189+
});
322190
</script>
323-
<script>hljs.highlightAll();</script>
324191
</body>
325192
</html>

‎b89e13d9610a419a9079c5eb0b6f03bf.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
b89e13d9610a419a9079c5eb0b6f03bf

‎blog/blogs.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"kruskal重构树(以ICPC上海 2021 H.Life is a Game 为例).md",
66
"packet tracer路由器配置chap认证.md",
77
"使用nodejs子域名搭建jupyterlab时的关键配置.md",
8+
"使用sigsuspend完成csapp的shellLab中的waitfg(pid_t pid)函数.md",
89
"混合编程加速PythonHttp请求速度.md",
910
"解决vscode默认打开WSL终端问题.md",
1011
"Zilean - 高性能Tick级别高频交易引擎设计与实现.md",

0 commit comments

Comments
 (0)