Skip to content

PAGE_OPTIMIZATION_PLAN.md

Latest commit

 

History

History
505 lines (378 loc) · 13.3 KB

PAGE_OPTIMIZATION_PLAN.md

File metadata and controls

505 lines (378 loc) · 13.3 KB

网站页面优化计划

创建日期: 2025-11-15
状态: 进行中
版本: 1.0

📋 优化目标

  1. 统一性和一致性: 确保所有页面使用统一的导航、样式和结构
  2. 路径规范化: 更新所有路径引用，符合新的文件夹结构规范
  3. 内容组织: 优化内容展示，提升用户体验
  4. 响应式设计: 确保所有页面在移动端正常显示
  5. 性能优化: 优化图片加载、代码结构等
  6. 可访问性: 改善SEO和可访问性

🎯 优化优先级

P0 - 高优先级（核心功能页面）

  • index.html - 主页（最重要）
  • publications.html - 出版物列表
  • projects.html - 项目列表
  • presentations.html - 演示文稿列表

P1 - 中优先级（内容页面）

  • news.html - 新闻列表
  • books.html - 书籍列表
  • conferences.html - 会议页面（已整合，需优化）

P2 - 低优先级（辅助页面）

  • teaching.html - 教学页面
  • team.html - 团队页面
  • talks.html - 演讲页面
  • ProfServ.html - 专业服务页面

📝 逐页优化清单

1. index.html - 主页 ⭐⭐⭐

当前状态

  • ✅ 基本结构完整
  • ✅ 导航栏功能正常
  • ✅ 主题切换和语言切换正常
  • ⚠️ 部分路径使用大写（images/, cv/, presentations/）
  • ⚠️ 会议链接已更新，但路径仍为大写

优化任务

1.1 路径规范化

  • 更新 images/ → images/ 的所有引用
  • 更新 cv/ → cv/ 的所有引用（待重命名后）
  • 更新 presentations/ → presentations/ 的所有引用（待重命名后）
  • 检查所有相对路径是否正确

1.2 内容优化

  • 检查并更新个人简介内容
  • 优化"Conferences & Academic Activities"部分的显示
  • 确保所有链接指向正确位置
  • 检查图片路径和alt属性

1.3 代码优化

  • 检查是否有重复的CSS样式
  • 优化JavaScript代码结构
  • 确保所有功能正常工作（主题切换、语言切换）

1.4 SEO和可访问性

  • 添加meta描述
  • 添加Open Graph标签
  • 检查所有图片的alt属性
  • 确保语义化HTML结构

1.5 响应式设计

  • 测试移动端显示
  • 优化移动端导航菜单
  • 检查卡片布局在移动端的表现

2. publications.html - 出版物列表 ⭐⭐⭐

当前状态

  • ✅ 基本结构完整
  • ⚠️ 路径可能使用大写（images/, papers/）
  • ⚠️ papers文件夹应整合到publications

优化任务

2.1 路径规范化

  • 更新 images/ → images/ 的所有引用
  • 更新 papers/ → publications/ 的所有引用（待整合后）
  • 检查所有论文详情页链接

2.2 内容组织

  • 检查论文列表是否完整
  • 优化论文卡片显示
  • 添加筛选功能（年份、类型等，如需要）
  • 确保论文详情页链接正确

2.3 代码优化

  • 统一导航栏代码（与其他页面一致）
  • 检查CSS样式一致性
  • 优化JavaScript代码

2.4 SEO和可访问性

  • 添加meta描述
  • 添加结构化数据（Schema.org）
  • 优化论文标题和描述的SEO

3. projects.html - 项目列表 ⭐⭐⭐

当前状态

  • ✅ 基本结构完整
  • ⚠️ 项目文件夹命名不规范（Air_Pollution_Exporsure/, NLP_Sentiment Analysis/等）
  • ⚠️ 路径可能使用大写（projects/, images/）

优化任务

3.1 路径规范化

  • 更新 projects/ → projects/ 的所有引用（待重命名后）
  • 更新 images/ → images/ 的所有引用
  • 更新项目文件夹路径（待重命名后）
    • 30DayMapChallenge/ → 30-day-map-challenge/
    • Air_Pollution_Exporsure/ → air-pollution-exposure/
    • NLP_Sentiment Analysis/ → nlp-sentiment-analysis/
    • Spatial-temporal pattern mining of Air Pollution/ → spatial-temporal-air-pollution/
    • SVI_Data_Processing/ → svi-data-processing/
    • Undergraduate_Thesis/ → undergraduate-thesis/

3.2 内容组织

  • 检查项目列表是否完整
  • 优化项目卡片显示
  • 添加项目分类标签（如需要）
  • 确保项目详情页链接正确

3.3 代码优化

  • 统一导航栏代码
  • 检查CSS样式一致性
  • 优化项目卡片布局

