博客PRD v1.0.3

#博客

背景

博客文章页已完成基础 Markdown 渲染、深浅色主题、代码块、表格、链接、标题样式，以及基于文章标题自动生成的悬浮目录（v1.0.2 实现）。

需求

1. 目录位置与布局调整

  • 将目录从右侧悬浮改为左侧侧边导航
  • 桌面端使用 CSS Grid 实现左侧目录 + 中间正文的双列布局
  • 目录使用 position: sticky 固定在左侧阅读区，不使用高 z-index
  • 小屏幕下目录回到文章上方，不使用 fixed 浮层遮挡正文
  • 无 H2-H4 目录项的文章不渲染空侧栏，保持普通文章宽度
    ae7e96b1cdb296447e75d64fdac4cf95.png3c9631169c32307d8aba8b7ca7565969.png

2. 目录结构与交互

  • 根据 Markdown headings 生成 H2 → H3 → H4 的树状目录
  • H2 下存在子标题时显示折叠按钮
  • 点击 H2 标题文本跳转章节；点击折叠按钮只控制子目录展开状态
  • 当前章节通过 IntersectionObserver 高亮，并自动展开所在 H2 分组
    image.png

3. 样式与兼容性

  • 目录增加内部滚动、边框、阴影、深浅色兼容、长标题换行等样式
  • 给正文标题设置 scroll-margin-top，避免锚点跳转后被顶部导航遮挡
  • 使用 CSS 变量继承现有深浅色主题，不引入大型 UI 库
    image.pngimage.png

版本一览

Written By Six_moon