修改Sphinx主题的内容宽度＆＃39;阅读文档＆＃39;

Question

我正在使用'Read the Docs'的Sphinx主题作为我的文档。在原始主题中，如下所示

http://read-the-docs.readthedocs.org/en/latest/theme.html

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

Answer 1

另一种选择是在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

Answer 2

首先，我必须说，在我的狮身人面像快速入门期间，我为来源和我的构建选择了单独的文件夹选项

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

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

在哪儿？

1. 在我的conf.py所在的同一目录中（在我的情况下为source），我为自定义静态文件（样式表，javascripts）创建了一个文件夹。我叫它custom。
2. 在其中我为我的样式表创建了一个子文件夹：source/custom/css。
3. 在这个子文件夹中，我将创建自定义样式：source/custom/css/my_theme.css。

2。告诉狮身人面像

现在我们必须告诉sphinx在build/_static/css内吐出这个文件，该目录与阅读文档主题中包含的样式表相同。我们这样做会将以下行添加到conf.py：

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

完成。现在，如果我们构建，我们将在同一目录theme.css中使用 RTD 样式（my_theme.css）和自定义build/_static/css。

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

现在我们要告诉sphinx使用我们的自定义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' 

Answer 3

以防万一有人还在寻找一个简单的答案...... 结合来自的想法 https://samnicholls.net/2016/06/15/how-to-sphinx-readthedocs/ 以上建议我发现获得自定义的最简单方法 窗口宽度如下：

conf.py 中的

添加一个添加自定义样式表的函数（只需添加以下行）：

def setup(app):
    app.add_stylesheet('my_theme.css')

然后在 _static 文件夹中创建一个名为 my_theme.css 的文件，该文件只包含以下行：

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

Answer 4

这里的解决方案有些过时。如果你想要包含样式，并且有一个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/

抄袭的

Answer 5

根据Read The Docs Documentation，向主题添加自定义CSS的推荐方法是通过 conf.py 中的html_css_files选项。

html_css_files = [
    'style.css',
]

style.css

的内容

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

请记住将style.css放入html静态路径文件夹（默认为 _static 文件夹）。

Answer 6

要使ReadTheDocs主题使用整个屏幕宽度，您可以修改theme.css文件，从max-width: 800px;类定义中删除wy-nav-content属性，如此：

.wy-nav-content {
    padding: 1.618em 3.236em;
    height: 100%;
    /* max-width: 800px; */
    margin: auto;
}

---

一些笔记

• theme.css的来源在这里：

  https://github.com/rtfd/readthedocs.org/blob/master/media/css/sphinx_rtd_theme.css

• 在您的文件系统上它（假设您已经运行：pip install sphinx_rtd_theme）：

  lib/python2.7/site-packages/sphinx_rtd_theme/static/css/theme.css

• 要在Linux / Mac上找到theme.css的绝对路径，您可以在命令行上运行此命令（假设您已设置$PYTHONPATH环境变量）：

  for p in `echo $PYTHONPATH | tr ":" "\n"`; do 
      find $p -type f -name 'theme.css' | grep sphinx_rtd_theme
  done
  

• theme.css文件将缩小，因此您可以使用http://unminify.com之类的工具，以便于阅读。

---

结果：

之前：

后：

Answer 7

对于“经典”主题，解决方案非常简单和干净：

# Add/Update "html_theme_options" like this on your conf.py
html_theme_options = {'body_max_width': '70%'}

根据您的口味调整百分比。

  

来自狮身人面像的引用：body_max_width（int或str）：文档主体的最大宽度。这可以是一个整数，可以解释为像素或有效的CSS尺寸字符串，例如“ 70em”或“ 50％”。如果您不希望使用宽度限制，请使用“无”。默认值可能取决于主题（通常为800像素）。

Answer 8

1. source \ conf.py

html_theme = 'sphinx_rtd_theme'
html_style = 'css/my_theme.css'

1. source \ _static \ css \ my_theme.css

@import url("theme.css");

.wy-nav-content {
    max-width: 90%;
}

这将是您显示器的90％宽度。

Answer 9

我会在css中修改它。您应该搜索文件theme.css（它位于＆＃34;阅读文档来源/＃34; sphinx_rtd_theme / static / css / theme.css＆＃34;）。

制作该文件的副本并将其放入sphinx _static目录中。在该css文件中，您可以进行所需的所有布局更改。 （如果你从未使用过css文件，你可能需要阅读一下。）

希望这有帮助。