如何在Sphinx目录中添加水平分隔条?
嘿,这个需求我之前帮不少人搞定过!在Sphinx里给目录(侧边栏菜单)加水平分隔条区分章节,其实有几个实用的方案,看你用的主题和具体场景来选:
这是最简单的方式,几乎适用于所有Sphinx主题。核心思路是给需要分隔的章节添加自定义类,然后用CSS在它后面加分隔线。
首先在你的RST文档里,给目标章节添加类标记:
.. _chapter-important: 重要章节 ========== :class: divider-section 这里是章节内容...然后在你的Sphinx项目的
_static文件夹里创建custom.css,添加以下样式(根据你的主题调整颜色和间距):/* 针对侧边栏目录的分隔条 */ .toctree-l1.divider-section + .toctree-l1 { border-top: 1px solid #e0e0e0; margin-top: 0.6em; padding-top: 0.6em; }这里的
.toctree-l1是大部分主题(比如Read the Docs、Alabaster)里一级目录项的类名,如果你的主题类名不同,用浏览器的开发者工具检查一下目录元素的类就行。最后在
conf.py里引入这个自定义CSS文件:html_css_files = [ 'custom.css', ]
如果需要更精准地控制分隔条的位置(比如固定在某几个章节之间),可以重载Sphinx的目录模板。
先找到你当前主题的目录模板文件,比如Alabaster主题的侧边栏模板是
sidebar.html,Read the Docs的是toctree.html。把这个模板复制到你项目的templates文件夹里(没有就新建一个)。修改模板内容,在需要插入分隔条的地方添加
<hr>标签。比如用Jinja2语法判断章节标题:{% for item in toctree_items %} <li class="toctree-l1"><a href="{{ item.href }}">{{ item.title }}</a></li> <!-- 在"进阶指南"章节后插入分隔条 --> {% if item.title == "进阶指南" %} <hr class="toc-divider"> {% endif %} {% endfor %}同样在
custom.css里给分隔条加样式:.toc-divider { border: none; border-top: 1px solid #ddd; margin: 1em 0; padding: 0; }
如果你的分隔规则比较复杂(比如按章节层级自动分隔),可以写个简单的Sphinx扩展,注册一个自定义directive来插入分隔标记。
比如在你的项目里创建一个extensions/toc_divider.py文件:
from docutils import nodes from docutils.parsers.rst import Directive class TOCDivider(Directive): def run(self): # 创建一个自定义节点,后续在HTML转换时处理 divider_node = nodes.raw('', '<hr class="toc-divider">', format='html') return [divider_node] def setup(app): app.add_directive('toc-divider', TOCDivider) return { 'version': '0.1', 'parallel_read_safe': True, }
然后在conf.py里启用这个扩展:
extensions = [ # 其他扩展... 'extensions.toc_divider', ]
之后在你的RST文档里,直接在需要分隔的位置插入:
.. toc-divider::
这样生成的HTML里就会出现分隔条,再用CSS调整样式就行。
注意:以上方法主要针对HTML输出的侧边栏目录,如果是PDF文档的目录,需要修改LaTeX模板,不过一般菜单式的分隔条都是指HTML侧边栏啦。
内容的提问来源于stack exchange,提问作者Abe




