toc如何设置多级目录

[swustzzh]

如题，常规的md文件，生成的toc目录只有两级，现在有个需求是由于二级标题下面有多个三个标题，只展示到二级标题翻阅文档比较麻烦，是否有相关配置支持设置多级toc目录？

比如dumi常见文档里面只展示二级toc

想要设置多级toc，如何配置呢~

[icky-forever]

我也遇到同样的问题，顿一波答案😂

[swustzzh]

发现了解决思路，修改dumi-theme-default里面的SlugList组件，主题开发参考：官方文档

项目实际操作如下，新建.dumi/theme文件夹

修改SlugList组件(我这里主要动态传入了maxDepth，来控制显示几级目录，默认是4)：

import type { FC } from 'react';
import React from 'react';
import { AnchorLink } from 'dumi/theme';
import './SlugList.less';

const SlugsList: FC<{ slugs: any; className?: string; maxDepth?: number }> = ({ slugs, maxDepth = 4, ...props }) => (
  <ul role="slug-list" {...props}>
    {slugs
      .filter(({ depth }) => depth > 1 && depth < maxDepth)
      .map((slug) => (
        <li key={slug.heading} title={slug.value} data-depth={slug.depth}>
          <AnchorLink to={`#${slug.heading}`}>
            <span>{slug.value}</span>
          </AnchorLink>
        </li>
      ))}
  </ul>
);

export default SlugsList;

补充样式文件(这里之补充了depth<=6的样式)：

@import (reference) '~dumi-theme-default/src/style/variables.less';

ul[role='slug-list'] {
  &:empty {
    margin: 0 !important;
    padding: 0 !important;
  }

  li {
    > a.active {
      color: darken(@c-primary, 2%);
    }

    &[data-depth='3'] {
      padding-left: 12px;
    }

    &[data-depth='4'] {
      padding-left: 24px;
    }

    &[data-depth='5'] {
      padding-left: 36px;
    }

    &[data-depth='6'] {
      padding-left: 48px;
    }
  }
}

修改Layout组件中SlugList的使用

{showSlugs && <SlugList slugs={meta.slugs} className="__dumi-default-layout-toc" maxDepth={meta.tocMaxDepth} />}

这种实现方式只在本地有效果。。。，，需要自己发布一个基于dumi-theme-default主题二次开发的包，然后package.json里面替换dumi-theme-default主题包，这样打包部署才有效果

[Estherjing]

hello，这样就可以直接在menus配置三层了嘛

[swustzzh]

答案见上面回答~

[swustzzh]

您的邮件已收到。----------------------张智慧----------------------

[swustzzh]

您的邮件已收到。----------------------张智慧----------------------