# 路由与页面结构

> 本文约定前台页面路由、页面职责和组件归属。

## 页面路由

| 路由 | 页面 | MVP 说明 |
| --- | --- | --- |
| `/` | 首页 | 展示场景入口、推荐骨架、最新文章。 |
| `/scenarios/` | 场景总览页 | 展示所有场景分类。 |
| `/scenarios/{slug}/` | 场景详情 / 列表页 | 展示某个场景下的骨架项目。 |
| `/projects/` | 骨架项目列表页 | 支持语言、框架、数据库、AI 分数和关键词筛选。 |
| `/projects/{slug}/` | 骨架详情页 | 展示项目详情、评分、推荐理由和外部链接。 |
| `/languages/{slug}/` | 语言聚合页 | MVP 可由筛选页替代。 |
| `/frameworks/{slug}/` | 框架聚合页 | MVP 可由筛选页替代。 |
| `/articles/` | 文章列表页 | 展示评测、对比、避坑指南。 |
| `/articles/{slug}/` | 文章详情页 | 展示文章正文。 |
| `/admin/` | Wagtail Admin | 后台内容维护。 |

## 页面职责

### 首页

- 展示主场景分类。
- 展示推荐骨架项目。
- 展示最新文章。
- 引导进入项目列表和场景页。

### 场景页

- 展示该场景说明。
- 展示该场景下骨架项目。
- 支持跳转项目详情。
- 无项目时展示空状态。

### 项目列表页

- 展示所有已发布骨架项目。
- 支持按语言、框架、数据库、AI 分数、关键词筛选。
- 筛选条件体现在 URL 查询参数中。
- 展示当前筛选条件和清除筛选入口。

### 项目详情页

- 根据 slug 定位单个骨架项目。
- 展示核心信息、技术栈、评分、适用场景、不适用场景、推荐理由。
- 外部链接打开到 GitHub / 官网。
- 如果是赞助项目，展示 Sponsored 标识。

### 文章页

- 展示评测、对比、避坑指南。
- 文章可以链接到骨架详情页。

### 后台

- 使用 Wagtail Admin。
- 编辑者维护项目、分类、标签、评分和文章。
- 不开发单独后台前端。

## 模板 / 组件建议

| 模板 / 组件 | 归属 | 说明 |
| --- | --- | --- |
| `base.html` | 全局 | 页面框架、导航、SEO block、页脚。 |
| `home_page.html` | 首页 | 场景入口、推荐项目、最新文章。 |
| `project_card.html` | 通用 include | 项目卡片。 |
| `project_filters.html` | 列表页 include | 筛选控件。 |
| `score_badge.html` | 通用 include | AI 友好度评分展示。 |
| `sponsored_badge.html` | 通用 include | 赞助标识。 |
| `empty_state.html` | 通用 include | 无结果状态。 |

## 导航规则

- 首页进入场景页：点击场景入口。
- 场景页进入项目详情：点击项目卡片。
- 项目列表保留筛选条件，清除筛选后回到 `/projects/`。
- 后台只通过 `/admin/` 访问。
- 权限不足使用 Wagtail 默认后台权限处理。