Sphinxテーマ「ドキュメントを読む」のコンテンツの幅を変更する

ドキュメントに「Read the Docs」Sphinxテーマを使用しています。以下の元のテーマで

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

コンテンツまたはメインレイアウトの幅は、モバイルフレンドリーになるように設計されています。しかし、私のプロジェクトでは、これをもう少し広くしたいと思います。私はHTMLを知らないので、コンテンツ（レイアウト）の幅を増やすための手掛かりを誰かに教えてもらえれば幸いです。

htmlthemeswidthpython-sphinx

34

2014/04/22hypersonics

もう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を呼び出したと想定します

37

2015/11/10Leo

誰かがまだ単純な答えを探している場合に備えて https://samnicholls.net/2016/06/15/how-to-sphinx-readthedocs/ と上記のアイデアを組み合わせますカスタムウィンドウ幅を取得する最も簡単な方法は次のとおりです。

conf.pyに、カスタムスタイルシートを追加する関数を追加します（次の行を追加するだけです）。

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

次に、my_theme.cssというファイルを_ staticフォルダに作成します次の行が含まれているだけです。

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

16

2017/04/03se_pp

まず最初に、スフィンクス中にquickstart私はsourcesとbuildに別々のフォルダのオプションを選択したことを伝えなければなりません。

これは3ステップのプロセスです。

1.スタイル用のドキュメントを作成します。

どこ？

1. 私の_conf.py_が存在するのと同じディレクトリ（私の場合はsource）に、カスタム静的ファイル（スタイルシート、JavaScript）用のフォルダーを作成しました。 customと呼びました。
2. その中に、スタイルシート用のサブフォルダーを作成しました：_source/custom/css_。
3. このサブフォルダーで、カスタムスタイル_source/custom/css/my_theme.css_を作成します。

2.スフィンクスにそれを伝える

次に、このドキュメントを_build/_static/css_内に吐き出すようにsphinxに指示する必要があります。これは、スタイルシートがRead The Documentsテーマに含まれているのと同じディレクトリです。これを行うには、次の行を_conf.py_に追加します。

_html_static_path = ['custom']       # Directory for static files.
_

できました。これで、ビルドすると、[〜＃〜] rtd [〜＃〜]スタイル（_theme.css_）とカスタム_my_theme.css_が同じディレクトリに作成されます。 _build/_static/css_。

3.カスタムテーマの選択

[〜＃〜] rtd [〜＃〜] 1ではなく、カスタム_my_theme.css_を使用するようにsphinxに指示します。この行を_conf.py_に追加します。

_html_style = 'css/my_theme.css'     # Choosing my custom theme.
_

カスタムスタイルシートでは、最初の行で_theme.css_と@import url("theme.css");のスタイルをインポートする必要があります。

そして、スタイルを上書きする準備が整いました。

更新：ありますIS簡単な方法です。

1.カスタマイズを_source/_static/css/my_theme.css_内に配置します。

カスタムスタイルシートでは、最初の行で_theme.css_のスタイルと@import url("theme.css");をインポートする必要があります。

このようにして、デフォルトのスタイルを台無しにすることを心配する必要はありません。custom stylesheetが機能しない場合は、削除してからやり直してください。

2. _conf.py_に次の行を追加します。

_html_style = 'css/my_theme.css' 
_

15

2015/01/27Bobby Wan-Kenobi

ここでのソリューションはややハックです。スタイルを含め、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

2015/10/01Nick Ellis

Sphinx 1.8.0b1（2018年9月リリース）に追加されたHTMLオプションは、プロセスを簡素化します。 Read-Docsドキュメントの recommendation は、_ adding custom css を介してテーマにhtml_css_filesconf.pyのオプション。

html_css_files = [
    'custom.css',
]

Custom.cssをhtml静的パスフォルダーに配置します（デフォルトは_ staticフォルダーです）。

custom.cssの内容：

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

6

2019/09/08Jose Cherian

「クラシック」テーマの場合、ソリューションは次のようにシンプルでクリーンです。

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

パーセンテージを好みに合わせてください。

Sphinxからの参照：body_max_width（intまたはstr）：ドキュメント本文の最大幅。これは、ピクセルとして解釈される整数、または「70em」や「50％」などの有効なCSSディメンション文字列にすることができます。幅の制限が必要ない場合は、「なし」を使用します。デフォルトはテーマによって異なる場合があります（多くの場合800px）。

4

2019/01/26Yahya Yahyaoui

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 のようなツールを使用して読みやすくすることができます。

---

結果：

前：

後：

3

2015/04/04chown

私はCSSでこれを変更します。ファイルtheme.cssを検索する必要があります（ "sphinx_rtd_theme/static/css/theme.css"のread-the-docソースにあります）。

そのファイルのコピーを作成し、sphinx _static dirに置きます。そのcssファイルでは、必要なすべてのレイアウト変更を行うことができます。 （これまで作業したことがない場合は、cssファイルを少し読む必要があるかもしれません。）

お役に立てれば。

1

2014/04/29steffens21