You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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调整缩进和箭头样式:

  1. 在你的文档目录下创建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;
}
  1. 在mkdocs.yml中引入这个自定义CSS:
extra_css:
  - stylesheets/extra.css

内容的提问来源于stack exchange,提问作者Arkya

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.01 06:10:31