You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Sphinx目录中添加水平分隔条?

嘿,这个需求我之前帮不少人搞定过!在Sphinx里给目录(侧边栏菜单)加水平分隔条区分章节,其实有几个实用的方案,看你用的主题和具体场景来选:

方法一:自定义CSS(最通用)

这是最简单的方式,几乎适用于所有Sphinx主题。核心思路是给需要分隔的章节添加自定义类,然后用CSS在它后面加分隔线。

  1. 首先在你的RST文档里,给目标章节添加类标记:

    .. _chapter-important:
    
    重要章节
    ==========
    :class: divider-section
    
    这里是章节内容...
    
  2. 然后在你的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)里一级目录项的类名,如果你的主题类名不同,用浏览器的开发者工具检查一下目录元素的类就行。

  3. 最后在conf.py里引入这个自定义CSS文件:

    html_css_files = [
        'custom.css',
    ]
    
方法二:重载目录模板(更灵活)

如果需要更精准地控制分隔条的位置(比如固定在某几个章节之间),可以重载Sphinx的目录模板。

  1. 先找到你当前主题的目录模板文件,比如Alabaster主题的侧边栏模板是sidebar.html,Read the Docs的是toctree.html。把这个模板复制到你项目的templates文件夹里(没有就新建一个)。

  2. 修改模板内容,在需要插入分隔条的地方添加<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 %}
    
  3. 同样在custom.css里给分隔条加样式:

    .toc-divider {
        border: none;
        border-top: 1px solid #ddd;
        margin: 1em 0;
        padding: 0;
    }
    
方法三:自定义Directive(适合复杂场景)

如果你的分隔规则比较复杂(比如按章节层级自动分隔),可以写个简单的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

火山引擎 最新活动