From a3a972a2bc3fd449c456e3f39593fba2cd0a55f0 Mon Sep 17 00:00:00 2001 From: zhangyuheng Date: Sat, 28 Feb 2026 10:44:44 +0800 Subject: [PATCH] feat: Refactor navbar and mobile menu into components for improved organization and maintainability --- components.js | 125 ++++++++++++++++++++++++++++++++++++++++++++++ fund_progress.txt | 1 + index.html | 48 ++---------------- script.js | 37 +------------- sponsor.html | 39 ++------------- sponsor_script.js | 24 +-------- stats.html | 47 ++--------------- stats_script.js | 37 +------------- style.css | 8 +++ 9 files changed, 147 insertions(+), 219 deletions(-) create mode 100644 components.js diff --git a/components.js b/components.js new file mode 100644 index 0000000..72833a2 --- /dev/null +++ b/components.js @@ -0,0 +1,125 @@ + +const Components = { + navbarHTML: ` + + + +
+
+ 文档 + 地图 + 相册 + 群聊 + 数据 + 赞助 +
+
+ `, + + footerHTML: ` + + `, + + init: function() { + // Inject Navbar + const navContainer = document.getElementById('navbar-component'); + if (navContainer) { + navContainer.innerHTML = this.navbarHTML; + } + + // Inject Footer + const footerContainer = document.getElementById('footer-component'); + if (footerContainer) { + footerContainer.innerHTML = this.footerHTML; + } + + // Setup Mobile Menu Logic + this.setupMobileMenu(); + + // Highlight current page + this.highlightCurrentPage(); + }, + + setupMobileMenu: function() { + const toggle = document.getElementById('mobile-toggle'); + const menu = document.getElementById('mobile-menu'); + + if (toggle && menu) { + const icon = toggle.querySelector('i'); + // Remove old listeners if any to avoid duplicates? + // Since we just injected the HTML, there are no listeners. + + toggle.addEventListener('click', () => { + menu.classList.toggle('active'); + document.body.classList.toggle('menu-open'); + + if (menu.classList.contains('active')) { + if(icon) { + icon.classList.remove('fa-bars'); + icon.classList.add('fa-times'); + } + } else { + if(icon) { + icon.classList.remove('fa-times'); + icon.classList.add('fa-bars'); + } + } + }); + + menu.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + menu.classList.remove('active'); + document.body.classList.remove('menu-open'); + if(icon) { + icon.classList.remove('fa-times'); + icon.classList.add('fa-bars'); + } + }); + }); + } + }, + + highlightCurrentPage: function() { + const currentPath = window.location.pathname; + const links = document.querySelectorAll('.nav-links a, .mobile-menu-links a'); + + links.forEach(link => { + if (link.getAttribute('href') === currentPath) { + link.classList.add('active'); // You might need to add CSS for .active + } + }); + } +}; + +document.addEventListener('DOMContentLoaded', () => { + Components.init(); +}); diff --git a/fund_progress.txt b/fund_progress.txt index 72809bc..4b51d97 100644 --- a/fund_progress.txt +++ b/fund_progress.txt @@ -1 +1,2 @@ 服务器升级M4 Mac Mini 32G,2740,5000 +给服主换车,0,290000 diff --git a/index.html b/index.html index 1976cf6..02d83db 100644 --- a/index.html +++ b/index.html @@ -76,42 +76,8 @@ 跳转到主内容 - - - - -
-
- 文档 - 地图 - 相册 - 群聊 - 数据 - 赞助 -
-
+ +