Подтвердить что ты не робот

Изменение ширины содержимого темы Sphinx 'Read the Docs'

Я использую тему "Прочитайте Документы" Sphinx для моей документации. В оригинальной теме, приведенной ниже

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

ширина содержимого или основной макета предназначена для мобильных устройств. Однако для моего проекта я хотел бы, чтобы это было немного шире. Я не знаю HTML и, следовательно, был бы признателен, если бы кто-нибудь мог дать мне некоторые подсказки для увеличения ширины содержимого (макета).

4b9b3361

Ответ 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

Ответ 2

Прежде всего, я должен сказать, что во время моего сфинкса quickstart я выбрал вариант отдельной папки для моих источников и для моей сборки.

Это трехэтапный процесс:

1. Создайте документ для своих стилей:

Где?

  • В том же каталоге, где живет мой conf.py (в моем случае source), я создал папку для своих статических файлов (stylesheets, javascripts). Я назвал его custom.
  • Внутри я создал подпапку для своих таблиц стилей: source/custom/css.
  • В этой подпапке я создам свои собственные стили: source/custom/css/my_theme.css.

2. Рассказывать о сфинксе об этом

Теперь нам нужно сказать sphinx, чтобы плюнуть на этот документ внутри build/_static/css, тот же каталог, где находится таблица стилей, включенная в тему Прочитать документы. Мы делаем это, добавляя следующую строку к conf.py:

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

Готово. Теперь, если мы построим, у нас будут стили RTD (theme.css) и наш пользовательский 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' 

Ответ 3

Просто на тот случай, если кто-то все еще ищет простой ответ... объединяя идеи из 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;
}

Ответ 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/

Ответ 5

Для "классической" темы решение так же просто и чисто, как:

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

Адаптируйте процент по своему вкусу.

Ссылка из sphinx: body_max_width (int или str): максимальная ширина тела документа. Это может быть int, который интерпретируется как пиксели или допустимая строка размера CSS, например, 70em или 50%. Используйте ‘none, если вы не хотите ограничения ширины. Значения по умолчанию могут зависеть от темы (часто 800px).

Ответ 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

  • Чтобы найти абсолютный путь theme.css в Linux/Mac, вы можете запустить это в командной строке (при условии, что вы установили переменную среды $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, чтобы было легче читать.


Результаты:

Перед

Unmodified readthedocs theme

После того, как:

Modified readthedocs theme

Ответ 7

Я бы изменил это в css. Вы должны искать файл theme.css(он находится в источниках read-the-doc на странице "sphinx_rtd_theme/static/css/theme.css" ).

Сделайте копию этого файла и поместите его в свой sphinx _static. В этом файле css вы можете внести все изменения макета, которые вам нужны. (Возможно, вам придется немного почитать файлы css, если вы никогда с этим не работали.)

Надеюсь, что это поможет.

Ответ 8

Согласно Прочтите Документацию Docs, рекомендуемый способ добавить пользовательский CSS в тему - это опция html_css_files в conf.py.

html_css_files = [
    'style.css',
]

содержимое style.css

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

Пожалуйста, не забудьте поместить style.css в папку статического пути html (по умолчанию это _static папка).