一个专注于 AI 领域前沿科技资讯的静态网站，每日分享 AI 行业最新动态与深度解读。
梯度前沿是一个纯静态的 AI 科技资讯网站，采用 Vite 构建，复刻小米 MIMO 极简 AI 高级风格。网站通过编辑 JSON 数据文件管理资讯内容，部署于 GitHub Pages，无需后端服务。
- 极简视觉设计 — 复刻小米 MIMO 风格，大量留白，低饱和色彩
- 深色/浅色主题 — 一键切换，纯白/炭黑双色方案
- Hero 视觉区 — 双层错位文字矩阵水印 + 鼠标跟随光影视差交互
- 资讯卡片流 — 极细浅边框卡片，磨砂玻璃质感，悬浮上浮动画
- 分类筛选 — 横向标签筛选（大语言模型/CV/机器人/AI应用/前沿论文/AI行业等）
- 实时搜索 — 关键词搜索，匹配标题、摘要、标签
- 归档页面 — 按月份组织的历史资讯浏览
- 详情模态框 — 点击卡片展开完整资讯详情
- 滚动动画 — Intersection Observer 实现元素渐入加载
- 响应式布局 — 完美适配桌面和移动端
| 层级 | 技术 |
|---|---|
| 构建工具 | Vite 8.0 |
| 页面结构 | HTML5 |
| 样式 | CSS3（CSS 变量、动画、Grid 布局） |
| 交互 | 原生 JavaScript（ES6+ 模块化） |
| 字体 | Inter + Noto Sans SC |
| 部署 | GitHub Pages + GitHub Actions |
-Gradient-Frontier/
├── index.html # 首页
├── about.html # 关于页
├── archive.html # 归档页
├── vite.config.js # Vite 配置
├── package.json # 项目依赖
├── public/
│ └── favicon.svg # 站点图标
├── src/
│ ├── main.js # 首页入口
│ ├── about-main.js # 关于页入口
│ ├── archive-main.js # 归档页入口
│ ├── components/ # UI 组件
│ │ ├── archive.js # 归档组件
│ │ ├── filter.js # 筛选组件
│ │ ├── hero.js # Hero 区域
│ │ ├── intro.js # 开场动画
│ │ ├── modal.js # 详情模态框
│ │ ├── nav.js # 导航栏
│ │ ├── newsCard.js # 资讯卡片
│ │ ├── search.js # 搜索组件
│ │ └── theme.js # 主题切换
│ ├── data/
│ │ └── news.json # 资讯数据
│ ├── styles/ # 样式文件
│ │ ├── main.css # 全局样式
│ │ ├── animations.css # 动画
│ │ ├── cards.css # 卡片样式
│ │ ├── hero.css # Hero 区域
│ │ ├── intro.css # 开场动画
│ │ ├── nav.css # 导航栏
│ │ └── theme.css # 主题变量
│ └── utils/
│ ├── animations.js # 动画工具
│ └── helpers.js # 辅助函数
└── .github/workflows/
└── deploy.yml # GitHub Pages 自动部署
- Node.js 18+
- npm 或 pnpm
# 安装依赖
npm install
# 开发模式（热重载）
npm run dev
# 构建生产版本
npm run build
# 预览构建结果
npm run preview资讯内容存储在 src/data/news.json 中，新增资讯只需添加一条记录：
{
"id": "unique-id",
"title": "资讯标题",
"summary": "资讯摘要",
"tags": ["大语言模型", "AI应用"],
"source": "来源",
"date": "2026-01-15",
"url": "https://example.com/original-article"
}| 用途 | 浅色主题 | 深色主题 |
|---|---|---|
| 主背景 | #FFFFFF |
#0A0A0B |
| 辅助背景 | #F5F5F7 |
#1A2332 |
| 强调色 | #4A9EFF |
#6BB5FF |
| 主文字 | #1D1D1F |
#F5F5F7 |
| 次文字 | #86868B |
#98989D |
| 边框 | rgba(0,0,0,0.06) |
rgba(255,255,255,0.08) |
- 英文：
Inter（weight 300-500） - 中文：
Noto Sans SC（weight 300-500）
- 大量留白，宽松栅格居中排版（
max-width: 1200px） - 无多余装饰元素，信息层级简洁清晰
- 极细浅边框，轻微悬浮上浮动画
- 弱磨砂玻璃质感（
backdrop-filter: blur(10px)）
推送到 GitHub 后，.github/workflows/deploy.yml 会自动构建并部署到 GitHub Pages。
本项目基于 MIT 协议开源 — 详见 LICENSE 文件。
站名：梯度前沿 Gradient Frontier | 定位：AI 技术观察 | 协议：MIT