明白了，你是要一个完全结合你的教学目标、课程标准、项目目标的博客拆分清单，确保每个拆分项既能支持“还原博客”，又能映射到《Web 前端技术》的能力点和课堂任务。
我会按 整站 → 页面 → 区域/组件 → 支撑要素 四层来列出，并在每一项旁边标明它对应的能力点（HTML/CSS/JS/a11y/性能/安全等），这样你可以直接用作课程设计参考。
📋 博客拆分清单（结合教学目标与课程标准）
I. 整站级拆分（项目总控）
| 拆分项 |
说明 |
对应课程能力点 |
| 信息架构（IA）图 |
站点的导航结构、页面关系图（首页、教学日志、学生作品、联系、学习资源） |
HTML 语义结构；信息架构 |
全局样式变量 (tokens.css) |
色板、字体、字号层级、间距、圆角、阴影 |
CSS 变量、设计系统 |
主题覆盖文件 (theme-override.css) |
基于原主题的差异补丁 |
CSS 选择器优化、样式调优 |
站点配置 (site-config.json) |
站点标题、副标题、LOGO 路径、版权声明 |
配置与模板数据分离 |
媒体清单 (media-manifest.json) |
全站图片/视频资源路径、版权信息 |
媒体管理、性能优化 |
| SEO 元信息模板 |
title/description/OG 标签等 |
SEO、结构化数据 |
| 可访问性检查表 |
全局 a11y 要求（对比度、焦点可见、键盘流） |
a11y 基础与评测 |
II. 页面级拆分（一级项目）
| 页面 |
内容要素 |
对应课程能力点 |
| 首页 |
标题区、横幅区、内容精选区、页脚 |
HTML5 区块元素、CSS 布局、响应式设计 |
| 教学日志 |
文章列表模板、分页、文章详情页模板 |
列表与卡片布局、分页实现、可读性优化 |
| 学生作品 |
作品卡片网格、筛选/排序 |
Grid 布局、JS 过滤与排序 |
| 联系 |
原生表单（必填/格式校验）、JS 渐进增强（防抖/异步/输入恢复）、成功/错误提示 |
表单与验证、JS 事件与状态管理、a11y |
| 学习资源 |
资源清单、客户端搜索、外链标识 |
列表渲染、JS 过滤、无障碍搜索 |
III. 区域级拆分（二级项目）
| 区域 |
示例组件 |
对应课程能力点 |
| 标题区（Header） |
LOGO、导航菜单（展开/收起）、搜索框 |
Flex 布局、导航交互、ARIA 标注 |
| 横幅区（Hero） |
背景图、标语文字、CTA 按钮 |
背景图设置、排版、按钮可达性 |
| 内容区 |
卡片组件、文章摘要、作品预览 |
卡片布局、图片懒加载 |
| 页脚区（Footer） |
版权、社交链接、备案信息 |
语义标签 <footer>、外链安全属性 |
| 文章列表区 |
文章卡片、分页导航 |
列表渲染、分页逻辑 |
| 文章详情区 |
标题、元信息、正文排版、上一篇/下一篇 |
排版系统、结构化信息 |
| 表单区 |
输入框、选择框、提交按钮、状态提示 |
表单可用性、JS 校验 |
| 过滤/搜索区 |
筛选按钮、搜索框、结果区 |
JS 事件与 DOM 操作 |
IV. 组件级拆分（三级项目）
| 组件 |
对应课程能力点 |
| LOGO 组件 |
图片与可访问性描述 |
| 导航菜单组件 |
Flex 布局、键盘导航 |
| HeroImage |
背景图设置、响应式裁剪 |
| HeroSlogan |
字体排版、对比度 |
| HeroCTA |
按钮样式、焦点样式 |
| PostCard / WorkCard |
卡片布局、hover 效果 |
| Pagination |
按钮组、JS 事件委托 |
| ResourceItem |
列表项、外链标识 |
| ContactFormInput |
表单验证与提示 |
| SearchBar |
输入监听、防抖 |
V. 支撑要素与跨页面功能
| 要素 |
说明 |
对应课程能力点 |
导航菜单数据 (nav.json) |
菜单项标题、URL |
数据驱动渲染 |
分类与标签数据 (categories.json) |
分类名、Slug、文章关联 |
数据与模板分离 |
| 分页逻辑 |
通用分页函数 |
JS 基础、DOM 操作 |
| 媒体懒加载脚本 |
Intersection Observer 实现 |
JS API 使用 |
| 统计与隐私弹窗 |
第三方脚本嵌入、用户同意管理 |
脚本加载策略、安全合规 |
| 归档/标签页模板 |
自动生成归档列表 |
模板复用 |
| 评论区模板（可选） |
评论列表、表单 |
表单安全与反垃圾 |
🎯 为什么这个清单和你的课程对齐？