Hugo Book主题中TOC占用过多空间的解决方案

问题现象分析

在使用Hugo Book主题构建文档网站时，部分用户反馈目录(TOC)会占用过多空间，导致主内容区域被挤压。具体表现为：

1. 当浏览器窗口缩小时，汉堡菜单出现时机过晚
2. TOC菜单栏挤压主内容区域，造成内容显示不全
3. 在某些响应式断点下，页面布局出现异常

解决方案

方法一：完全禁用TOC

对于内容较少的页面，最简单的解决方案是直接在页面参数中禁用TOC功能。在页面的Front Matter中添加以下配置：

bookToC: false

这种方法适用于不需要目录导航的简单页面，能最大化利用屏幕空间显示主要内容。

方法二：调整响应式断点

对于需要保留TOC但希望优化布局的情况，可以通过修改主题的SCSS变量来调整响应式断点：

1. 在项目目录下创建或修改assets/_variables.scss文件
2. 覆盖默认的断点值：

$mobile-breakpoint: 768px; // 可根据需要调整此值

这个变量控制着移动端布局的触发点，调大该值可以使桌面布局在更宽的窗口下保持，避免过早切换到移动布局。

方法三：自定义CSS样式

对于更精细的控制，可以直接调整TOC相关的CSS样式：

.book-toc {
  width: 250px; // 调整TOC宽度
  padding: 1rem; // 调整内边距
  
  @media (max-width: $mobile-breakpoint) {
    position: fixed;
    z-index: 100;
    // 其他移动端样式调整
  }
}

额外注意事项

1. 移动端布局问题：在移动视图下，可能会出现点击区域重叠或布局异常的问题，这通常与CSS层叠上下文(z-index)或定位方式有关。

2. 顶部间距问题：某些情况下，网站图标可能会紧贴浏览器顶部，可以通过调整header的padding或margin来解决。

3. 状态保存功能：主题使用隐藏的checkbox来保存菜单的展开/收起状态，如果发现异常的复选框显示，需要检查相关CSS是否被意外覆盖。

最佳实践建议

1. 对于内容密集的文档页面，建议保留TOC但优化其宽度和响应式行为
2. 对于简单页面，禁用TOC可获得更简洁的布局
3. 在自定义样式时，建议通过_variables.scss覆盖默认值而非直接修改主题文件，便于后续升级维护
4. 测试时应在多种屏幕尺寸下验证布局效果，特别是关注断点附近的过渡效果

通过以上方法，可以有效解决Hugo Book主题中TOC占用过多空间的问题，获得更好的阅读体验和响应式表现。