Docusaurus自动生成侧边栏异常:cs目录侧边栏不符合预期
Docusaurus cs目录侧边栏未按层级展示的修复方案
你遇到的问题是:根目录自动生成的侧边栏能正确展示Computer Science下包含LeetCode的层级结构,但单独针对cs目录生成的csSidebar却把两者显示为平级条目,以下是两种可行的修复方案:
方案一:通过Frontmatter指定层级关系
在cs/leetcode/README.md文件顶部添加Frontmatter配置,明确它的父文档关联:
--- parent: 'cs/README' --- # LeetCode
配置完成后,Docusaurus自动生成csSidebar时,会将LeetCode作为Computer Science的子项展示。
方案二:手动配置侧边栏结构
如果自动生成逻辑不符合预期,可放弃autogenerated模式,直接在sidebar.ts里精准定义csSidebar的层级结构:
csSidebar: [ { type: 'doc', id: 'cs/README', label: 'Computer Science', items: [ {type: 'doc', id: 'cs/leetcode/README', label: 'LeetCode'}, ], }, ],
这种方式完全可控,能自定义侧边栏的层级、顺序和标签。
额外检查点
- 确认
cs/README.md和cs/leetcode/README.md的文件路径、文件名无拼写错误 - 保证两个文件的一级标题不重复,避免Docusaurus识别混淆
内容的提问来源于stack exchange,提问作者皮皮萌宝
相关产品推荐
相关产品推荐

