博客开发记录(6):导航栏的更新

成元 / 2026-08-15 / 约 1517 字 / 预计阅读 4 分钟 < 站务 >[ Blog ]

前言

最近我觉得将所有内容都混在“日志”里有点难以浏览。一堆标题放在一起,很难快速找到自己想看的内容。

有时我想找一篇技术博客,却要先翻过一堆生活博客。有时又想看看自己已经写了哪些系列,混在一起同样很难找。

因此,我将“日志”导航页改成了“归档”,并添加了“系列”“技术”和“生活”三个导航页。

这是之前的导航栏:

本次更新前的导航栏

这是现在的导航栏:

本次更新后的导航栏

目前中文导航栏的顺序为:

首页 / 关于 / 系列 / 技术 / 生活 / 归档 / 分类&标签 / 搜索 / TODO / EN

英文页面也同步添加了对应的导航项。

导航栏的变化

归档

“归档”就是之前的“日志”导航页。

之前这个页面其实已经起到了归档的作用,只是我一直懒得改名。现在博客多起来以后,再叫“日志”感觉不太准确,于是干脆改成了“归档”。

页面仍然按照年份列出所有文章,并在底部统计年份、文章数量、字数和字符数。只是原来的“篇日志”改成了“篇文章”。

系列

“系列”页面用于集中列出所有系列内容。

桌面端每行显示两个系列,屏幕宽度不够时自动变成单列。同一行的两个系列卡片高度相同,内容较少的卡片会在下方留白。

系列按照英文名称或中文拼音从 A 到 Z 排列。每张卡片会显示系列名、文章数量,以及序号最高的五个位置。卡片内使用短标题,因为上面已经显示了系列名,不需要再重复一遍。

如果一个系列的文章已经全部发布,就直接显示文章数量。例如发布到了第 5 篇,就显示 5。如果第 1、2、4、5 篇已经发布,第 3 篇还没有发布,则显示 (4/5)

尚未发布的文章也会占用卡片中的一个位置,并显示“(尚未发布)”。如果系列超过五个序号,卡片底部会显示 更多 >>。点击系列名或者 更多 >>,都可以进入该系列的详情页面。

系列详情页的显示方式和分类详情页基本一致。序号越大的文章越靠上,已经发布的文章会显示日期和完整标题,空出的序号会显示“未知”和“(尚未发布)”。

技术

“技术”页面主要列出没有 Life 标签的博客,用于快速查找技术文章和其他与生活记录无关的内容。

它的显示方式和归档页面一致,同样按照年份列出文章,并显示文章数量和字数等统计信息。

生活

“生活”页面主要列出具有 Life 标签的博客,用于快速查找生活记录、随笔和其他日常内容。

它同样沿用了归档页面的显示方式。带有 Life 标签的文章会显示在“生活”页面,没有 Life 标签的文章则会显示在“技术”页面。

其他相关调整

文章的元信息

文章标题下方的元信息也重新整理了一下。

左侧现在依次显示作者、创建日期、字数和预计阅读时间,右侧显示所有分类和标签。例如:

成元 / 2026-08-15 / 约 1000 字 / 预计阅读 3 分钟    < 站务 > • [ Blog ]

原来文章末尾自动显示的作者和最新修改日期已经去掉了,只保留标题下方的创建信息。这样页面更干净,也不会让读者误以为文章正文又更新了。

“关于”页面会显示这行元信息,“搜索”和“TODO”页面则不会显示。元信息的字体和字号也参考了原主题的显示方式,避免它比正文大太多或者小太多。

英文页面

中文、英文内容页面以及“分类&标签”总览页现在使用对应的导航栏。英文页面同步添加了 SeriesTechLifeArchive,没有内容时的提示也改成了英文。

目录的悬浮动画

原主题的目录链接在鼠标悬浮时会轻微移动。这个效果本身挺有意思,但目录标题一多,鼠标悬浮时就会反复乱跳。

现在仍然保留这个轻微移动的动画,同时让目录保持稳定。

总结

这次不只是给导航栏增加了几个入口,还顺便重新整理了文章分类、系列页面和文章元信息。

以前所有文章都堆在“日志”页面里,确实有点太暴力了。现在可以按照“技术”“生活”和“系列”分别查找,想看全部内容时再进入“归档”,应该会方便不少。

总之,这次更新的主要目的还是方便阅读,也方便以后继续维护博客。