Skip to content

Commit 80a6bd4

Browse files
committed
Update navigation
1. 修改后端架构 2. 增加Simpletex作为导航站的一部分 3. 在mkdocs中略微更改页面格式
1 parent 7a7f430 commit 80a6bd4

8 files changed

Lines changed: 229 additions & 219 deletions

File tree

docs/Navigation/OtherSite.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"钱多多API": "https://api2.aigcbest.top/favicon.ico",
3-
"ChatAnyWhere": "https://api.chatanywhere.tech/favicon.ico"
2+
3+
44

55

66

26.1 KB
Loading

docs/Navigation/nav_script.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/*nav-script.js */
2+
3+
// --- 侧边栏逻辑 ---
4+
const sidebar = document.getElementById('sidebar');
5+
const toggleBtn = document.getElementById('toggleBtn');
6+
const svgPath = toggleBtn.querySelector('path');
7+
if(localStorage.getItem('sidebarState') === 'collapsed') { setCollapsed(true); }
8+
9+
toggleBtn.addEventListener('click', () => { setCollapsed(!sidebar.classList.contains('collapsed')); });
10+
11+
function setCollapsed(collapse) {
12+
if(collapse) {
13+
sidebar.classList.add('collapsed');
14+
svgPath.setAttribute('d', 'M13 5l7 7-7 7M5 5l7 7-7 7');
15+
localStorage.setItem('sidebarState', 'collapsed');
16+
} else {
17+
sidebar.classList.remove('collapsed');
18+
svgPath.setAttribute('d', 'M11 19l-7-7 7-7m8 14l-7-7 7-7');
19+
localStorage.setItem('sidebarState', 'expanded');
20+
}
21+
}
22+
23+
// --- 拖拽与重置逻辑 ---
24+
const root = document.documentElement;
25+
const resetBtn = document.getElementById('resetBtn');
26+
const savedTop = localStorage.getItem('sidebarTop');
27+
const savedBottom = localStorage.getItem('sidebarBottom');
28+
if (savedTop) root.style.setProperty('--sidebar-top', savedTop);
29+
if (savedBottom) root.style.setProperty('--sidebar-bottom', savedBottom);
30+
31+
function makeResizable(resizer, isTop) {
32+
resizer.addEventListener('mousedown', (e) => {
33+
e.preventDefault();
34+
document.addEventListener('mousemove', onMouseMove);
35+
document.addEventListener('mouseup', onMouseUp);
36+
function onMouseMove(e) {
37+
if (isTop) {
38+
const newTop = Math.max(70, e.clientY);
39+
root.style.setProperty('--sidebar-top', newTop + 'px');
40+
} else {
41+
const newBottom = Math.max(0, window.innerHeight - e.clientY);
42+
root.style.setProperty('--sidebar-bottom', newBottom + 'px');
43+
}
44+
}
45+
function onMouseUp() {
46+
localStorage.setItem('sidebarTop', getComputedStyle(root).getPropertyValue('--sidebar-top'));
47+
localStorage.setItem('sidebarBottom', getComputedStyle(root).getPropertyValue('--sidebar-bottom'));
48+
document.removeEventListener('mousemove', onMouseMove);
49+
document.removeEventListener('mouseup', onMouseUp);
50+
}
51+
});
52+
}
53+
makeResizable(document.getElementById('resizer-top'), true);
54+
makeResizable(document.getElementById('resizer-bottom'), false);
55+
56+
resetBtn.addEventListener('click', () => {
57+
localStorage.removeItem('sidebarTop');
58+
localStorage.removeItem('sidebarBottom');
59+
root.style.removeProperty('--sidebar-top');
60+
root.style.removeProperty('--sidebar-bottom');
61+
resetBtn.style.transform = "rotate(-360deg)";
62+
setTimeout(() => resetBtn.style.transform = "none", 400);
63+
});
64+
65+
// --- 平滑滚动 ---
66+
function scrollToId(id) {
67+
const element = document.getElementById(id);
68+
if (element) {
69+
const headerOffset = 80;
70+
const offsetPosition = element.getBoundingClientRect().top + window.pageYOffset - headerOffset;
71+
window.scrollTo({ top: offsetPosition, behavior: "smooth" });
72+
}
73+
}
74+
75+
// --- 底部文字渐变轮播 ---
76+
const quotes = [
77+
"或许国内绝大部分大学的本科教学,不是濒临崩溃,而是早已崩溃",
78+
"真理无法被传授,而应在每个人自己的命运中寻得",
79+
"既然没有所谓的彼岸,那么每一个当下本身就是金子",
80+
"人不是被事情困扰,而是被对事情的看法困扰",
81+
"生活不可能像你想象得那么好,但也不会像你想象得那么糟"
82+
];
83+
let index = 0;
84+
const textElement = document.getElementById('typing-text');
85+
textElement.innerText = quotes[0];
86+
87+
setInterval(() => {
88+
textElement.style.opacity = 0; // 淡出
89+
setTimeout(() => {
90+
index = (index + 1) % quotes.length;
91+
textElement.innerText = quotes[index]; // 切换文字
92+
textElement.style.opacity = 1; // 淡入
93+
}, 800); // 必须与 CSS 中的 transition 时间一致 (0.8s)
94+
}, 5000);
95+
96+
// --- 默认图标兜底 ---
97+
const defaultIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='2' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'%3E%3C/path%3E%3C/svg%3E";
98+
document.querySelectorAll('.icon-img').forEach(img => {
99+
img.onerror = function() { this.src = defaultIcon; this.onerror = null; };
100+
if (img.complete && img.naturalHeight === 0) { img.src = defaultIcon; }
101+
});

