优雅·简约个人站

一个集成导航和博客功能的现代化个人站点，采用单文件架构，支持离线部署。

📸 项目预览

✨ 特色功能

🎯 双模式设计

• 导航模式 - 网站收藏夹，支持分组管理和标签筛选
• 博客模式 - 文章写作平台，支持路由、归档、RSS导出

🎨 精美界面

• 现代化设计 - 采用卡片式布局和优雅的视觉效果
• 明暗主题 - 自动跟随系统设置或手动切换
• 7种主题色 - 黑、蓝、绿、红、紫、橙、青可选
• 完全响应式 - 完美适配桌面、平板、手机

🔍 强大搜索

• 实时搜索 - 支持标题、描述、内容、标签全文搜索
• 标签筛选 - 可多选标签进行精确筛选
• 快捷键支持 - 按 / 快速聚焦搜索框

📱 用户体验

• 键盘导航 - 完整的键盘快捷键支持
• 右键菜单 - 导航卡片支持复制链接等操作
• 平滑动画 - 悬停、点击、切换都有流畅动效
• 加载优化 - 图片懒加载，favicon自动获取

🚀 核心功能

导航功能

• ✅ 网站链接收藏管理
• ✅ 分组组织（AI/大模型、设计/灵感、开发/文档等）
• ✅ 标签系统和筛选
• ✅ favicon自动获取
• ✅ 右键菜单操作

博客功能

• ✅ 文章写作和管理
• ✅ 标签分类系统
• ✅ 文章归档按年份展示
• ✅ RSS订阅导出
• ✅ 精选文章展示
• ✅ 阅读进度条
• ✅ 目录生成和导航

数据管理

• ✅ 本地存储（localStorage）
• ✅ JSON格式导入/导出
• ✅ 数据完整性保护
• ✅ 一键备份下载

🛠 技术特点

单文件架构

• 3000+行代码 全部集中在 index.html
• 无外部依赖 完全自包含
• 离线可用 可放置在任何服务器或本地运行
• 易于部署 只需上传一个文件

现代化开发

• ES6+ 语法 使用现代JavaScript特性
• 组件化思维 功能模块清晰分离
• 事件驱动 响应式交互设计
• 渐进增强 从移动端优先设计

设计系统

• CSS变量 统一的颜色和尺寸管理
• 语义化命名 易于维护和扩展
• 无障碍支持 完整的ARIA标签和键盘导航

🤖 AI生成说明

特别说明： 这个项目的全部3000行代码由 GPT-5 在 Canvas 中仅用 两次对话 完成！展现了AI在代码生成方面的强大能力。整体设计风格优雅，功能完整，代码质量高。

📦 快速开始

直接使用

1. 下载 index.html 文件
2. 用现代浏览器打开
3. 开始使用！

服务器部署

# 使用Python快速启动服务器
python -m http.server 8000

# 或使用Node.js
npx http-server

# 然后访问 http://localhost:8000

自定义数据

1. 点击右上角"数据"按钮
2. 在JSON编辑器中修改数据结构
3. 保存更改

📊 数据结构

导航数据示例

{
  "collections": [
    {
      "name": "AI / 大模型",
      "links": [
        {
          "title": "OpenAI",
          "url": "https://openai.com",
          "desc": "领先的通用人工智能研究与产品",
          "tags": ["AI", "大模型"]
        }
      ]
    }
  ]
}

博客数据示例

{
  "posts": [
    {
      "id": 1,
      "title": "文章标题",
      "slug": "article-slug",
      "date": "2025-08-21",
      "tags": ["前端", "设计"],
      "pinned": true,
      "featured": true,
      "content": "<p>HTML格式的文章内容</p>"
    }
  ]
}

⌨️ 快捷键

快捷键	功能
/	聚焦搜索框
t	切换明暗主题
i	打开导入/导出
?	显示帮助
Esc	清除搜索/关闭对话框
Tab	卡片间导航
Enter	打开链接/文章

🎯 使用场景

个人导航站

• 收藏常用网站和工具
• 按类别组织书签
• 快速搜索和访问

个人博客

• 记录技术笔记
• 分享经验心得
• 展示项目作品

知识管理

• 整理学习资源
• 构建个人知识库
• 标签化分类管理

🔧 浏览器兼容性

• ✅ Chrome 80+
• ✅ Firefox 75+
• ✅ Safari 13+
• ✅ Edge 80+

📝 更新日志

v1.0.0 (当前版本)

• ✨ 导航和博客双模式
• 🎨 7种主题色支持
• 🔍 强大的搜索和筛选功能
• 📱 完全响应式设计
• 💾 数据导入导出功能
• 🔄 RSS订阅支持

🤝 贡献

欢迎提交Issues和Pull Requests来改进项目！

📄 许可证

MIT License - 可自由使用和修改

---

💡 这是一个展示AI代码生成能力的优秀案例，仅两次GPT-5对话就创造了如此完整优雅的个人站点解决方案！