chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
Zuoling Rong
2025-02-25 23:55:27 +08:00
parent b77a97c7b1
commit b830a03a28
4 changed files with 533 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
generator.js
View File

@@ -2,6 +2,19 @@ const fs = require('fs');
const yaml = require('js-yaml');
const path = require('path');
// HTML转义函数，防止XSS攻击
function escapeHtml(unsafe) {
if (unsafe === undefined || unsafe === null) {
return '';
}
return String(unsafe)
.replace(/&/g, "&")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
// 读取配置文件
function loadConfig() {
let config = {};
@@ -54,21 +67,21 @@ function mergeConfigs(defaultConfig, userConfig) {
// 生成导航菜单
function generateNavigation(navigation) {
return navigation.map(nav => `
<a href="#" class="nav-item${nav.active ? ' active' : ''}" data-page="${nav.id}">
<a href="#" class="nav-item${nav.active ? ' active' : ''}" data-page="${escapeHtml(nav.id)}">
<div class="icon-container">
<i class="${nav.icon}"></i>
<i class="${escapeHtml(nav.icon)}"></i>
</div>
<span class="nav-text">${nav.name}</span>
<span class="nav-text">${escapeHtml(nav.name)}</span>
</a>`).join('\n');
}
// 生成网站卡片HTML
function generateSiteCards(sites) {
return sites.map(site => `
<a href="${site.url}" class="site-card">
<i class="${site.icon}"></i>
<h3>${site.name}</h3>
<p>${site.description}</p>
<a href="${escapeHtml(site.url)}" class="site-card">
<i class="${escapeHtml(site.icon)}"></i>
<h3>${escapeHtml(site.name)}</h3>
<p>${escapeHtml(site.description)}</p>
</a>`).join('\n');
}
@@ -76,7 +89,7 @@ function generateSiteCards(sites) {
function generateCategories(categories) {
return categories.map(category => `
<section class="category">
<h2><i class="${category.icon}"></i> ${category.name}</h2>
<h2><i class="${escapeHtml(category.icon)}"></i> ${escapeHtml(category.name)}</h2>
<div class="sites-grid">
${generateSiteCards(category.sites)}
</div>
@@ -86,11 +99,11 @@ function generateCategories(categories) {
// 生成社交链接HTML
function generateSocialLinks(social) {
return social.map(link => `
<a href="${link.url}" class="nav-item" target="_blank">
<a href="${escapeHtml(link.url)}" class="nav-item" target="_blank">
<div class="icon-container">
<i class="${link.icon}"></i>
<i class="${escapeHtml(link.icon)}"></i>
</div>
<span class="nav-text">${link.name}</span>
<span class="nav-text">${escapeHtml(link.name)}</span>
<i class="fas fa-external-link-alt external-icon"></i>
</a>`).join('\n');
}
@@ -99,14 +112,31 @@ function generateSocialLinks(social) {
function generatePageContent(pageId, data) {
return `
<div class="welcome-section">
<h2>${data.title}</h2>
<p class="subtitle">${data.subtitle}</p>
<h2>${escapeHtml(data.title)}</h2>
<p class="subtitle">${escapeHtml(data.subtitle)}</p>
</div>
${generateCategories(data.categories)}`;
}
// 生成搜索结果页面
function generateSearchResultsPage() {
function generateSearchResultsPage(config) {
// 获取所有导航页面ID
const pageIds = config.navigation.map(nav => nav.id);
// 生成所有页面的搜索结果区域
const searchSections = pageIds.map(pageId => {
// 根据页面ID获取对应的图标和名称
const navItem = config.navigation.find(nav => nav.id === pageId);
const icon = navItem ? navItem.icon : 'fas fa-file';
const name = navItem ? navItem.name : pageId;
return `
<section class="category search-section" data-section="${escapeHtml(pageId)}" style="display: none;">
<h2><i class="${escapeHtml(icon)}"></i> ${escapeHtml(name)}匹配项</h2>
<div class="sites-grid"></div>
</section>`;
}).join('\n');
return `
<!-- 搜索结果页 -->
<div class="page" id="search-results">
@@ -114,26 +144,7 @@ function generateSearchResultsPage() {
<h2>搜索结果</h2>
<p class="subtitle">在所有页面中找到的匹配项</p>
</div>
<section class="category search-section" data-section="home" style="display: none;">
<h2><i class="fas fa-home"></i> 首页匹配项</h2>
<div class="sites-grid"></div>
</section>
<section class="category search-section" data-section="projects" style="display: none;">
<h2><i class="fas fa-project-diagram"></i> 项目匹配项</h2>
<div class="sites-grid"></div>
</section>
<section class="category search-section" data-section="articles" style="display: none;">
<h2><i class="fas fa-book"></i> 文章匹配项</h2>
<div class="sites-grid"></div>
</section>
<section class="category search-section" data-section="friends" style="display: none;">
<h2><i class="fas fa-users"></i> 朋友匹配项</h2>
<div class="sites-grid"></div>
</section>
${searchSections}
</div>`;
}
@@ -176,13 +187,14 @@ function generateFontVariables(config) {
function generateHTML(config) {
const googleFontsLink = generateGoogleFontsLink(config);
const fontVariables = generateFontVariables(config);
const currentYear = new Date().getFullYear();
return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${config.site.title}</title>
<title>${escapeHtml(config.site.title)}</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
${googleFontsLink}
@@ -225,7 +237,7 @@ ${generateSocialLinks(config.social)}
</div>
<div class="copyright">
<p>© 2025 <a href="https://github.com/RZLNB/menav" target="_blank">MeNav</a></p>
<p>© ${currentYear} <a href="https://github.com/RZLNB/menav" target="_blank">MeNav</a></p>
<p>by <a href="https://github.com/RZLNB" target="_blank">RZLNB</a></p>
</div>
</nav>
@@ -243,9 +255,9 @@ ${generateSocialLinks(config.social)}
<!-- 首页 -->
<div class="page active" id="home">
<div class="welcome-section">
<h2>${config.profile.title}</h2>
<h3>${config.profile.subtitle}</h3>
<p class="subtitle">${config.profile.description}</p>
<h2>${escapeHtml(config.profile.title)}</h2>
<h3>${escapeHtml(config.profile.subtitle)}</h3>
<p class="subtitle">${escapeHtml(config.profile.description)}</p>
</div>
${generateCategories(config.categories)}
</div>
@@ -264,7 +276,7 @@ ${generatePageContent('articles', config.articles)}
<div class="page" id="friends">
${generatePageContent('friends', config.friends)}
</div>
${generateSearchResultsPage()}
${generateSearchResultsPage(config)}
</main>
</div>
<script src="script.js"></script>

122
index.html
View File

@@ -110,6 +110,27 @@
</a>
</div>
<!-- 导入/导出功能 -->
<div class="nav-section">
<div class="section-title">
<i class="fas fa-cog"></i>
</div>
<div class="nav-item import-export-btn" id="exportDataBtn">
<div class="icon-container">
<i class="fas fa-download"></i>
</div>
<span class="nav-text">导出数据</span>
</div>
<div class="nav-item import-export-btn" id="importDataBtn">
<div class="icon-container">
<i class="fas fa-upload"></i>
</div>
<span class="nav-text">导入数据</span>
</div>
<!-- 隐藏的文件上传输入 -->
<input type="file" id="importFileInput" style="display: none;" accept=".json,.yml,.yaml">
</div>
<div class="copyright">
<p>© 2025 <a href="https://github.com/RZLNB/menav" target="_blank">MeNav</a></p>
<p>by <a href="https://github.com/RZLNB" target="_blank">RZLNB</a></p>
@@ -552,5 +573,106 @@
</main>
</div>
<script src="script.js"></script>
<script>
// 从localStorage加载用户数据
document.addEventListener('DOMContentLoaded', function() {
try {
const userData = localStorage.getItem('menav_user_data');
if (userData) {
const data = JSON.parse(userData);
console.log('Loading user data from localStorage');
// 应用用户配置
applyUserData(data);
}
} catch (error) {
console.error('Error loading user data:', error);
}
// 应用用户数据到页面
function applyUserData(data) {
try {
// 应用分类和网站
if (data.categories && data.categories.length > 0) {
const homePage = document.getElementById('home');
if (homePage) {
// 保留欢迎区域
const welcomeSection = homePage.querySelector('.welcome-section');
// 清除当前分类
const oldCategories = homePage.querySelectorAll('.category');
oldCategories.forEach(cat => {
if (!cat.classList.contains('welcome-section')) {
cat.remove();
}
});
// 添加新分类
data.categories.forEach(category => {
const categoryElem = document.createElement('section');
categoryElem.className = 'category';
categoryElem.innerHTML = `
<h2><i class="${category.icon}"></i> ${category.name}</h2>
<div class="sites-grid"></div>
`;
const sitesGrid = categoryElem.querySelector('.sites-grid');
// 添加站点
category.sites.forEach(site => {
const siteCard = document.createElement('a');
siteCard.className = 'site-card';
siteCard.href = site.url;
siteCard.innerHTML = `
<i class="${site.icon}"></i>
<h3>${site.name}</h3>
<p>${site.description}</p>
`;
sitesGrid.appendChild(siteCard);
});
homePage.appendChild(categoryElem);
});
}
}
// 应用社交链接
if (data.social && data.social.length > 0) {
const socialSection = document.querySelector('.nav-section:has(.section-title i.fa-link)');
if (socialSection) {
// 清除当前社交链接
const oldLinks = socialSection.querySelectorAll('.nav-item');
oldLinks.forEach(link => link.remove());
// 添加新社交链接
data.social.forEach(link => {
const linkElem = document.createElement('a');
linkElem.className = 'nav-item';
linkElem.href = link.url;
linkElem.target = '_blank';
linkElem.innerHTML = `
<div class="icon-container">
<i class="${link.icon}"></i>
</div>
<span class="nav-text">${link.name}</span>
<i class="fas fa-external-link-alt external-icon"></i>
`;
socialSection.appendChild(linkElem);
});
}
}
// 重新初始化搜索索引
if (window.initSearchIndex) {
window.initSearchIndex();
}
} catch (error) {
console.error('Error applying user data:', error);
}
}
});
</script>
</body>
</html>

275
script.js
View File

@@ -21,6 +21,57 @@ document.addEventListener('DOMContentLoaded', () => {
let isSidebarOpen = false;
let isSearchOpen = false;
// 搜索索引，用于提高搜索效率
let searchIndex = {
initialized: false,
items: []
};
// 初始化搜索索引
function initSearchIndex() {
if (searchIndex.initialized) return;
searchIndex.items = [];
try {
// 为每个页面创建索引
pages.forEach(page => {
if (page.id === 'search-results') return;
const pageId = page.id;
page.querySelectorAll('.site-card').forEach(card => {
try {
const title = card.querySelector('h3')?.textContent?.toLowerCase() || '';
const description = card.querySelector('p')?.textContent?.toLowerCase() || '';
const url = card.href || card.getAttribute('href') || '#';
const icon = card.querySelector('i')?.className || '';
// 将卡片信息添加到索引中
searchIndex.items.push({
pageId,
title,
description,
url,
icon,
element: card,
// 预先计算搜索文本，提高搜索效率
searchText: (title + ' ' + description).toLowerCase()
});
} catch (cardError) {
console.error('Error processing card:', cardError);
}
});
});
searchIndex.initialized = true;
console.log('Search index initialized with', searchIndex.items.length, 'items');
} catch (error) {
console.error('Error initializing search index:', error);
searchIndex.initialized = true; // 防止反复尝试初始化
}
}
// 移动端菜单切换
function toggleSidebar() {
isSidebarOpen = !isSidebarOpen;
@@ -106,6 +157,11 @@ document.addEventListener('DOMContentLoaded', () => {
// 搜索功能
function performSearch(searchTerm) {
// 确保搜索索引已初始化
if (!searchIndex.initialized) {
initSearchIndex();
}
searchTerm = searchTerm.toLowerCase().trim();
// 如果搜索框为空，重置所有内容
@@ -118,54 +174,75 @@ document.addEventListener('DOMContentLoaded', () => {
isSearchActive = true;
}
let hasResults = false;
try {
// 使用搜索索引进行搜索
const searchResults = new Map();
let hasResults = false;
// 收集所有匹配结果
pages.forEach(page => {
if (page.id === 'search-results') return;
// 使用更高效的搜索算法
const matchedItems = searchIndex.items.filter(item => {
return item.searchText.includes(searchTerm);
});
const pageId = page.id;
const matches = [];
page.querySelectorAll('.site-card').forEach(card => {
const title = card.querySelector('h3').textContent.toLowerCase();
const description = card.querySelector('p').textContent.toLowerCase();
if (title.includes(searchTerm) || description.includes(searchTerm)) {
matches.push(card.cloneNode(true));
// 按页面分组结果
matchedItems.forEach(item => {
if (!searchResults.has(item.pageId)) {
searchResults.set(item.pageId, []);
}
// 克隆元素以避免修改原始DOM
searchResults.get(item.pageId).push(item.element.cloneNode(true));
hasResults = true;
}
});
if (matches.length > 0) {
searchResults.set(pageId, matches);
}
});
// 批量更新DOM
// 使用requestAnimationFrame批量更新DOM，减少重排重绘
requestAnimationFrame(() => {
try {
// 清空并隐藏所有搜索区域
searchSections.forEach(section => {
try {
const grid = section.querySelector('.sites-grid');
while (grid.firstChild) {
grid.removeChild(grid.firstChild);
if (grid) {
grid.innerHTML = ''; // 使用innerHTML清空，比removeChild更高效
}
section.style.display = 'none';
} catch (sectionError) {
console.error('Error clearing search section:', sectionError);
}
});
// 填充匹配结果
// 使用DocumentFragment批量添加DOM元素，减少重排
searchResults.forEach((matches, pageId) => {
const section = searchResultsPage.querySelector(`[data-section="${pageId}"]`);
if (section) {
try {
const grid = section.querySelector('.sites-grid');
if (grid) {
const fragment = document.createDocumentFragment();
matches.forEach(card => fragment.appendChild(card));
matches.forEach(card => {
// 高亮匹配文本
highlightSearchTerm(card, searchTerm);
fragment.appendChild(card);
});
grid.appendChild(fragment);
section.style.display = 'block';
}
} catch (gridError) {
console.error(`Error updating search results for ${pageId}:`, gridError);
}
} else {
console.warn(`Search section for page "${pageId}" not found`);
}
});
// 更新搜索结果页面状态
searchResultsPage.querySelector('.subtitle').textContent =
hasResults ? '在所有页面中找到的匹配项' : '未找到匹配的结果';
const subtitle = searchResultsPage.querySelector('.subtitle');
if (subtitle) {
subtitle.textContent = hasResults
? `在所有页面中找到 ${matchedItems.length} 个匹配项`
: '未找到匹配的结果';
}
// 显示搜索结果页面
if (currentPageId !== 'search-results') {
@@ -178,7 +255,124 @@ document.addEventListener('DOMContentLoaded', () => {
// 更新搜索状态样式
searchBox.classList.toggle('has-results', hasResults);
searchBox.classList.toggle('no-results', !hasResults);
} catch (uiError) {
console.error('Error updating search UI:', uiError);
}
});
} catch (searchError) {
console.error('Error performing search:', searchError);
}
}
// 高亮搜索匹配文本
function highlightSearchTerm(card, searchTerm) {
if (!card || !searchTerm) return;
try {
const title = card.querySelector('h3');
const description = card.querySelector('p');
if (!title || !description) return;
// 安全地高亮标题中的匹配文本
if (title.textContent.toLowerCase().includes(searchTerm)) {
const titleText = title.textContent;
const regex = new RegExp(`(${escapeRegExp(searchTerm)})`, 'gi');
// 创建安全的DOM结构而不是直接使用innerHTML
const titleFragment = document.createDocumentFragment();
let lastIndex = 0;
let match;
// 使用正则表达式查找所有匹配项
const titleRegex = new RegExp(regex);
while ((match = titleRegex.exec(titleText)) !== null) {
// 添加匹配前的文本
if (match.index > lastIndex) {
titleFragment.appendChild(document.createTextNode(
titleText.substring(lastIndex, match.index)
));
}
// 添加高亮的匹配文本
const span = document.createElement('span');
span.className = 'highlight';
span.textContent = match[0];
titleFragment.appendChild(span);
lastIndex = match.index + match[0].length;
// 防止无限循环
if (titleRegex.lastIndex === 0) break;
}
// 添加剩余文本
if (lastIndex < titleText.length) {
titleFragment.appendChild(document.createTextNode(
titleText.substring(lastIndex)
));
}
// 清空原标题并添加新内容
while (title.firstChild) {
title.removeChild(title.firstChild);
}
title.appendChild(titleFragment);
}
// 安全地高亮描述中的匹配文本
if (description.textContent.toLowerCase().includes(searchTerm)) {
const descText = description.textContent;
const regex = new RegExp(`(${escapeRegExp(searchTerm)})`, 'gi');
// 创建安全的DOM结构而不是直接使用innerHTML
const descFragment = document.createDocumentFragment();
let lastIndex = 0;
let match;
// 使用正则表达式查找所有匹配项
const descRegex = new RegExp(regex);
while ((match = descRegex.exec(descText)) !== null) {
// 添加匹配前的文本
if (match.index > lastIndex) {
descFragment.appendChild(document.createTextNode(
descText.substring(lastIndex, match.index)
));
}
// 添加高亮的匹配文本
const span = document.createElement('span');
span.className = 'highlight';
span.textContent = match[0];
descFragment.appendChild(span);
lastIndex = match.index + match[0].length;
// 防止无限循环
if (descRegex.lastIndex === 0) break;
}
// 添加剩余文本
if (lastIndex < descText.length) {
descFragment.appendChild(document.createTextNode(
descText.substring(lastIndex)
));
}
// 清空原描述并添加新内容
while (description.firstChild) {
description.removeChild(description.firstChild);
}
description.appendChild(descFragment);
}
} catch (error) {
console.error('Error highlighting search term:', error);
}
}
// 转义正则表达式特殊字符
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
// 重置搜索状态
@@ -187,14 +381,22 @@ document.addEventListener('DOMContentLoaded', () => {
isSearchActive = false;
try {
requestAnimationFrame(() => {
try {
// 清空搜索结果
searchSections.forEach(section => {
try {
const grid = section.querySelector('.sites-grid');
if (grid) {
while (grid.firstChild) {
grid.removeChild(grid.firstChild);
}
}
section.style.display = 'none';
} catch (sectionError) {
console.error('Error clearing search section:', sectionError);
}
});
// 移除搜索状态样式
@@ -202,16 +404,30 @@ document.addEventListener('DOMContentLoaded', () => {
// 恢复到当前激活的页面
const currentActiveNav = document.querySelector('.nav-item.active');
if (currentActiveNav) {
const targetPageId = currentActiveNav.getAttribute('data-page');
if (currentPageId !== targetPageId) {
if (targetPageId && currentPageId !== targetPageId) {
currentPageId = targetPageId;
pages.forEach(page => {
page.classList.toggle('active', page.id === targetPageId);
});
}
} else {
// 如果没有激活的导航项，默认显示首页
currentPageId = 'home';
pages.forEach(page => {
page.classList.toggle('active', page.id === 'home');
});
}
} catch (uiError) {
console.error('Error resetting search UI:', uiError);
}
});
} catch (error) {
console.error('Error in resetSearch:', error);
}
}
// 搜索输入事件（使用防抖）
const debounce = (fn, delay) => {
@@ -278,6 +494,13 @@ document.addEventListener('DOMContentLoaded', () => {
category.style.opacity = '1';
}, index * 100);
});
// 初始化搜索索引（使用requestIdleCallback或setTimeout延迟初始化，避免影响页面加载）
if ('requestIdleCallback' in window) {
requestIdleCallback(() => initSearchIndex());
} else {
setTimeout(initSearchIndex, 1000);
}
});
});
});

73
style.css
View File

@@ -5,6 +5,21 @@
box-sizing: border-box;
}
/* 防止滚动条导致的布局偏移 */
html {
overflow-y: scroll; /* 始终显示垂直滚动条 */
scrollbar-width: thin; /* Firefox */
}
/* 搜索高亮样式 */
.highlight {
background-color: rgba(74, 158, 255, 0.3);
border-radius: 2px;
padding: 0 2px;
font-weight: bold;
color: #ffffff;
}
body {
font-family: var(--font-body);
font-weight: var(--font-weight-body);
@@ -13,6 +28,7 @@ body {
color: #e4e6eb;
min-height: 100vh;
overflow: hidden; /* 防止body滚动 */
padding-right: 0 !important; /* 防止滚动条导致的布局偏移 */
}
/* 布局 */
@@ -206,7 +222,7 @@ body {
text-align: center;
}
/* 主内容区域 */
/* 主内容区域 - 修复滚动条问题 */
.content {
flex: 1;
margin-left: 240px;
@@ -214,12 +230,30 @@ body {
background-color: #1a1b1e;
position: relative;
height: 100vh; /* 固定高度 */
overflow-y: auto; /* 允许内容滚动 */
overflow-y: scroll; /* 始终使用滚动，而不是auto */
overflow-x: hidden;
max-width: calc(100vw - 240px);
display: flex;
flex-direction: column;
align-items: center;
scrollbar-width: thin; /* Firefox */
}
.content::-webkit-scrollbar {
width: 8px; /* 固定滚动条宽度 */
}
.content::-webkit-scrollbar-track {
background: transparent;
}
.content::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.content::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* 搜索框容器 - 固定在顶部 */
@@ -851,6 +885,8 @@ body {
flex-direction: column;
align-items: center;
z-index: 15;
transform: none !important; /* 确保没有变换 */
min-height: 400px; /* 确保最小高度，防止内容过少时的布局跳动 */
}
#search-results.active {
@@ -862,25 +898,36 @@ body {
.search-section {
width: 100%;
max-width: 1100px;
margin: 0 auto;
margin: 0 auto 2.5rem auto; /* 添加底部间距 */
position: relative;
z-index: 1;
transform: none !important; /* 确保没有变换 */
opacity: 1 !important; /* 确保可见 */
}
/* 确保搜索结果中的网格有正确的间距 */
.search-section .sites-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1.2rem; /* 确保间距一致 */
position: relative;
z-index: 1;
width: 100%;
}
/* 确保搜索结果中的卡片样式正确 */
.search-section .site-card {
margin: 0; /* 重置可能的外边距 */
width: 100%; /* 确保宽度正确 */
}
/* 清除之前可能导致问题的样式 */
.page {
transform: none;
transform: none !important;
visibility: visible;
transition: none;
}
#search-results {
transform: none;
}
.search-section {
transform: none;
opacity: 1;
width: 100% !important; /* 确保宽度一致 */
left: 0 !important; /* 确保位置固定 */
}
/* 优化布局结构 */