Hugo Book主题实现菜单项自动编号的方法

在Hugo Book主题中，有时我们需要为侧边栏菜单项添加自动编号功能，类似于算法文档中常见的章节编号样式。本文将详细介绍如何通过CSS计数器实现这一效果。

实现原理

CSS计数器(CSS Counters)是CSS2.1引入的功能，允许开发人员根据元素在文档中的位置自动生成编号。它通过以下几个属性工作：

1. counter-reset - 创建或重置计数器
2. counter-increment - 递增计数器值
3. content - 使用counters()函数显示计数器值

具体实现步骤

1. 在项目的assets目录下创建或编辑_custom.scss文件
2. 添加以下CSS代码：

.book-menu nav ul:not(.book-languages) {
  counter-reset: item;

  li {
    counter-increment: item;

    &:before {
      content: counters(item, ".") ". ";
      float: left;
      margin-inline-end: $padding-4;
    }
  }
}

代码解析

1. counter-reset: item - 在菜单的ul元素上初始化名为"item"的计数器
2. counter-increment: item - 为每个li元素递增计数器
3. counters(item, ".") - 生成多级编号(如1.1, 1.2等)
4. float: left - 使编号与菜单文本对齐
5. margin-inline-end - 设置编号与文本之间的间距

注意事项

1. 代码中排除了.book-languages类，这是为了避免影响语言选择菜单
2. $padding-4是主题预定义的变量，确保样式一致性
3. 此方法支持多级菜单的自动编号

扩展应用

如果需要自定义编号样式，可以修改以下属性：

1. 编号格式：修改content属性中的字符串
2. 编号颜色：添加color属性
3. 编号字体：添加font-family或font-weight属性

通过这种CSS计数器方法，我们可以轻松实现专业文档风格的菜单编号，而无需修改主题的核心代码或Hugo模板文件。