跳转至

重做首页

溪海莘发布于

把只有一段话的首页，改成有 Hero、最近更新和入口的页面，顺手加了个运行时长。

原来的首页其实就一段自我介绍，加一句「点上面标签浏览文章」。自己看着还行，但别人点进来多半会愣一下，不知道该从哪看起。

我想让它像个正经门户：一眼看到你是谁、最近写了什么、还能往哪去。风格上参考了 wh1cy.github.io，那种淡淡的、留白很多的极简感。

最后的样子

首页从上到下五块：

  • Hero：大标题、副标题、三行简介，外加一个随时间变化的问候；
  • 最近更新：自动列出最近几篇文章；
  • 关于我：一个「溪」字头像和几句介绍；
  • 推荐文章：一篇主推，加几个链接；
  • 继续浏览：博客、技术、教程、关于四个入口。

两个踩过的坑

坑一是链接。首页卡片我直接写了 <a href="BLOG/index.md">，结果点进去全是 404。查了半天才明白：MkDocs 只会重写 Markdown 语法的链接，比如 [文字](xx.md)，原始 HTML 里的 href 它不管。 改成输出后的目录地址（BLOG/）就好了。

坑二更隐蔽。首页要全宽显示、把侧栏藏起来，我是靠给 <body> 加一个 is-homepage 类、再用 CSS 控制的。判断首页的逻辑我一开始写的是「当前高亮的标签 href 是 ./」——听起来没问题，可分区首页（/ABOUT/、/WEBSITE/）的高亮标签 href 也是 ./，于是这些页面的侧边栏全没了。

后来改成从顶栏 logo 解析出站点根地址，再跟当前路径比对，才算稳。

右侧的水

Hero 右边那点水波纹，我来回改了三版。

第一版只有一圈很淡的涟漪，几乎看不见；第二版加了个水滴，又做得太大太快，太抢戏；第三版才收敛下来：一颗半透明的小水珠慢慢落下，入水后一圈圈涟漪由内向外荡开，越远越细、越淡。

有个细节值得记一下：涟漪不能用 transform: scale() 放大，那样边框会跟着一起变粗。改成动画 width/height，外圈才能保持纤细。

CSS
1
2
3
4
5
@keyframes qtRipple {
  0%   { width: 0; height: 0; opacity: 0; }
  4%   { opacity: 0.5; }
  100% { width: var(--qt-ripple-w); height: var(--qt-ripple-h); opacity: 0; }
}

顺手加的运行时长

后来又在 Hero 里塞了一行「本站已稳定运行 N 天 hh:mm:ss」，每秒跳一次，旁边一个会呼吸的小圆点。这东西纯靠浏览器算，不依赖任何后端，起始时间写在 data-launch 上，想改就改：

HTML
1
<p class="qt-uptime" data-launch="2025-12-04T00:00:00+08:00">

最近更新是怎么来的

这部分放到文章元数据那篇讲，简单说就是构建时用钩子扫一遍文章，按时间排好塞进来，我不用手动维护列表。