个人博客拆解全景图（v1）

目标：将“博客”从页面 → 区域 → 组件 → 数据 → 流程 → 非功能需求，进行多维度系统化拆解，可作为实现蓝图与评审清单。

0. 顶层目标与原则

• 博客定位：个人知识库 / 作品展示 / 个人品牌 / 社区互动（任选其一或组合）
• 成功指标（示例）：月更 ≥ 4 篇、首页 LCP < 2.5s、自然流量占比 ≥ 60%、回访率 ≥ 25%
• 设计原则：内容优先、可复用组件、渐进增强、移动优先、可观测可维护

1. 信息架构（IA）

• 主导航：
  • 首页（Home）
  • 文章（Posts）
  • 分类（Categories）
  • 标签（Tags）
  • 关于（About）
  • 联系（Contact）
  • 归档（Archive）
  • 作品集（Portfolio，可选）
  • 订阅（Subscribe/RSS）
• 二级结构：
  • 文章详情 → 相关文章 / 评论区 / 目录（TOC）
  • 分类页 → 分类介绍 / 列表 / 筛选
  • 标签页 → 标签云 / 列表
  • 搜索结果 → 结果列表 / 高亮 / 分页
  • 个人页 → 简历 / 技能 / 社交链接

2. 页面 → 区域 → 组件（可重用清单）

2.1 首页（Home）

• 区域：
  • 顶部栏：Logo、站点名、主导航、主题切换、语言切换、搜索入口
  • 首屏：Hero（头像/标语/CTA）、最新文章 Highlights、订阅按钮
  • 内容区：文章列表（卡片/摘要）、分类入口、精选标签、作品集预览
  • 侧边栏：热门文章、时间轴、公告、社交链接
  • 页脚：版权、备案/隐私政策、站点地图、RSS
• 组件：
  • <Logo/>、<SiteTitle/>、<Nav/>、<ThemeSwitch/>、<LangSwitch/>、<SearchInput/>
  • <Hero/>、<PostCard/>、<CategoryPill/>、<TagChip/>、<SubscribeForm/>
  • <SidebarWidget/>（插件化：热门/公告/广告位）
  • <Pagination/>、<Footer/>

2.2 文章详情（Post Detail）

• 区域：
  • 标题区：标题、发布日期、作者、阅读时长、面包屑
  • 正文区：Markdown/富文本渲染、代码高亮、图片放大、目录（TOC）
  • 互动区：点赞、收藏、评论、分享、打赏
  • 导航区：上一篇/下一篇、相关文章推荐
• 组件：<Breadcrumb/>、<PostMeta/>、<MDRenderer/>、<CodeBlock/>、<ImageLightbox/>、<TOC/>、<ReactionBar/>、<CommentList/>、<RelatedPosts/>

2.3 列表页（分类/标签/搜索/归档）