Hugo Docsy主题页面标题被导航栏遮挡的原因及全局修复方案

成因 #

Docsy主题的顶部导航栏默认采用固定定位（fixed position），会悬浮在页面内容上方。而主题默认的页面主内容区域顶部没有设置足够的内边距/外边距，当页面内容直接以二级标题开头时，就会出现标题被导航栏遮挡的情况，且所有新页面都会受此影响。

全局修复方法 #

推荐用自定义CSS的方式修复，无需修改主题核心文件，不影响后续主题升级：

• 在你的Hugo项目根目录下，找到assets/css/文件夹，若没有则手动创建。
• 在该文件夹内新建custom.css文件（Docsy主题会自动加载这个自定义样式文件）。
• 添加以下样式代码，数值可根据导航栏实际高度调整（Docsy默认导航栏高度对应8rem左右）：

  .td-content {
    padding-top: 8rem !important;
  }
  

• 重启Hugo服务，刷新页面即可看到所有页面的内容顶部都有了足够间距，标题不再被导航栏遮挡。

如果不想用CSS，也可以通过覆盖主题模板实现：

• 复制Docsy主题的layouts/_default/_baseof.html文件到你项目的layouts/_default/目录下。
• 找到页面主内容的容器标签（通常是带有td-content类的<div>或<main>），给它添加内边距样式，比如：

  <div class="td-content" style="padding-top: 8rem;">
  

• 保存后重启Hugo服务即可生效。

内容的提问来源于stack exchange，提问作者BATMAN_2008