diff --git a/assets/style.css b/assets/style.css index 52645a8..3b722b3 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1475,4 +1475,115 @@ body .content.expanded { .copyright a:hover { color: var(--accent-hover); text-decoration: underline; +} + +/* 导航项包装器 - 包含导航项和子菜单 */ +.nav-item-wrapper { + position: relative; + display: flex; + flex-direction: column; + width: 100%; +} + +/* 子菜单切换图标 */ +.submenu-toggle { + font-size: 0.8rem; + margin-left: 0.5rem; + transition: transform 0.3s ease; +} + +/* 子菜单展开状态图标旋转 */ +.nav-item-wrapper.expanded .submenu-toggle { + transform: rotate(180deg); +} + +/* 子菜单容器 */ +.submenu { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + margin-left: 1.5rem; + opacity: 0; + visibility: hidden; +} + +/* 子菜单展开状态 */ +.nav-item-wrapper.expanded .submenu { + max-height: 500px; /* 设置足够大的值以容纳所有可能的子菜单项 */ + opacity: 1; + visibility: visible; +} + +/* 子菜单项样式 */ +.submenu-item { + display: flex; + align-items: center; + padding: 0.5rem 0.8rem; + color: var(--nav-item-color); + text-decoration: none; + border-radius: 8px; + transition: all 0.3s ease; + font-size: 0.9rem; + margin: 0.1rem 0; +} + +.submenu-item i { + margin-right: 0.8rem; + font-size: 0.85rem; + width: 16px; + text-align: center; +} + +.submenu-item span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.submenu-item:hover { + background-color: var(--secondary-bg); + color: var(--text-bright); +} + +.submenu-item.active { + background-color: var(--secondary-bg); + color: var(--text-bright); +} + +/* 侧边栏折叠状态下子菜单样式 */ +.sidebar.collapsed .submenu { + position: absolute; + left: 100%; + top: 0; + background-color: var(--sidebar-bg); + border-radius: 0 8px 8px 0; + box-shadow: 4px 0 10px var(--shadow-color); + margin-left: 0; + width: 180px; + opacity: 0; + visibility: hidden; + max-height: 0; + overflow: hidden; + z-index: 200; +} + +.sidebar.collapsed .nav-item-wrapper:hover .submenu { + max-height: 500px; + opacity: 1; + visibility: visible; +} + +.sidebar.collapsed .submenu-toggle { + display: none; +} + +/* 移动端样式调整 */ +@media (max-width: 768px) { + .sidebar .submenu { + margin-left: 1rem; + } + + .sidebar.active .submenu-item { + padding: 0.5rem 0.6rem; + } } \ No newline at end of file diff --git a/src/generator.js b/src/generator.js index 0680cc7..aafd0a5 100644 --- a/src/generator.js +++ b/src/generator.js @@ -228,14 +228,84 @@ function loadConfig() { } // 生成导航菜单 -function generateNavigation(navigation) { - return navigation.map(nav => ` - -
- -
- ${escapeHtml(nav.name)} - `).join('\n'); +function generateNavigation(navigation, config) { + return navigation.map(nav => { + // 根据页面ID获取对应的子菜单项（分类） + let submenuItems = ''; + + // 首页页面添加子菜单（分类） + if (nav.id === 'home' && Array.isArray(config.categories)) { + submenuItems = ` +
+ ${config.categories.map(category => ` + + + ${escapeHtml(category.name)} + + `).join('')} +
`; + } + // 书签页面添加子菜单（分类） + else if (nav.id === 'bookmarks' && config.bookmarks && Array.isArray(config.bookmarks.categories)) { + submenuItems = ` +
+ ${config.bookmarks.categories.map(category => ` + + + ${escapeHtml(category.name)} + + `).join('')} +
`; + } + // 项目页面添加子菜单 + else if (nav.id === 'projects' && config.projects && Array.isArray(config.projects.categories)) { + submenuItems = ` +
+ ${config.projects.categories.map(category => ` + + + ${escapeHtml(category.name)} + + `).join('')} +
`; + } + // 文章页面添加子菜单 + else if (nav.id === 'articles' && config.articles && Array.isArray(config.articles.categories)) { + submenuItems = ` +
+ ${config.articles.categories.map(category => ` + + + ${escapeHtml(category.name)} + + `).join('')} +
`; + } + // 友链页面添加子菜单 + else if (nav.id === 'friends' && config.friends && Array.isArray(config.friends.categories)) { + submenuItems = ` +
+ ${config.friends.categories.map(category => ` + + + ${escapeHtml(category.name)} + + `).join('')} +
`; + } + + return ` +
+ +
+ +
+ ${escapeHtml(nav.name)} + ${submenuItems ? '' : ''} + + ${submenuItems} +
`; + }).join('\n'); } // 生成网站卡片HTML @@ -447,7 +517,7 @@ ${content}
-${generateNavigation(config.navigation)} +${generateNavigation(config.navigation, config)}
@@ -545,7 +615,7 @@ function processTemplate(template, config) { '{{SITE_LOGO_TEXT}}': escapeHtml(config.site.logo_text || '导航站'), // 从配置中获取，如果不存在则使用默认值 '{{GOOGLE_FONTS}}': googleFontsLink, '{{{FONT_VARIABLES}}}': fontVariables, - '{{NAVIGATION}}': generateNavigation(config.navigation), + '{{NAVIGATION}}': generateNavigation(config.navigation, config), '{{SOCIAL_LINKS}}': generateSocialLinks(config.social), '{{CURRENT_YEAR}}': currentYear, '{{HOME_CONTENT}}': generateHomeContent(config), diff --git a/src/script.js b/src/script.js index 3fc9e0b..b5ee232 100644 --- a/src/script.js +++ b/src/script.js @@ -14,12 +14,8 @@ document.addEventListener('DOMContentLoaded', () => { items: [] }; - // 获取DOM元素 + // 获取DOM元素 - 基本元素 const searchInput = document.getElementById('search'); - const siteCards = document.querySelectorAll('.site-card'); - const categories = document.querySelectorAll('.category'); - const navItems = document.querySelectorAll('.nav-item'); - const pages = document.querySelectorAll('.page'); const searchBox = document.querySelector('.search-box'); const searchResultsPage = document.getElementById('search-results'); const searchSections = searchResultsPage.querySelectorAll('.search-section'); @@ -139,6 +135,7 @@ document.addEventListener('DOMContentLoaded', () => { try { // 为每个页面创建索引 + const pages = document.querySelectorAll('.page'); pages.forEach(page => { if (page.id === 'search-results') return; @@ -242,6 +239,7 @@ document.addEventListener('DOMContentLoaded', () => { // 使用 RAF 确保动画流畅 requestAnimationFrame(() => { + const pages = document.querySelectorAll('.page'); pages.forEach(page => { const shouldBeActive = page.id === pageId; if (shouldBeActive !== page.classList.contains('active')) { @@ -576,30 +574,16 @@ document.addEventListener('DOMContentLoaded', () => { } }); - // 导航项点击效果 - navItems.forEach(item => { - item.addEventListener('click', (e) => { - if (item.getAttribute('target') === '_blank') return; - - e.preventDefault(); - navItems.forEach(nav => { - nav.classList.toggle('active', nav === item); - }); - - const pageId = item.getAttribute('data-page'); - if (pageId) { - showPage(pageId); - - // 在移动端视图下点击导航项后自动收起侧边栏 - if (isMobile() && isSidebarOpen) { - closeAllPanels(); - } - } - }); - }); - // 初始化 window.addEventListener('load', () => { + // 获取可能在HTML生成后才存在的DOM元素 + const siteCards = document.querySelectorAll('.site-card'); + const categories = document.querySelectorAll('.category'); + const navItems = document.querySelectorAll('.nav-item'); + const navItemWrappers = document.querySelectorAll('.nav-item-wrapper'); + const submenuItems = document.querySelectorAll('.submenu-item'); + const pages = document.querySelectorAll('.page'); + // 初始化主题 initTheme(); @@ -617,6 +601,139 @@ document.addEventListener('DOMContentLoaded', () => { }, index * 100); }); + // 初始展开当前页面的子菜单 + const activeNavItem = document.querySelector('.nav-item.active'); + if (activeNavItem) { + const activeWrapper = activeNavItem.closest('.nav-item-wrapper'); + if (activeWrapper) { + activeWrapper.classList.add('expanded'); + } + } + + // 导航项点击效果 + navItems.forEach(item => { + item.addEventListener('click', (e) => { + if (item.getAttribute('target') === '_blank') return; + + e.preventDefault(); + + // 获取当前项的父级wrapper + const wrapper = item.closest('.nav-item-wrapper'); + const hasSubmenu = wrapper && wrapper.querySelector('.submenu'); + + // 处理子菜单展开/折叠 + if (hasSubmenu) { + // 如果点击的导航项已经激活且有子菜单，则切换子菜单展开状态 + if (item.classList.contains('active')) { + wrapper.classList.toggle('expanded'); + } else { + // 关闭所有已展开的子菜单 + navItemWrappers.forEach(navWrapper => { + if (navWrapper !== wrapper) { + navWrapper.classList.remove('expanded'); + } + }); + + // 展开当前子菜单 + wrapper.classList.add('expanded'); + } + } + + // 激活导航项 + navItems.forEach(nav => { + nav.classList.toggle('active', nav === item); + }); + + const pageId = item.getAttribute('data-page'); + if (pageId) { + showPage(pageId); + + // 在移动端视图下点击导航项后自动收起侧边栏 + if (isMobile() && isSidebarOpen && !hasSubmenu) { + closeAllPanels(); + } + } + }); + }); + + // 子菜单项点击效果 + submenuItems.forEach(item => { + item.addEventListener('click', (e) => { + e.preventDefault(); + + // 获取页面ID和分类名称 + const pageId = item.getAttribute('data-page'); + const categoryName = item.getAttribute('data-category'); + + if (pageId) { + // 清除所有子菜单项的激活状态 + submenuItems.forEach(subItem => { + subItem.classList.remove('active'); + }); + + // 激活当前子菜单项 + item.classList.add('active'); + + // 激活相应的导航项 + navItems.forEach(nav => { + nav.classList.toggle('active', nav.getAttribute('data-page') === pageId); + }); + + // 显示对应页面 + showPage(pageId); + + // 等待页面切换完成后滚动到对应分类 + setTimeout(() => { + // 查找目标分类元素 + const targetPage = document.getElementById(pageId); + if (targetPage) { + const targetCategory = Array.from(targetPage.querySelectorAll('.category h2')).find( + heading => heading.textContent.trim().includes(categoryName) + ); + + if (targetCategory) { + // 优化的滚动实现：滚动到使目标分类位于视口1/4处（更靠近顶部位置） + try { + // 直接获取所需元素和属性，减少重复查询 + const contentElement = document.querySelector('.content'); + + if (contentElement && contentElement.scrollHeight > contentElement.clientHeight) { + // 获取目标元素相对于内容区域的位置 + const rect = targetCategory.getBoundingClientRect(); + const containerRect = contentElement.getBoundingClientRect(); + + // 计算目标应该在视口中的位置（视口高度的1/4处） + const desiredPosition = containerRect.height / 4; + + // 计算需要滚动的位置 + const scrollPosition = contentElement.scrollTop + rect.top - containerRect.top - desiredPosition; + + // 执行滚动 + contentElement.scrollTo({ + top: scrollPosition, + behavior: 'smooth' + }); + } else { + // 回退到基本滚动方式 + targetCategory.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + } catch (error) { + console.error('Error during scroll:', error); + // 回退到基本滚动方式 + targetCategory.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + } + } + }, 25); // 延迟时间 + + // 在移动端视图下点击子菜单项后自动收起侧边栏 + if (isMobile() && isSidebarOpen) { + closeAllPanels(); + } + } + }); + }); + // 初始化搜索索引（使用requestIdleCallback或setTimeout延迟初始化，避免影响页面加载） if ('requestIdleCallback' in window) { requestIdleCallback(() => initSearchIndex());