一个基于 JSON 数据驱动的静态博客系统，具有科技感的现代化设计。

示例页面：https://tdp.hust.asia

• ✨ 科技感设计：深色主题，渐变色彩，光晕效果
• 📝 多分类：首页、前端、后端、服务器、安全、个人、关于我、友情链接
• 📄 分页功能：支持每页 10 条记录（可配置）
• 🔍 搜索功能：支持文章标题、摘要、标签搜索
• 📱 响应式设计：完美适配移动端和桌面端
• 🎯 模板化：基于 JSON 数据驱动，易于维护
• ⚡ 纯静态：无需后端服务器

uni/
├── index.html          # 首页
├── frontend.html       # 前端分类页
├── backend.html        # 后端分类页
├── server.html         # 服务器分类页
├── security.html       # 安全分类页
├── personal.html       # 个人分类页
├── about.html          # 关于我页面
├── links.html          # 友情链接页面
├── css/
│   └── style.css       # 全局样式
├── js/
│   └── main.js         # 主要逻辑
└── data/
    └── json/
        ├── config.json      # 全局配置
        ├── home.json        # 首页数据
        ├── frontend.json    # 前端分类数据
        ├── backend.json     # 后端分类数据
        ├── server.json      # 服务器分类数据
        ├── security.json    # 安全分类数据
        ├── personal.json    # 个人分类数据
        ├── about.json       # 关于我数据
        └── links.json       # 友情链接数据

编辑对应的 JSON 文件，例如在 data/json/frontend.json 中添加新文章：

{
  "articles": [
    {
      "id": 1,
      "title": "文章标题",
      "summary": "文章摘要",
      "content": "文章内容",
      "category": "frontend",
      "author": "博主",
      "date": "2025-01-24",
      "tags": ["React", "前端"],
      "views": 100,
      "cover": ""
    }
  ]
}

编辑 data/json/config.json 可以修改：

• 博客名称和描述
• 分页每页显示数量
• 最大分页按钮数

由于浏览器 CORS 限制，建议使用本地服务器预览：

# 使用 Python
python -m http.server 8000

# 使用 Node.js (http-server)
npx http-server

# 使用 PHP
php -S localhost:8000

然后在浏览器中访问 http://localhost:8000

所有样式变量定义在 css/style.css 的 :root 中：

:root {
  --bg-primary: #0a0e17;      /* 主背景色 */
  --accent-primary: #3b82f6;   /* 主色调 */
  --accent-secondary: #8b5cf6; /* 次要色调 */
  /* 更多变量... */
}

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• 移动端浏览器

• 纯 HTML5
• 原生 JavaScript (ES6+)
• CSS3 (Flexbox, Grid, CSS Variables)

MIT License