3.4 SEO和可访问性

  • 添加meta描述
  • 优化项目描述的SEO

4. presentations.html - 演示文稿列表 ⭐⭐⭐

当前状态

  • ✅ 已整合会议内容
  • ✅ Tag筛选功能正常
  • ✅ URL参数支持已实现
  • ⚠️ 路径使用大写（presentations/）

优化任务

4.1 路径规范化

  • 更新 presentations/ → presentations/ 的所有引用（待重命名后）
  • 更新会议详情页链接
  • 更新课程、工作坊、研讨会链接

4.2 内容组织

  • 检查所有演示文稿是否已列出
  • 优化演示文稿卡片显示
  • 确保Tag系统正常工作
  • 检查会议、课程、工作坊分类是否正确

4.3 代码优化

  • 统一导航栏代码
  • 优化Tag筛选的JavaScript代码
  • 检查CSS样式一致性

4.4 SEO和可访问性

  • 添加meta描述
  • 优化Tag的SEO

5. news.html - 新闻列表 ⭐⭐

当前状态

  • ✅ 基本结构完整
  • ✅ 已添加GISphere条目
  • ⚠️ GISphere文件夹仍在conferences/下

优化任务

5.1 路径规范化

  • 更新GISphere链接（待移至news后）
  • 检查所有新闻条目链接

5.2 内容组织

  • 检查新闻列表是否完整
  • 优化新闻条目显示
  • 添加时间排序（如需要）

5.3 代码优化

  • 统一导航栏代码
  • 检查CSS样式一致性

5.4 SEO和可访问性

  • 添加meta描述

6. books.html - 书籍列表 ⭐⭐

当前状态

  • ✅ 基本结构完整
  • ⚠️ 路径可能使用大写（images/）

优化任务

6.1 路径规范化

  • 更新 images/ → images/ 的所有引用
  • 检查书籍详情页链接

6.2 内容组织

  • 检查书籍列表是否完整
  • 优化书籍卡片显示

6.3 代码优化

  • 统一导航栏代码
  • 检查CSS样式一致性

7. conferences.html - 会议页面 ⭐

当前状态

  • ✅ 已更新为指向presentations.html
  • ✅ 添加了重定向提示
  • ⚠️ 可以进一步优化或考虑删除

优化任务

7.1 内容优化

  • 考虑是否保留此页面
  • 如果保留，优化重定向提示的显示
  • 添加更多说明信息

7.2 代码优化

  • 统一导航栏代码
  • 简化页面结构（如果仅作为重定向）

8. teaching.html - 教学页面 ⭐

当前状态

  • ⚠️ 需要检查内容和结构

优化任务

8.1 内容检查

  • 检查教学内容是否完整
  • 更新课程信息
  • 检查链接是否正确

8.2 路径规范化

  • 更新所有路径引用
  • 检查图片路径

8.3 代码优化

  • 统一导航栏代码
  • 检查CSS样式一致性

9. team.html - 团队页面 ⭐

当前状态

  • ⚠️ 需要检查内容和结构

优化任务

9.1 内容检查

  • 检查团队成员信息是否完整
  • 更新成员照片和简介
  • 检查链接是否正确

9.2 路径规范化

  • 更新所有路径引用
  • 检查图片路径

9.3 代码优化

  • 统一导航栏代码
  • 检查CSS样式一致性

10. talks.html - 演讲页面 ⭐

当前状态

  • ⚠️ 需要检查内容和结构

优化任务

10.1 内容检查

  • 检查演讲列表是否完整
  • 更新演讲信息
  • 检查链接是否正确

10.2 路径规范化

  • 更新所有路径引用
  • 检查图片路径

10.3 代码优化

  • 统一导航栏代码
  • 检查CSS样式一致性

11. ProfServ.html - 专业服务页面 ⭐

当前状态

  • ⚠️ 需要检查内容和结构

优化任务

11.1 内容检查

  • 检查专业服务信息是否完整
  • 更新服务内容
  • 检查链接是否正确

11.2 路径规范化

  • 更新所有路径引用
  • 检查图片路径

11.3 代码优化

  • 统一导航栏代码
  • 检查CSS样式一致性

🔧 通用优化任务

导航栏统一化

  • 创建统一的导航栏组件或模板
  • 确保所有页面使用相同的导航结构
  • 统一active状态的处理
  • 统一主题切换和语言切换功能

路径引用检查

  • 全局搜索并替换 images/ → images/
  • 全局搜索并替换 cv/ → cv/（待重命名后）
  • 全局搜索并替换 presentations/ → presentations/（待重命名后）
  • 全局搜索并替换 projects/ → projects/（待重命名后）
  • 检查所有相对路径是否正确

CSS样式统一

  • 确保所有页面使用相同的style.css
  • 检查是否有重复的CSS代码
  • 统一卡片样式
  • 统一按钮样式
  • 统一表单样式（如有）

