一个基于 JSON 数据驱动的静态博客系统，清新简洁的设计风格。

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

• 🎨 清新设计：蓝紫渐变配色，简洁现代的布局
• 📝 多分类：首页、前端、后端、服务器、安全、个人、关于我、友情链接
• 📄 分页功能：支持每页 10 条记录（可配置）
• 🔍 搜索功能：支持文章标题、摘要、标签搜索
• 📱 响应式设计：完美适配移动端和桌面端
• 🎯 模板化：基于 JSON 数据驱动，易于维护
• ⚡ 纯静态：无需后端服务器
• 🖥️ 全宽布局：导航栏、Header、Footer 严丝合缝贴合浏览器边缘

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": "2026-01-24",
      "tags": ["React", "前端"],
      "views": 100,
      "cover": ""
    }
  ]
}

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

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

编辑 data/json/about.json：

{
  "about": {
    "name": "博主",
    "introduction": "个人简介",
    "bio": "详细介绍",
    "skills": ["技能1", "技能2"],
    "contact": {
      "email": "邮箱",
      "github": "GitHub地址"
    }
  }
}

编辑 data/json/links.json：

{
  "links": [
    {
      "name": "网站名称",
      "url": "https://example.com",
      "description": "网站描述"
    }
  ]
}

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

# 使用 Python
cd c:/Users/Administrator/Desktop/uni
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: #ffffff;      /* 主背景色 */
  --bg-secondary: #f7f9fc;     /* 次要背景色 */
  --accent-primary: #3498db;   /* 主色调 */
  --accent-secondary: #7f8c8d; /* 次要色调 */
  /* 更多变量... */
}

• 两栏布局：左侧文章列表 + 右侧边栏
• 导航栏固定在顶部
• Header 和 Footer 全宽贴合浏览器边缘

• 单栏居中布局，最大宽度 800px
• 更适合展示个人信息

• 网格布局，自适应卡片排列

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

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

MIT License