修改 Sphinx 主题“阅读文档”的内容宽度

问题描述 投票:0回答:6

我正在为我的文档使用“阅读文档”Sphinx 主题。在原始主题中,如下所示

阅读文档狮身人面像主题

内容或主要布局宽度设计为适合移动设备。但是,对于我的项目,我希望它更宽一些。我不知道 HTML,因此如果有人能给我一些线索来增加内容(布局)宽度,我将不胜感激。

html themes width python-sphinx
6个回答
62
投票

另一个选择是在

source/_static
中创建一个样式表,只包含您想要的 css,例如

.wy-nav-content {
    max-width: none;
}

.wy-nav-content {
    max-width: 1200px !important;
}

确保目录在

source/conf.py
中被引用 - 我相信默认情况下有一行可以做到这一点,即

# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ['_static']

然后在

source/_templates/layout.html
中创建自定义布局并执行类似这样的操作以包含您的样式表

{% extends "!layout.html" %}
{% block extrahead %}
    <link href="{{ pathto("_static/style.css", True) }}" rel="stylesheet" type="text/css">
{% endblock %}

假设您调用了样式表

style.css


30
投票

如果有人正在寻找更简单的答案...... 结合来自的想法 https://samnicholls.net/2016/06/15/how-to-sphinx-readthedocs/ 和上面的建议,我发现获取自定义窗口宽度的最简单方法如下:

  1. conf.py
    中,添加一个添加自定义样式表的函数:

    def setup(app):
        app.add_css_file('my_theme.css')
    
  2. conf.py
    ,状态/调整:

    html_static_path = ['_static'] 
    
  3. Create a

    _static
    folder/directory if it doesn't exist.

  4. 在包含以下行的

    my_theme.css
    文件夹中创建一个名为
    _static
    的文件:

    .wy-nav-content {
        max-width: 1200px !important;
    }
    

22
投票

Sphinx 1.8.0b1(2018 年 9 月发布)中添加的 HTML 选项简化了该过程。 Read The Docs Documentation 中的recommendationadding custom css to the theme via the

html_css_files
option in conf.py

html_css_files = [
    'custom.css',
]

将custom.css放在html静态路径文件夹中(默认为_static文件夹)。

custom.css的内容

.wy-nav-content {
    max-width: 75% !important;
}

18
投票

首先我必须说,在我的 sphinx quickstart 期间,我为我的 sources 和我的 build.

选择了单独的文件夹选项

这是一个3个步骤的过程:

1。为您的样式创建文档:

在哪里?

  1. 在我的
    conf.py
    所在的同一目录中(在我的例子中是
    source
    ),我为我的自定义静态文件(样式表、javascript)创建了一个文件夹。我叫它
    custom
    .
  2. 在里面我为我的样式表创建了一个子文件夹:
    source/custom/css
    .
  3. 在这个子文件夹中,我将创建我的自定义样式:
    source/custom/css/my_theme.css
    .

2。告诉狮身人面像

现在我们必须告诉 sphinx 将此文档吐到

build/_static/css
中,与 Read The Documents 主题中包含的样式表所在的目录相同。我们这样做,将以下行添加到
conf.py

html_static_path = ['custom']       # Directory for static files.

完成。现在,如果我们构建,我们将在同一目录中拥有RTD样式(

theme.css
)和我们的自定义
my_theme.css
build/_static/css
.

3。选择我们的自定义主题

现在我们要告诉狮身人面像使用我们的自定义

my_theme.css
,而不是RTD。我们在
conf.py
:

中添加这一行
html_style = 'css/my_theme.css'     # Choosing my custom theme.

在我们的自定义样式表中,第一行应该导入

theme.css
@import url("theme.css");
的样式。

我们准备开始覆盖样式。

更新:还有更简单的方法。

1。把你的定制放在里面
source/_static/css/my_theme.css
.

在您的自定义样式表中,第一行应该导入

theme.css
@import url("theme.css");
的样式。

这样,您不必担心弄乱默认样式,如果您的自定义样式表不起作用,请删除并重新开始。

2。在
conf.py
中添加以下行:

html_style = 'css/my_theme.css' 

7
投票

这里的解决方案有点老套。如果你想包含样式,并有一个 css 覆盖并让它在 RTD 上工作,你会想要这样的东西。

on_rtd = os.environ.get('READTHEDOCS', None) == 'True'

if not on_rtd:  # only import and set the theme if we're building docs locally
  import sphinx_rtd_theme
  html_theme = 'sphinx_rtd_theme'
  html_theme_path = [sphinx_rtd_theme.get_html_theme_path()]
  html_style = 'css/custom.css'
else:
  html_context = { 
    'css_files': [
        'https://media.readthedocs.org/css/sphinx_rtd_theme.css',
        'https://media.readthedocs.org/css/readthedocs-doc-embed.css',
        '_static/css/custom.css',
    ],  
  }   

我自己对此进行了测试,它似乎在本地和 RTD 上都能正常工作。很大程度上抄袭自 https://blog.deimos.fr/2014/10/02/sphinxdoc-and-readthedocs-theme-tricks-2/


7
投票
  1. 来源
© www.soinside.com 2019 - 2024. All rights reserved.