Skip to content

TOC 边距优化

问题描述

当侧边栏中的 TOC 或页面信息组件作为第一个元素出现时，不应该有额外的上边距（margin-top），以确保更好的视觉对齐和空间利用。

解决方案

1. HTML 模板更新

在 layouts/partials/toc.html 中为两种情况都添加了 first-aside-element CSS 类：

  • 显示 TOC 时：<div class="aside-toc first-aside-element">
  • 显示页面信息时：<div class="docs-aside-info first-aside-element">

2. CSS 样式更新

2.1 更新 _page-info.scss

.docs-aside-info {
  margin-top: var(--spacing-md);

  &.first-aside-element {
    margin-top: 0;
  }
}

2.2 更新 _layout.scss

.aside-toc {
  // ...existing styles...

  &.first-aside-element {
    margin-top: 0;
  }
}

功能特点

  1. 自动检测：当组件是侧边栏中的第一个元素时，自动移除上边距
  2. 统一处理：TOC 和页面信息组件都采用相同的处理方式
  3. 向后兼容：不影响现有的样式和布局

使用场景

  • 短文章显示页面信息时
  • 只有一个标题的文章显示页面信息时
  • 正常文章显示 TOC 时
  • 任何侧边栏组件作为第一个元素的情况

技术实现

  • 使用 SCSS 嵌套选择器 &.first-aside-element 来精确控制样式
  • 通过 CSS 类的组合来实现条件样式应用
  • 保持代码的可读性和可维护性

这个优化确保了侧边栏组件在作为第一个元素时具有更好的视觉表现和空间利用效率。