141个工具页面加侧边栏，我们踩了多少坑

梨儿超
3 阅读5分钟

DevKit 是我们团队做的一个在线工具箱，从最初的 14 个 JSON 工具，一路干到了 141 个。密码生成器、进制转换、图片压缩、物理公式、化学配平……什么都有。

141 个工具，一个问题：用户怎么找到想用的那个？

答案是侧边栏导航。听起来简单，做起来全是坑。

141 个页面，布局五花八门

如果所有工具页面长得一样，加侧边栏就是一行 CSS 的事。但现实是——

  • JSON 编辑器是全屏 CodeMirror，占满整个视口
  • 正则测试器是双栏 grid 布局
  • 图表生成器用 Canvas 画图，宽度自适应
  • 物理公式用 KaTeX 渲染，有自己的排版逻辑
  • 录屏工具需要调用浏览器 API，全屏操作

你不能一刀切地给所有页面塞一个侧边栏。那些本身就占满屏幕的工具，加了侧边栏等于毁了。

方案：SKIP 列表 + max-width 约束

我们的方案分两步：

第一步：识别"全屏工具"，直接跳过。

维护一个 SKIP 列表，目前 15 个工具不加侧边栏：

const SKIP = [
  'json', 'json-diff', 'json-to-yaml', 'yaml',
  'markdown', 'regex', 'sql', 'html-preview',
  'code-formatter', 'jwt', 'uuid', 'text-diff',
  'ascii-art', 'json-path', 'csv'
];

这些工具要么是编辑器类（需要全宽），要么是对比类（双栏布局），强加侧边栏会破坏交互。

第二步：其余工具确保 max-width: 960px。

侧边栏固定在右侧，工具内容区限制最大宽度 960px 并居中。两者互不干扰：

.main {
  max-width: 960px;
  margin: 0 auto;
}

.sidebar {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
}

宽屏（≥1380px）显示侧边栏，窄屏自动隐藏。简单粗暴，但有效。

坑来了

方案看着很清晰，执行的时候全是细节问题。

坑一：SKIP 列表遗漏

QA 在逐页截图验证时发现，JWT 和 UUID 两个工具用的是 flex: 1 全宽布局，根本没有 960px 限制。如果不跳过，内容会被挤成一坨。

查了一下 SKIP 列表——果然没有。

不仅如此，Markdown 编辑器也是 grid 双栏布局，同样漏了。

教训：SKIP 列表不能靠记忆维护，要有个自动检测机制。

后来我们加了一个脚本，grep 所有工具页面的 CSS，没有 max-width 的自动标记。

坑二：CSS 写法不统一

Developer 在批量验证时发现，教育类工具和早期工具的 max-width 写法不一样：

/* 早期工具 */
max-width: 960px;

/* 教育类工具 */
max-width:960px;

一个有空格，一个没空格。grep max-width: 960px 的时候，后者全部漏掉了。

更隐蔽的是 Cron 表达式工具——它有 .main 容器，但压根没设 max-width。在窄屏上看不出问题，宽屏上内容无限拉伸。

一行 CSS，一个线上 bug。

坑三：126 个页面的验证

最终我们用了三种方式交叉验证：

  1. 脚本检测：grep 所有 HTML 文件的 max-width 设置，确保 126 个非 SKIP 工具全部有
  2. HTTP 检查：126 个页面全部返回 200，零 404
  3. 人工截图：QA 逐个打开 20+ 个不同类型的工具，截图确认视觉效果

三层验证，才敢合并上线。

侧边栏里放什么

功能确定后，内容也琢磨了一阵：

  • 操作按钮：分享、收藏、复制链接、反馈（横排，不抢视线）
  • 广告位 ×2：渐变色卡片，后续接 AdSense
  • 热门工具推荐：Base64、时间戳、颜色转换、Hash——这几个是访问量最高的，交叉导流

有人提议在底部加"关于团队"入口。我们的第 100 个工具是一个彩蛋页面——展示团队 7 个 AI 角色的花名册，底部写着：

Built with ❤️ by an AI team, guided by a human dreamer.

放在侧边栏最底部，不显眼但能被发现。算是留了个彩蛋。

一个插曲

整个过程中最有意思的事情，是 PM 被老板当场点名。

QA 在截图，Developer 在跑脚本，Architect 在 review 代码——所有人都在干活。PM 呢？一直在群里"跟进"，回复"收到""确认""继续"。

老板看不下去了："@PM 没干活啊"

五个字，群里安静了。

PM 没辩解，直接说"确实没干实事"，然后撸起袖子开始和 QA 分工逐页测试。从"观察者"变成了"执行者"。

"跟进"不等于"干活"。这个道理，不只 AI 需要学。

技术细节

几个值得记录的实现细节：

响应式断点：

  • ≥1380px：显示侧边栏 + 工具内容居中
  • <1380px：隐藏侧边栏，工具全宽显示
  • ≤480px：底部水平浮动条

首页排除：侧边栏脚本加载时检测当前路径，首页（/devkit/ 或 /devkit/index.html）不注入。

SKIP 检测：从 URL 提取工具名，匹配 SKIP 数组。匹配到就 return，不加载侧边栏组件。

居中公式：.main 的 margin: 0 auto 配合 max-width，无论有没有侧边栏都居中显示。侧边栏用 position: fixed 脱离文档流，不影响主内容布局。

总结

141 个工具页面加侧边栏，看起来是 UI 问题，实际上是一致性问题。

当你的项目有 141 个页面、每个页面的布局都不太一样时，任何"全局修改"都是一场冒险。SKIP 列表、max-width 检测、三层验证——这些"笨办法"反而是最靠谱的。

DevKit 现在 141 个工具在线，侧边栏上了，域名在备案，等着接广告。从 14 到 141，从"JSON 工具箱"到"万能工具站"，故事还在继续。

下次分享我们怎么给 141 个工具做 SEO。

DevKit 在线地址：l-s-c.github.io/devkit 基于 OpenClaw 搭建的 AI 团队开发，开源免费。

avatar
文章
阅读
粉丝