unicom/tdp2

Public

WeChat Login

Code Issues Pull requests Events Packages Insights

main

本博客系统由腾讯云TDP成员联合开发

css
data
js
README.md
about.html
backend.html
frontend.html
index.html
links.html
personal.html
security.html
server.html

雨落秋垣 - 技术博客

一个基于 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; /* 次要色调 */
  /* 更多变量... */
}