docs/Navigation/nav_style.css

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/*nav-style.css */
2+
3+
/* 屏蔽全局雪花特效 (如果有) */
4+
body > canvas { display: none !important; }
5+
6+
/* 基础 MkDocs 样式重置 */
7+
.md-content__inner > h1 { display: none; }
8+
.md-content { padding: 0 !important; max-width: 100% !important; }
9+
.md-grid { max-width: 100% !important; margin: 0 !important; }
10+
11+
/* --- 变量定义 --- */
12+
:root {
13+
--page-bg: #f2f3f5;
14+
--text-main: #1d1d1f;
15+
--text-sub: #86868b;
16+
--sidebar-width: 160px;
17+
--sidebar-collapsed-width: 68px;
18+
--sidebar-top: 150px;
19+
--sidebar-bottom: 40px;
20+
--sidebar-bg: rgba(255, 255, 255, 0.75);
21+
--sidebar-hover: rgba(0, 0, 0, 0.05);
22+
--sidebar-active-bg: #007aff;
23+
--sidebar-active-text: #ffffff;
24+
--section-box-bg: rgba(255, 255, 255, 0.6);
25+
--card-bg: #ffffff;
26+
--card-border: rgba(0, 0, 0, 0.05);
27+
}
28+
29+
[data-md-color-scheme="slate"] {
30+
--page-bg: transparent;
31+
--text-main: #f5f5f7;
32+
--text-sub: #a1a1a6;
33+
--sidebar-bg: rgba(30, 30, 35, 0.5);
34+
--sidebar-hover: rgba(255, 255, 255, 0.1);
35+
--sidebar-active-bg: #0a84ff;
36+
--section-box-bg: rgba(44, 44, 46, 0.4);
37+
--card-bg: rgba(44, 44, 46, 0.6);
38+
--card-border: rgba(255, 255, 255, 0.1);
39+
}
40+
41+
.nav-page-wrapper { position: relative; min-height: 100vh; background-color: var(--page-bg); color: var(--text-main); font-family: -apple-system, system-ui, sans-serif; padding-top: 20px; }
42+
[data-md-color-scheme="slate"] .nav-page-wrapper { background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); }
43+
44+
/*强制隐藏侧边栏 (覆盖 custom.css 的 display: block) */
45+
@media screen and (min-width: 768px) and (max-width: 1219px) { .md-sidebar--primary, .md-sidebar--secondary { display: none !important; } }
46+
47+
/* --- 侧边栏样式 --- */
48+
.nav-sidebar { position: fixed; left: 15px; width: var(--sidebar-width); top: var(--sidebar-top); bottom: var(--sidebar-bottom); background: var(--sidebar-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 24px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); z-index: 100; padding: 10px 8px; display: flex; flex-direction: column; transition: width 0.3s ease; overflow: hidden; border: 1px solid var(--card-border); user-select: none; }
49+
.nav-sidebar.collapsed { width: var(--sidebar-collapsed-width); }
50+
51+
.resizer { position: absolute; left: 0; width: 100%; height: 10px; cursor: ns-resize; z-index: 101; opacity: 0; transition: opacity 0.2s; }
52+
.resizer:hover { opacity: 1; background: rgba(128, 128, 128, 0.2); }
53+
.resizer.top { top: 0; } .resizer.bottom { bottom: 0; }
54+
55+
.sidebar-menu { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 5px 0; padding-top: 5px; }
56+
.sidebar-menu::-webkit-scrollbar { width: 4px; }
57+
.sidebar-menu::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.3); border-radius: 4px; }
58+
59+
.sidebar-item { display: flex; align-items: center; padding: 10px 10px; margin-bottom: 4px; border-radius: 12px; color: var(--text-main); cursor: pointer; transition: background 0.2s; }
60+
.sidebar-item:hover { background-color: var(--sidebar-hover); }
61+
.sidebar-icon { font-size: 18px; width: 24px; text-align: center; margin-right: 10px; flex-shrink: 0; }
62+
.sidebar-text { font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 1; transition: opacity 0.2s; }
63+
.nav-sidebar.collapsed .sidebar-text { display: none; }
64+
65+
.sidebar-footer { border-top: 1px solid var(--card-border); padding-top: 5px; flex-shrink: 0; display: flex; gap: 5px; }
66+
.footer-btn { flex: 1; background: transparent; border: none; cursor: pointer; color: var(--text-sub); padding: 8px 0; border-radius: 8px; display: flex; justify-content: center; align-items: center; transition: background 0.2s; }
67+
.footer-btn:hover { background: var(--sidebar-hover); color: var(--text-main); }
68+
69+
/* --- 主内容样式 --- */
70+
.nav-main { margin-left: calc(var(--sidebar-width) + 30px); margin-right: 20px; padding-bottom: 80px; transition: margin-left 0.3s ease; }
71+
.nav-sidebar.collapsed ~ .nav-main { margin-left: calc(var(--sidebar-collapsed-width) + 30px); }
72+
73+
.header-area { text-align: center; margin-bottom: 50px; }
74+
.main-title { font-size: 32px; font-weight: 800; margin-bottom: 15px; }
75+
76+
.category-box { background: var(--section-box-bg); backdrop-filter: blur(10px); border-radius: 24px; padding: 25px; margin-bottom: 30px; border: 1px solid var(--card-border);content-visibility: auto; contain-intrinsic-size: 1px 300px; }
77+
.category-title { font-size: 18px; font-weight: 700; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; padding-left: 5px; scroll-margin-top: 100px; }
78+
.grid-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
79+
80+
/* 卡片 */
81+
.nav-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none !important; color: var(--text-main) !important; transition: transform 0.2s, box-shadow 0.2s; overflow: hidden; }
82+
.nav-card:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
83+
.nav-card .icon-img { width: 32px; height: 32px; margin-bottom: 8px; border-radius: 6px; object-fit: contain; background: white; padding: 2px; }
84+
.nav-card .title { font-size: 13px; font-weight: 600; margin-bottom: 2px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
85+
.nav-card .desc { font-size: 10px; color: var(--text-sub); opacity: 0.8; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
86+
87+
/* --- 底部文字渐变动画 --- */
88+
.footer-quote {
89+
text-align: center;
90+
color: var(--text-sub);
91+
font-size: 13px;
92+
margin-top: 30px;
93+
opacity: 0.7;
94+
min-height: 20px;
95+
}
96+
97+
#typing-text {
98+
transition: opacity 0.8s ease-in-out;
99+
opacity: 1;
100+
}
101+
102+
@media screen and (max-width: 768px) {
103+
.nav-sidebar { left: 5px; width: 60px; top: 80px; bottom: 80px; }
104+
.nav-sidebar .sidebar-text { display: none; }
105+
.resizer { display: none; }
106+
.nav-main { margin-left: 70px; margin-right: 10px; }
107+
.sidebar-footer { display: none; }
108+
}

0 commit comments

Comments
 (0)