一日一撸(No.1):github-markdown-toc-sidebar - 为 GitHub Markdown 添加浮动目录侧边栏

😫 痛点:GitHub 长文太难顶了

不知道大家有没有同感,在浏览一个项目的 README.md 时,特别看一些稍微硬核点的开源项目,那个文档长得简直像裹脚布。

找个参数配置,或者想跳到某个章节,要么鼠标把滚轮滚出火星,要么疯狂 Ctrl+F

虽然 GitHub 自带目录,但不能随动,看着看着就不知道在哪了,体验真的很割裂,特别还有一些项目压根没有[TOC]

💡 方案:所以我造了个轮子

实在忍不了了,周末搞了一次 Vibe Coding 实验。

目标很简单:让 GitHub 阅读体验丝般顺滑

我就想做一个纯粹的、丝滑的侧边悬浮目录

于是 github-markdown-toc-sidebar 诞生了。

✨ 功能:极简但好用

没有花里胡哨的功能,只做一件事:帮你更好地阅读

  1. 自动生成目录:解析 Head 1-Head 4 标题,结构清晰。

  2. 双模式自适应

  • 宽屏:完整的侧边栏( Sidebar ),放在内容右侧。

  • 窄屏:自动变成悬浮小球( FAB ),不挡视线,点击展开。

  1. 智能高亮:滚动到哪,目录就亮到哪,随时知道自己在看啥。

  2. Turbo 兼容:完美支持 GitHub 的页面跳转,点击链接目录秒更新,不用刷新。

👨‍💻 幕后:Vibe Coding 体验

这次开发过程非常 Chill ,OpenCode + Claude 一把撸。

有了 AI 之后,很多一直被“拖延”确想解决的“个人痛点”,被逐一去解决。

发现问题 -> 动手解决 -> 享受成果

🔗 获取

Chrome Store: GitHub Markdown TOC Sidebar

Edge Store: Coming soon ...

开源在 GitHub:terranc/github-markdown-toc-sidebar

欢迎 Star ,欢迎 PR ,也欢迎提 Issue 吐槽~

01-cover 02-pain-point 03-features 04-responsive 05-vibe-coding