第2期 - 布局搜索与文章页结构调整

2026/05/19

这次主要把全局搜索、图标统一、主题配色和文章页布局重新梳理了一遍,也顺手把目录和返回顶部这些交互问题逐个修掉了。

文章标签

##Weekly##网站##布局##搜索

布局搜索与文章页结构调整

这次主要做了什么

这次没有继续加新功能,而是回过头把现在这套网站里最容易让人不舒服的几个地方重新整理了一遍。

一开始只是想加一个 Ctrl + K 的搜索入口,后面越改越发现,问题不只是搜索本身,还包括图标来源不统一、白天和黑夜主题太极端、文章页的布局结构不顺,以及目录和返回顶部这些交互位置一直不太对。

所以这次干脆集中做了一轮整体收束,把这些体验问题一起处理掉了。

这次完成的调整

  • 加了全局搜索弹层,支持 Ctrl + K 打开
  • 首页补了搜索提示卡片,不再在头部单独放搜索入口
  • 把项目里一批功能型 svg 改成了 lucide-react
  • 重调了全局浅色和深色主题,整体风格往 Notion + Vercel
  • 重新梳理了文章页结构,让正文、目录、返回顶部的定位关系更清晰
  • 反复修正了文章页目录和返回顶部按钮的行为,直到和页面滚动方式对齐

这次改动里最折腾的部分

其实最花时间的不是搜索,也不是主题颜色,而是文章页结构。

因为这块前后改了好几轮:

  • 先是想让 main 承担剩余可视区域高度
  • 后来又发现文章页目录和正文的排布关系不对
  • 再后来还碰到了返回顶部按钮虽然写了 fixed,但实际表现像挂在内容区上的问题

最后还是回到更直观的方案:

  • 页面整体滚动
  • 正文独立居中
  • 目录固定在右侧
  • 返回顶部按钮固定在视口右下角

虽然看起来像是在“回退”,但其实是把结构从绕来绕去的实现,重新收束成更容易维护的方式。

现在这版的感受

改完之后,整体终于顺了不少。

现在的网站不只是能看,而是慢慢开始有点“可以长期维护”的状态了。尤其是文章页这种以后会经常使用的部分,早点把结构理顺,比后面一直打补丁要省事得多。

后面还想继续做什么

后面暂时不急着继续往“个人空间”方向扩,先把现在这套基础体验再稳定一段时间。

接下来如果继续做,大概率会优先看这几个方向:

  • 把搜索结果体验继续补完整
  • 继续收一些核心页面的结构写法,减少绕的布局
  • 再考虑加“动态 / 空间感”相关模块

记录一下

这次更像是一轮“把骨架摆正”的迭代。

功能上没有看起来特别炸裂的新东西,但这种调整其实很重要,因为它决定了后面继续加内容和加功能时,会不会越写越乱。

发布日期: 2026/05/19