行为
Feature #224
打开[AI] 主题切换与SEO优化
状态:
Resolved
优先级:
Normal
指派给:
-
开始日期:
2026-02-27
计划完成日期:
% 完成:
0%
预期时间:
描述
实现全局深色/浅色主题切换功能,以及完整的 SEO 优化配置。
主题切换功能:
- 使用 React Context 创建 ThemeProvider,管理 dark/light 主题状态
- 主题偏好持久化到 localStorage,首次访问时跟随系统偏好(prefers-color-scheme)
- Tailwind CSS dark mode 使用 class 策略,ThemeProvider 控制 html 元素的 dark 类名
- 切换按钮使用太阳/月亮图标,带平滑过渡动画
- 所有页面组件的颜色使用 Tailwind 的 dark: 变体适配
SEO优化:
- 使用 react-helmet-async 为每个页面设置独立的 title、description、keywords meta tags
- 配置 Open Graph 标签(og:title, og:description, og:image)用于社交媒体分享
- 生成 sitemap.xml(从后端 /api/v1/sitemap 获取数据,构建为静态文件或动态路由)
- 配置 robots.txt
- 语义化 HTML 标签(header, nav, main, section, article, footer)
- 图片添加 alt 属性
- 页面标题使用合理的 h1~h6 层级结构
UI设计要求:
- 主题切换按钮放置在导航栏右侧,图标尺寸20x20
- 切换时全局颜色过渡时间 200ms
- 确保深色和浅色主题下所有文字与背景的对比度符合 WCAG AA 标准(至少4.5:1)
行为