logo
0
0
WeChat Login

雨落秋垣 - 技术博客

一个基于 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

About

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

Language
CSS46.3%
JavaScript29%
HTML24.7%