代码规范重构总结

重构目标

完善代码规范，将HTML文件中的内联JavaScript和CSS代码抽离到独立的文件中，并按照引用文件命名规则重新组织。

重构内容

1. JavaScript文件抽离

创建了以下专用JavaScript文件：

js/videos.js - 视频页面专用JavaScript
- 动态调整视频比例功能
- 从 videos.html 抽离
js/images.js - 图片页面专用JavaScript
- 图片尺寸调整功能
- Modal弹窗功能
- 图片切换功能
- 键盘导航支持
- 从 images.html 抽离
js/people.js - 团队成员页面专用JavaScript
- GitHub成员数据渲染
- 成员卡片创建
- 错误处理
- 从 people.md 抽离
js/projects.js - 项目页面专用JavaScript
- GitHub项目数据渲染
- 项目筛选功能
- 项目卡片创建
- 错误处理
- 从 projects.md 抽离

2. CSS文件抽离

创建了以下专用CSS文件：

css/videos.css - 视频页面专用样式
- 网格布局样式
- 视频容器样式
- 从 videos.html 抽离
css/images.css - 图片页面专用样式
- 图片网格布局
- Modal弹窗样式
- 导航按钮样式
- 从 images.html 抽离
css/people.css - 团队成员页面专用样式
- 团队成员卡片样式
- 加载和错误状态样式
- 响应式布局
- 从 people.md 抽离
css/projects.css - 项目页面专用样式
- 项目网格布局
- 筛选按钮样式
- 项目卡片样式
- 响应式布局
- 从 projects.md 抽离
css/contact.css - 联系页面专用样式
- 表单样式
- 输入框样式
- 从 contact.md 抽离

3. HTML文件更新

更新了以下文件，移除内联代码并添加外部文件引用：

中文版本

videos.html - 添加对 videos.css 和 videos.js 的引用
images.html - 添加对 images.css 和 images.js 的引用
people.md - 添加对 people.css 和 people.js 的引用
projects.md - 添加对 projects.css 和 projects.js 的引用
contact.md - 添加对 contact.css 的引用

英文版本

en/people.md - 添加对 people.css 和 people.js 的引用
en/projects.md - 添加对 projects.css 和 projects.js 的引用
en/contact.md - 添加对 contact.css 的引用

4. 主文件优化

更新了 assets/js/main.js，移除了已抽离到专用文件的代码
保留了必要的配置脚本（用于传递Jekyll数据给JavaScript）

重构成果

代码组织改进

模块化: 每个页面的JavaScript和CSS代码都独立成文件
可维护性: 代码更容易维护和调试
可复用性: 样式和脚本可以在多个页面间共享
命名规范: 文件按照引用页面命名，便于识别

文件结构

js/
├── videos.js      # 视频页面功能
├── images.js      # 图片页面功能
├── people.js      # 团队成员页面功能
├── projects.js    # 项目页面功能
└── main.js        # 通用功能

css/
├── videos.css     # 视频页面样式
├── images.css     # 图片页面样式
├── people.css     # 团队成员页面样式
├── projects.css   # 项目页面样式
├── contact.css    # 联系页面样式
└── style.css      # 主样式文件

性能优化

缓存友好: 外部文件可以被浏览器缓存
并行加载: CSS和JS文件可以并行加载
代码分离: HTML、CSS、JavaScript完全分离

验证结果

✅ 所有内联代码已成功抽离
✅ 文件命名符合规范
✅ 引用路径正确
✅ 无语法错误
✅ 功能完整性保持

注意事项

保留了必要的配置脚本（用于Jekyll数据传递）
英文版本和中文版本共享相同的CSS和JS文件
所有功能在重构后保持完整
代码结构更加清晰和规范

重构完成！代码库现在符合现代Web开发的最佳实践。