JavaScript功能统一

  • 统一主题切换功能
  • 统一语言切换功能
  • 统一图片查看器（如有）
  • 优化代码结构，减少重复

SEO优化

  • 为每个页面添加独特的meta描述
  • 添加Open Graph标签
  • 添加Twitter Card标签
  • 添加结构化数据（Schema.org）
  • 优化标题标签（H1, H2等）

性能优化

  • 优化图片大小和格式
  • 添加图片懒加载
  • 压缩CSS和JavaScript
  • 检查并优化外部资源加载

可访问性优化

  • 确保所有图片有alt属性
  • 检查颜色对比度
  • 确保键盘导航可用
  • 添加ARIA标签（如需要）

响应式设计

  • 测试所有页面在移动端的显示
  • 优化移动端导航菜单
  • 检查卡片布局在移动端的表现
  • 优化表格在移动端的显示（如有）

📅 实施计划

第一阶段：核心页面优化（1-2周）

  1. Week 1

    • Day 1-2: 优化 index.html
    • Day 3-4: 优化 publications.html
    • Day 5: 优化 projects.html

  2. Week 2

    • Day 1-2: 优化 presentations.html
    • Day 3: 优化 news.html
    • Day 4: 优化 books.html
    • Day 5: 测试和修复

第二阶段：辅助页面优化（1周）

  • Day 1: 优化 teaching.html
  • Day 2: 优化 team.html
  • Day 3: 优化 talks.html
  • Day 4: 优化 ProfServ.html
  • Day 5: 优化 conferences.html（或决定删除）

第三阶段：通用优化和测试（1周）

  • Day 1-2: 统一导航栏和样式
  • Day 3: SEO优化
  • Day 4: 性能优化
  • Day 5: 全面测试和修复

✅ 验证清单

每个页面优化完成后，需要验证：

功能验证

  • 页面可以正常访问
  • 所有链接正常工作
  • 所有图片正常显示
  • 导航栏正常工作
  • 主题切换功能正常
  • 语言切换功能正常
  • 移动端显示正常

代码验证

  • 无404错误
  • 无控制台错误
  • 无linter错误
  • HTML验证通过
  • CSS验证通过

内容验证

  • 所有内容完整显示
  • 格式正确
  • 链接指向正确位置
  • 图片路径正确

📝 注意事项

  1. 备份: 每次优化前创建Git提交，便于回滚
  2. 测试: 每个页面优化后立即测试
  3. 渐进式: 不要一次性修改太多，逐步优化
  4. 文档: 记录重要的修改和决策
  5. 兼容性: 确保修改不影响现有功能

🔄 更新日志

  • 2025-11-15: 创建优化计划文档

  • 2025-11-15: 完成 index.html 初步优化

    • ✅ 添加SEO meta标签（description, keywords, Open Graph, Twitter Card）
    • ✅ 更新所有路径引用为小写（images/ → images/, cv/ → cv/, presentations/ → presentations/）
    • ✅ 添加canonical URL

  • 2025-11-15: 完成文件夹重命名和路径修复

    • ✅ 使用 git mv 将Git中的路径重命名为小写（125个文件）
    • ✅ 修复logo显示问题（Git路径与代码路径现在一致）
    • ✅ 所有路径引用已更新为小写

  • 2025-11-15: 完成主要页面SEO优化

    • ✅ publications.html - 添加SEO meta标签
    • ✅ projects.html - 添加SEO meta标签
    • ✅ presentations.html - 添加SEO meta标签
    • ✅ news.html - 添加SEO meta标签
    • ✅ books.html - 添加SEO meta标签
    • ✅ 所有页面都包含：description, keywords, Open Graph, Twitter Card, canonical URL

  • 2025-11-15: 完成辅助页面SEO优化和标题更新

    • ✅ conferences.html - 添加SEO meta标签
    • ✅ teaching.html - 更新标题（Xinyu Chen → Jiale Guo），添加SEO meta标签，更新HTML结构
    • ✅ team.html - 更新标题（Xinyu Chen → Jiale Guo），添加SEO meta标签，更新HTML结构
    • ✅ talks.html - 更新标题（Xinyu Chen → Jiale Guo），添加SEO meta标签，更新HTML结构
    • ✅ ProfServ.html - 更新标题（Xinyu Chen → Jiale Guo），添加SEO meta标签，更新HTML结构
    • ✅ 所有页面都包含完整的SEO标签和正确的DOCTYPE声明

优化完成情况:

  • ✅ 所有主要页面已完成SEO优化
  • ✅ 所有辅助页面已完成SEO优化和标题更新
  • ✅ 文件夹重命名和路径规范化已完成
  • ✅ Logo显示问题已修复

后续建议:

  • 测试所有页面功能
  • 检查移动端显示
  • 性能优化（图片压缩等）