Hugo 默认生成的 .TableOfContents 会在最外层包裹一层空 <ul>，导致显示多余的项目符号；通过精准的 CSS 选择器重置首层 ul 的列表样式，同时保留子级（标题层级）的圆点标记，即可优雅解决该问题。
hugo 默认生成的 `.tableofcontents` 会在最外层包裹一层空 `
- `，导致显示多余的项目符号；通过精准的 css 选择器重置首层 `ul` 的列表样式，同时保留子级（标题层级）的圆点标记，即可优雅解决该问题。
Hugo 的 {{ .TableOfContents }} 模板函数会自动将文档中带 id 的标题（如 h2、h3 等）组织为嵌套的 HTML 列表结构。但其默认输出始终以一个顶层空 <ul> 包裹整个目录树，例如：
<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>该外层 <ul> 在多数 CSS 框架（如 Bootstrap）下会显示为一个冗余的圆点（•），破坏 TOC 视觉一致性。
✅ 推荐解决方案：使用层级化 CSS 重置样式
只需在站点样式表（如 assets/css/custom.css）中添加以下规则：
/* 移除 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 语义完整性，又实现专业美观的目录呈现。
