Material for MkDocs目录需求:改为Read the Docs可折叠展开样式
实现Material for MkDocs可折叠导航(Read the Docs样式)
要让Material for MkDocs的目录变成可折叠展开的Read the Docs样式,按以下步骤操作:
1. 启用主题内置的折叠导航特性
确保你的Material for MkDocs版本在v8.0及以上,然后在mkdocs.yml中配置主题特性:
theme: name: material features: - navigation.collapse # 核心:开启导航项手动折叠/展开功能 # 可选:如果希望默认展开所有导航项,添加下面一行;否则默认只展开当前页面所在层级 # - navigation.expand
配置后,导航栏的父级目录会出现折叠箭头,点击即可展开/收起子项,和Read the Docs的交互逻辑一致。
2. 自定义CSS贴近Read the Docs样式(可选)
如果想让视觉样式更接近Read the Docs,可以添加自定义CSS调整缩进和箭头样式:
- 在你的文档目录下创建
docs/stylesheets/extra.css文件,写入:
/* 调整折叠箭头的旋转逻辑,和Read the Docs一致 */ .md-nav__toggle { transform: rotate(-90deg); } .md-nav__toggle:checked ~ .md-nav__toggle { transform: rotate(0deg); } /* 调整导航层级缩进,更贴近Read the Docs的视觉层级 */ .md-nav__item--nested > .md-nav__link { padding-left: 1.2rem; } .md-nav__item--nested .md-nav__item--nested > .md-nav__link { padding-left: 2.4rem; }
- 在
mkdocs.yml中引入这个自定义CSS:
extra_css: - stylesheets/extra.css
内容的提问来源于stack exchange,提问作者Arkya
相关产品推荐
相关产品推荐

