chore(.gitignore): 添加空行以保持文件格式一致性
💡 本项目全程使用 Vibecoding 完成，总计耗时 5 小时 20 分钟
演示网址: TDP 24 年度/ 25年度 颁奖: https://tdp-hornor.onmicrosoft.cn/
微信内打开: https://tdp-hornor.icodeq.com/
GitHub 开源: https://github.com/zkeq/tdp-hornor
TDP Honor 是一个专为腾讯云开发者先锋（Tencent Cloud Developer Pioneer）项目打造的获奖者展示网站。该网站采用现代化的设计风格，提供流畅的用户体验，展示历年获奖者的荣誉信息。
- 🏠 精美首页 - 介绍 TDP 项目，展示统计数据和历年获奖信息
- 📅 年份选择 - 优雅的左右布局，快速选择查看不同年份的获奖名单
- 🏆 获奖名单 - 按奖项分类展示所有获奖者，支持点击查看详情
- 🎖️ 个人证书页 - 精美的证书展示页面，包含自定义证书样式和官方证书嵌入
- 📱 响应式设计 - 完美适配桌面端和移动端
- ⚡ 静态生成 - 使用 Astro SSG，构建时生成所有页面，性能卓越
- 🎨 现代化 UI - 采用 Tailwind CSS v4，玻璃态效果，流畅动画
- 框架: Astro - 现代化的静态站点生成器
- 样式: Tailwind CSS v4 - 实用优先的 CSS 框架
- 语言: TypeScript - 类型安全的 JavaScript 超集
- 数据源: 从 Git 仓库获取 CSV 格式的获奖者数据
tdp-hornor/
├── src/
│ ├── components/ # 可复用组件
│ │ ├── Background.astro # 背景效果组件
│ │ ├── Hero.astro # 首页英雄区域
│ │ ├── IntroCard.astro # 介绍卡片
│ │ ├── StatCard.astro # 统计卡片
│ │ ├── EditionCard.astro # 年份卡片
│ │ ├── CTAButton.astro # 行动号召按钮
│ │ ├── Footer.astro # 页脚
│ │ ├── AwardsPageHeader.astro # 获奖页面头部
│ │ ├── AwardCategoryCard.astro # 奖项分类卡片
│ │ ├── RecipientCard.astro # 获奖者卡片
│ │ ├── HonorBackButton.astro # 返回按钮
│ │ ├── HonorCertificateCard.astro # 证书卡片
│ │ ├── OfficialCertificateViewer.astro # 官方证书查看器
│ │ └── SharePrompt.astro # 分享提示
│ ├── layouts/ # 布局组件
│ │ └── BaseLayout.astro # 基础布局
│ ├── pages/ # 页面路由
│ │ ├── index.astro # 首页
│ │ ├── awards.astro # 年份选择页
│ │ ├── awards/
│ │ │ └── [year].astro # 动态年份获奖名单页
│ │ └── hornor/
│ │ └── [id].astro # 动态个人证书页
│ └── styles/ # 全局样式
│ └── global.css # 全局 CSS 和动画
├── public/ # 静态资源
│ └── intro.txt # TDP 介绍文本
├── astro.config.mjs # Astro 配置
├── tailwind.config.js # Tailwind 配置
├── tsconfig.json # TypeScript 配置
└── package.json # 项目依赖
- Node.js 18.0 或更高版本
- npm 或 pnpm
# 克隆项目
git clone https://github.com/zkeq/tdp-hornor.git
cd tdp-hornor
# 安装依赖
npm install
# 启动开发服务器
npm run dev
访问 http://localhost:4321 查看网站。
# 构建生产版本
npm run build
# 预览构建结果
npm run preview
构建产物将生成在 dist/ 目录。
项目从以下 API 获取获奖者数据：
https://cnb.onmicrosoft.cn/tdp/tdp/-/git/raw/main/docs/honors/{year}.md
数据格式为 Markdown 文件中嵌入的 CSV：
nickname,award,grant_time,number
张三,年度贡献奖,2024-12-01,21000001
李四,技术创新奖,2024-12-01,21000002
- 玻璃态效果 - 使用 backdrop-blur 和半透明背景创建现代化的玻璃态 UI
- 流畅动画 - 自定义 CSS 动画，包括淡入、上滑等效果
- 渐变文字 - 使用 CSS 渐变创建金属质感的文字效果
- 响应式布局 - 移动端优先的设计，完美适配各种屏幕尺寸
- 深色主题 - 统一的深色配色方案，减少视觉疲劳
在 src/pages/awards/[year].astro 和 src/pages/hornor/[id].astro 中修改 years 数组：
const years = ["2024", "2025"]; // 添加或修改年份
在相关页面中修改 apiUrl 变量：
const apiUrl = `https://your-api-domain.com/path/${year}.md`;
全局样式定义在 src/styles/global.css 中，包括：
- 自定义动画
- 玻璃态效果类
- 渐变文字类
项目构建后生成纯静态文件，可以部署到任何支持静态网站的平台：
- GitHub Pages
- Cloudflare Pages
- AWS S3 + CloudFront
- 腾讯云 COS + CDN
欢迎贡献代码、报告问题或提出建议！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启 Pull Request
- 使用 TypeScript 编写代码
- 遵循 Astro 组件最佳实践
- 保持组件的单一职责
- 添加必要的注释
- 确保响应式设计
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
- Astro - 提供优秀的静态站点生成框架
- Tailwind CSS - 提供强大的 CSS 工具集
- 腾讯云开发者先锋 - 项目灵感来源
如有问题或建议，欢迎通过以下方式联系：
- 提交 Issue
- 发送邮件至：admin@icodeq.com
Made with ❤️ by Zkeq
⭐ 如果这个项目对你有帮助，请给它一个星标！
About
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
