Knowledge Base
Sidebar 设计
参考 sparkbites.dev 的信息密度和层级关系。
这次复刻的重点
我没有逐像素照搬 sparkbites.dev,而是保留了它最有辨识度的几件事:
- 左侧深色窄栏
- 顶部品牌区
- 列表型菜单
- 当前项高亮
- 右侧大留白内容区
视觉处理
为了让页面不显得太模板化,这里额外做了几层处理:
- 主内容卡片用了浅暖色渐变
- sidebar 顶部加入了淡淡的橙色光斑
- 标题使用更夸张的字重和紧凑字距
后续可扩展
如果你后面要继续增强,可以在 sidebar 里补:
- 分组标题
- 搜索框
- 标签过滤
- 深浅色切换