个人博客全站优化记：从视觉风格到分类体系的完整升级

这两天对个人博客做了一次完整的全站优化，从 首页视觉风格到 分类体系，踩了一些坑，也想清楚了很多事情。记录下来，给自己做个备忘，也给同样用 Hugo 搭博客的朋友做个参考。

为什么要做这次优化 #

之前博客的状态其实是能用的，但总觉得少了点什么：

• 首页几个区块的交互风格不统一，有的是卡片有的是纯链接，视觉上有点乱
• 文章分类几乎没有，读者看完一篇找不到相关的内容
• 没有标签体系，内容沉淀不下来

这次的目标很简单：让首页风格彻底统一，搭好完整的内容分类架构。

关于设计的思考：少即是多 #

一开始我走了弯路，把首页做成了很重的卡片风格，每个链接都加边框、加阴影、加 hover 动效。结果看起来特别拥挤，失去了 Congo 主题原本那种清爽极简的感觉。

后来全部回滚，做了一个决定：全站只保留一种链接 hover 效果——纯文字变色。

<a class="group" href="...">
  <strong class="group-hover:text-primary-600 dark:group-hover:text-primary-400">标题</strong>
  <span class="text-neutral-600 dark:text-neutral-400">描述</span>
</a>

没有背景、没有边框、没有阴影、没有位移，就这么简单。

效果反而出奇的好。整个页面干净了很多，阅读时注意力不会被多余的动效分散。

设计最重要的不是加什么，而是敢于删什么。

三层分类体系搭建 #

这是这次优化最核心的部分。用 Hugo 原生的 Taxonomy 系统，搭了三层分类：

为什么要分三层？因为人的浏览习惯是不一样的：

• 有人喜欢按分类逛：想看看你都做过哪些方向的研究
• 有人喜欢按标签找：就想看所有跟"安全"相关的文章
• 有人喜欢追系列：想把 SecurityClaw 整个系列按顺序看完

三层覆盖了所有浏览场景。

标签云 页面 #

标签云不是随便列出来就完事了，做了一个很重要的细节：标签字体大小随文章数量动态变化。

{{ $count := .Count }}
{{ $size := add 0.8 (mul (div (float $count) 10) 0.8) }}
{{ if gt $size 2.0 }}{{ $size = 2.0 }}{{ end }}

这样写得多的标签自然会更大更醒目，读者一眼就能看到你主要在写什么，相当于自动生成的"技术画像"。

这次调整的文件清单 #

做了这些改动，都是无侵入式的：

config/_default/hugo.toml       # 新增三层 taxonomy 配置
config/_default/menus.zh-CN.toml # 导航栏加标签云和分类
layouts/_default/terms.html      # 标签云/分类列表模板
layouts/_default/term.html       # 单个标签/分类的文章列表页面

核心原则：尽量不修改主题原有文件，全部用 Hugo 的模板覆盖机制来做。以后 Congo 主题升级时不会冲突。

几个重要的原则总结 #

这次折腾下来，有几个感受特别深：

1. 最小改动原则 #

不要一上来就大改主题的核心文件。先想清楚是不是真的需要改，能不能用更轻的方式实现。

一开始我想改 Congo 的 list.html 来显示标签，后来发现主题本身就内置了 list.showTaxonomies 配置。一行配置就能解决的事，差点写了一百行模板。

2. 视觉一致性比"好看"更重要 #

一个到处都是不同 hover 效果的"好看"页面，远不如所有交互完全统一的普通页面体验好。

用户不需要学习三种不同的点击反馈，一种就够了。

3. 分类体系要提前搭 #

博客刚起步时文章少，分类的价值看不出来。等到写了几十上百篇，内容就会开始乱。

提前把三层分类搭好，写文章时顺手加几个标签，积累半年回头看就是一笔巨大的财富。

接下来的计划 #

这个博客的优化还没完，接下来想做的几件事：

1. 文章底部加相关文章推荐，基于标签匹配
2. 系列文章的前后导航（上一篇 / 下一篇）
3. 更清晰的专题落地页
4. 全站搜索

博客是个慢工程，不用追求一次做完美。先把骨架搭好，慢慢迭代。

写技术博客这件事本身，就是最好的持续学习。