KuangPF / dumi-theme-antd

A antd site theme package for the dumi framework.
https://kuangpf.com/dumi-theme-antd
MIT License
42 stars 19 forks source link

不支持toc #11

Closed geektcp closed 1 year ago

geektcp commented 1 year ago

docs目录的markdown文档,不支持toc功能,无法展示右侧导航。


同样试过四五个版本,几乎所有版本都存在此问题,包括目前最新版本0.2.7

一起查下,给点思路或者建议。一起完善它。

KuangPF commented 1 year ago

用了一个简单的模板内容:

---
nav:
  title: 指南
  order: 1
group:
  title: 基础
  order: 1
title: 快速上手
---

## 第一个例子
这是一个最简单的 Ant Design 组件的在线 codesandbox 演示。

### 使用组件
直接用下面的代码替换 index.js 的内容,用 React 的方式直接使用 antd 组件。

### 探索更多组件用法
你可以在组件页面的左侧菜单查看组件列表,比如 Alert 组件,组件文档中提供了各类演示,最下方有组件 API 文档可以查阅。在代码演示部分找到第一个例子,点击右下角的图标展开代码。

## 按需加载
antd 默认支持基于 ES modules 的 tree shaking,直接引入 import { Button } from 'antd'; 就会有按需加载的效果。

你看下标题是不是二级(##)以及三级(###),另外排除下是否有 css 样式覆盖了 toc 样式,可以审查下 tocWrapper 元素 展示如下: toc toc-style

如果还是没有解决问题,提供一个最小复现仓库。

geektcp commented 1 year ago

@KuangPF nice, 参考你的模板是有效的,问题可以解决。 不过bug是存在的。根源在于这个模板的toc不识别单个#,3个###这样的标题, markdown文档是必须第一个标题是2个##开头的md文档才有右侧的toc出现。 而且开头的toc属性无效。

bug示例如下:

---
nav:
  title: te1st1111
  order: 1
toc: content
demo: 
  tocDepth: 4
group:
  title: group1
  order: 1
title: xxxx
---

# First
something1

### title2

something2


### user guide3

coment


####  xxxx
ssffff

### user guide2

coment

KuangPF commented 1 year ago

一级(#)会直接被识别为页面标题,所以就不在 toc 里了

geektcp commented 1 year ago

一级(#)会直接被识别为页面标题,所以就不在 toc 里了

good, 辛苦。