Hugo 默认生成的 .TableOfContents 会在最外层包裹一层空 ，导致显示多余的项目符号；通过精准的 CSS 选择器重置首层 ul 的列表样式，同时保留子级（标题层级）的圆点标记，即可优雅解决该问题。

hugo 默认生成的 `.tableofcontents` 会在最外层包裹一层空 `

`，导致显示多余的项目符号；通过精准的 css 选择器重置首层 `ul` 的列表样式，同时保留子级（标题层级）的圆点标记，即可优雅解决该问题。

Hugo 的 {{ .TableOfContents }} 模板函数会自动将文档中带 id 的标题（如 h2、h3 等）组织为嵌套的 HTML 列表结构。但其默认输出始终以一个顶层空

包裹整个目录树，例如：

<nav id="TableOfContents"><ul>
<!-- 这个外层 ul 是 Hugo 自动生成的，不对应任何标题，却会渲染为一个空列表项 --><li>
      <ul>
<li><a href="#step-1">Step 1. Install Hugo</a></li>
        <li><a href="#step-2">Step 2. Build the Docs</a></li>
      </ul>
</li>
  </ul></nav>

该外层

在多数 CSS 框架（如 Bootstrap）下会显示为一个冗余的圆点（•），破坏 TOC 视觉一致性。

✅ 推荐解决方案：使用层级化 CSS 重置样式

只需在站点样式表（如 assets/css/custom.css）中添加以下规则：


iA Presenter
iA Presenter是一款以文字写作驱动幻灯片生成的演示文稿工具。
下载

/* 移除 TOC 最外层 ul 的列表符号 */
#toc ul {
  list-style-type: none;
  padding-left: 0;
}

/* 恢复二级及以下 ul 的标准圆点样式（可选，增强可读性） */
#toc ul ul {
  list-style-type: disc;
  margin-top: 0.25em;
  padding-left: 1.25em;
}

/* 可选：优化链接样式 */
#toc a {
  text-decoration: none;
  color: #333;
}

⚠️ 注意事项：

• 必须确保该 CSS 被正确加载（检查浏览器开发者工具中样式是否生效）；
• #toc ul 会匹配所有后代 ul，因此需用 #toc ul ul 显式覆盖子级，避免误删所有列表符号；
• 若使用 Tailwind CSS 或其他原子化框架，可用 list-none + list-disc 类替代，例如：

  <div id="toc" class="well col-md-4 col-sm-6">
    <nav id="TableOfContents" class="list-none">
      {{ .TableOfContents | safeHTML }}
    </nav>
  </div>

  并为内部 ul 添加 list-disc（需配合 @apply 或自定义类）。

? 总结：Hugo 的 TOC 结构是语义正确的，问题本质是样式渲染而非模板错误。通过「外层去点、内层还原」的 CSS 策略，既保持 HTML 语义完整性，又实现专业美观的目录呈现。