问题现象

博客首页打开后，搜索框下方留出了大片空白，快捷链接卡片被推到了屏幕下半部分。用户需要滚动才能看到"专栏"入口，访问路径变长了。

目标效果：搜索框 → 少量间距 → 快捷链接 → 专栏卡片，首页一屏内尽量展示所有核心入口。

排查过程

第一层：min-height 冲突

打开浏览器开发者工具，定位到 .home-hero 元素，发现 computed style 显示 min-height: 80vh。这个规则来自主题源文件，但自定义 CSS 里已经加了一条覆盖规则：

.home-hero {
  min-height: auto !important;
  padding: 2rem 0 0.75rem !important;
}

curl 确认线上 CSS 已经包含这条规则，但刷新页面视觉上没有任何变化——说明有其他规则优先级更高，或者被注释掉的原始规则依然在解析。

第二层：多处冲突的 min-height

用 grep -n "min-height" /var/www/blog/static/css/tech.css 找到了三处相关规则：

/* Line 128 */
.home-hero { min-height: 80vh; padding: 80px 20px; }

/* Line 393-396 (media query) */
@media (max-width: 768px) {
  .home-hero { min-height: 60vh !important; padding: 50px 20px !important; }
}

/* Line 614 (media query) */
@media (min-width: 769px) {
  .home-hero { min-height: 65vh; padding: 60px 40px; }
}

这三处都设置了具体的高度值，而且注释掉不等于删除——CSS 解析器依然会处理注释内的内容在某些构建流程中。更关键的是：自定义 CSS 的覆盖规则写在 line 128 之后，但主题的 media query 规则在 line 393 和 614，相同选择器的后来者优先级更高，且 !important 在 media query 内层会覆盖外层普通规则。

第三层：处理策略

将三处冲突规则全部注释掉，确保没有规则能绕过自定义的 min-height: auto：

/* Line 128 - 注释掉
.home-hero { min-height: 80vh; padding: 80px 20px; }
*/

/* Line 393-396 - 注释掉
@media (max-width: 768px) {
  .home-hero { min-height: 60vh !important; padding: 50px 20px !important; }
}
*/

/* Line 614 - 注释掉
@media (min-width: 769px) {
  .home-hero { min-height: 65vh; padding: 60px 40px; }
}
*/

第四层：间距微调

高度问题解决后，发现搜索框到快捷链接间距仍然偏大（~3rem），调整了 tech.css 里的相关间距：

.home-hero { min-height: auto !important; padding: 2rem 0 0.75rem !important; }
.home-tagline { margin-top: 0.25rem; }
.bing-results { margin: 0; }

验证步骤

# 1. 确认 CSS 已更新
curl -s "https://blog.uuworld.cn/css/tech.css" | grep -A3 "^.home-hero {"

# 2. 确认三处冲突规则已注释
grep -n "min-height.*vh" /var/www/blog/static/css/tech.css

# 3. 强制刷新浏览器 Ctrl+Shift+R，清除 CDN 缓存（如有）

经验总结

Hugo PaperMod 主题的 CSS 变量通过 !important 级联传递，自定义 CSS 需要对所有断点的同名规则做覆盖，否则 media query 内的 !important 会悄悄"夺回"控制权。

备份永远是第一件事，本次修改前已将 /var/www/blog/layouts/index.html 和 static/css/tech.css 同步到 /home/blog-backup-*/。

相关文件

  • 模板：/var/www/blog/layouts/index.html
  • 样式：/var/www/blog/static/css/tech.css
  • 备份：/home/blog-backup-20260430200512/