个人导航站

一个基于您的书签精心制作的现代化单页导航站，提供美观的界面和强大的搜索功能。

✨ 特性

• 🎨 现代化设计 - 采用渐变背景和毛玻璃效果
• 🔍 智能搜索 - 支持关键词搜索和实时高亮
• 📱 响应式布局 - 完美适配桌面和移动设备
• ⚡ 快捷键支持 - 提高使用效率
• 🎯 分类整理 - 按功能分类展示网站
• 💫 动画效果 - 流畅的交互体验
• 🌙 主题切换 - 支持深色模式（可选）

🚀 功能介绍

搜索功能

• 实时搜索网站名称、描述和关键词
• 搜索结果高亮显示
• 自动隐藏无匹配结果的分类
• 搜索历史记录（本地存储）

快捷键

• Ctrl/Cmd + K - 聚焦搜索框
• Esc - 清空搜索内容
• 数字键 1-9 - 快速访问可见的网站

分类导航

• 常用网站 - Google、YouTube、哔哩哔哩等
• GitHub - 代码仓库和开源项目
• 学习资源 - 在线课程和教程网站
• Web AI - AI工具和平台
• 资源下载 - 软件和媒体资源
• 开发工具 - 编程相关工具
• 实用工具 - 日常使用的在线工具

📁 文件结构

navigation-site/
├── index.html          # 主页面
├── style.css           # 样式文件
├── script.js           # 交互脚本
├── README.md           # 说明文档
└── bookmarks_2025_5_24.html  # 原始书签文件

🛠️ 使用方法

1. 直接使用

   • 下载所有文件到本地
   • 用浏览器打开 index.html

2. 部署到服务器

   • 上传文件到 Web 服务器
   • 通过域名访问

3. 自定义配置

   • 编辑 index.html 添加或修改网站
   • 修改 style.css 调整样式
   • 更新 script.js 添加新功能

🎨 自定义指南

添加新网站

在 index.html 中找到对应分类，添加新的网站卡片：

<a href="网站链接" class="site-card" data-keywords="搜索关键词">
    <div class="site-icon">
        <i class="图标类名"></i>
    </div>
    <div class="site-info">
        <h3>网站名称</h3>
        <p>网站描述</p>
    </div>
</a>

修改颜色主题

在 style.css 的 :root 部分修改 CSS 变量：

:root {
    --primary-color: #667eea;    /* 主色调 */
    --secondary-color: #764ba2;  /* 次要色调 */
    --accent-color: #f093fb;     /* 强调色 */
    /* ... 其他颜色变量 */
}

启用深色主题

在 script.js 中取消注释以下行：

createThemeToggle(); // 启用主题切换按钮

🌟 技术特点

• 纯前端实现 - 无需后端服务器
• 现代 CSS - 使用 CSS Grid、Flexbox 和 CSS 变量
• 原生 JavaScript - 无外部依赖
• Font Awesome - 丰富的图标库
• 响应式设计 - 移动优先的设计理念

📱 浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

🔧 开发说明

本地开发

1. 克隆或下载项目文件
2. 使用 Live Server 或类似工具启动本地服务器
3. 在浏览器中访问 http://localhost:端口号

性能优化

• 图标使用 Font Awesome CDN
• CSS 使用现代特性减少代码量
• JavaScript 采用事件委托优化性能

📄 许可证

本项目基于您的个人书签创建，仅供个人使用。

🤝 贡献

欢迎提出建议和改进意见！

---

享受您的个人导航站！ 🎉